diff --git a/_config.yml b/_config.yml index a3189dc3a..80615d998 100644 --- a/_config.yml +++ b/_config.yml @@ -118,6 +118,10 @@ navigation: controls/border: title: "Border" ## End Border + ## BottomSheet + controls/bottomsheet: + title: "BottomSheet" + ## End BottomSheet ## BusyIndicator controls/busyindicator: title: "BusyIndicator" @@ -727,6 +731,7 @@ intro_columns: title: "Navigation & Layouts" items: "Accordion": "accordion-overview" + "BottomSheet": "bottomsheet-overview" "DockLayout": "docklayout-overview" "Expander": "expander-overview" "NavigationView": "navigationview-overview" diff --git a/controls/accordion/animation.md b/controls/accordion/animation.md index 424a0a79a..7504f7141 100644 --- a/controls/accordion/animation.md +++ b/controls/accordion/animation.md @@ -10,14 +10,14 @@ slug: accordion-animation Telerik .NET MAUI Accordion provides an option to set the animation when expanding/collapsing an accordion item. -## Animation while expanding/collapsing +## Animation while Expanding/Collapsing -To enable or disable the animation you need to use the `IsAnimationEnabled` property of `RadAccordion`. By default, the Animation is enabled. +To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadAccordion`. By default, the Animation is enabled. You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties. -* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is 500. -* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is Easing.Linear. +* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the `AccordionItem`. The default value is `500`. +* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.Linear`. ## Example diff --git a/controls/bottomsheet/animation.md b/controls/bottomsheet/animation.md new file mode 100644 index 000000000..20c5fb869 --- /dev/null +++ b/controls/bottomsheet/animation.md @@ -0,0 +1,32 @@ +--- +title: Animation +page_title: .NET MAUI BottomSheet Documentation - Animation +description: Learn how to configure animation settings for the Telerik BottomSheet for .NET MAUI, including duration, easing, and enable/disable options. +position: 5 +slug: bottomsheet-animation +--- + +# .NET MAUI BottomSheet Animation + +Adding animation to the BottomSheet provides visual continuity and makes the interface feel more responsive and polished. Smooth transitions help users understand the relationship between different states and create a more engaging user experience. + +The Telerik .NET MAUI BottomSheet provides comprehensive animation options for opening, closing, and state transitions, whether triggered programmatically or through user interactions like swipe gestures. + +The following properties control the animation behavior of the BottomSheet: + +To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled. + +You can also customize the animation's duration and easing by using the following properties. + +* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000` milliseconds. +* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.CubicOut`. + +> For a runnable example with the BottomSheet Animation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## See Also + +- [Swipe Gesture]({%slug bottomsheet-swipe-gesture%}) +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/configuration.md b/controls/bottomsheet/configuration.md new file mode 100644 index 000000000..07397e3a7 --- /dev/null +++ b/controls/bottomsheet/configuration.md @@ -0,0 +1,127 @@ +--- +title: Configuration +page_title: .NET MAUI BottomSheet Documentation - Configuration +description: Learn more about how to configure the Telerik UI for .NET MAUI BottomSheet control. +position: 3 +slug: bottomsheet-configuration +--- + +# .NET MAUI BottomSheet Configuration + +The Telerik UI for .NET MAUI BottomSheet control offers flexible configuration options for states, dimensions, and visual elements. You can define custom states with specific heights, control the sheet's dimensions using absolute or percentage values, and customize the draggable handle to match your application's design. + +## States + +The BottomSheet control provides a flexible state system that determines how much of the screen the component occupies. You can use predefined states or create custom ones to present content at different visibility levels. + +### Predefined States + +The control includes four built-in states with predefined heights: + +* `Hidden` (default)—Represents a completely hidden bottom sheet. +* `Minimal`—Represents a minimal bottom sheet state with height `25%`. +* `Partial`—Represents a partial bottom sheet state with height `50%`. +* `Full`—Represents a full bottom sheet state with height `90%`. + +### Setting States + +You can specify the current state using the `State` property of type `BottomSheetState`: + +```xaml + + + +``` + +### Custom States + +You can control the generation of default states using the `AutoGenerateStates` (`bool`) property. The default value is `true`, which means the four predefined states are populated in the `States` collection. + +```xaml + +``` + +Create custom states using the `BottomSheetState` class constructors: + +* Using `BottomSheetLength` + +```csharp +public BottomSheetState(string name, BottomSheetLength height) +``` + +* Using `double` value + +```csharp +public BottomSheetState(string name, double size, bool isPercentage = false) +``` + +Example of creating custom states: + +```csharp +// Custom state with 30% height +var customState = new BottomSheetState("Custom", 30, true); + +// Custom state with absolute height = 200 +var fixedState = new BottomSheetState("Fixed", 200, false); +``` + +### Programmatic State Changes + +Use the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}) to programmatically change states: + +Here is an example setting the predefined name of the state inside the `GoToBottomSheetState(string name)` method: + + + +Here is an example setting a custom state: + +```csharp +// Navigate to custom states +var customState = new BottomSheetState("Custom", 30, true); +bottomSheet.GoToBottomSheetState("Custom"); +``` + +### States Collection + +The BottomSheet provides a read-only `States` collection of type `ObservableCollection` that contains all available states for the bottom sheet, including both predefined and custom states. + +> For a runnable example with setting the BottomSheet States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## Width + +You can specify the width for the bottom sheet content using the `BottomSheetContentWidth` property of type `BottomSheetLength`. The `BottomSheetLength` structure supports both absolute and percentage values: + +```xaml + + + + + + + + + +``` +```csharp +// Using percentage +bottomSheet.BottomSheetContentWidth = new BottomSheetLength(80, true); + +// Using absolute value +bottomSheet.BottomSheetContentWidth = new BottomSheetLength(300, false); +``` + +> For a runnable example with setting the BottomSheet Width, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## Handle + +The BottomSheet exposes a visual cue which indicates the control can be dragged. You can customize the handle by using the `HandleStyle` (`Style` with target type `BottomSheetHandle`) property. + +For more details, review the [BottomSheet Handle Styling]({%slug bottomsheet-styling%}#handle-styling) article. + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/content.md b/controls/bottomsheet/content.md new file mode 100644 index 000000000..7a5ba727a --- /dev/null +++ b/controls/bottomsheet/content.md @@ -0,0 +1,61 @@ +--- +title: Content +page_title: .NET MAUI BottomSheet Documentation - Content +description: Learn more about how to set content inside the Telerik UI for .NET MAUI BottomSheet control. +position: 3 +slug: bottomsheet-content +--- + +# .NET MAUI BottomSheet Content + +The BottomSheet control has two distinct content areas: the _main content_ that serves as the background layer, and the _bottom sheet content_ that slides up to overlay additional information or functionality. You set the main content as the primary child of the control, while the `BottomSheetContent` (`View`) property defines what appears in the sliding panel. + +Here is a sample scenario when using the Telerik .NET MAUI [`RadCollectionView`]({%slug collectionview-overview%}) in the main content of the BottomSheet and a detailed view in the `BottomSheetContent`. + +**1.** Define the sample data model: + + + +**2.** Define the `ViewModel`: + + + +**3.** Define the BottomSheet in XAML with `RadCollectionView`: + + + +**4.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**5.** Add the following code for the `RadCollectionView.ItemTapped` event handler: + + + +This is the result on Android: + +![.NET MAUI BottomSheet Content](images/bottomsheet-content.png) + +> For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example. + +## Setting Custom Control Template + +> If you want to review the default BottomSheet templates, add the [TelerikTheming]({%slug themes-overview%}) to the project and go to `TelerikTheming/Styles/Platform/BottomSheet.xaml` file. + + +Here is an example setting custom `ControlTemplate`. + + + +This is the result on Android: + +![.NET MAUI BottomSheet Control Template](images/bottomsheet-control-template.png) + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/events.md b/controls/bottomsheet/events.md new file mode 100644 index 000000000..26037f63d --- /dev/null +++ b/controls/bottomsheet/events.md @@ -0,0 +1,21 @@ +--- +title: Events +page_title: .NET MAUI BottomSheet Documentation - Events +description: Learn about the PositionChanged event in Telerik UI for .NET MAUI BottomSheet and how to handle position changes when the bottom sheet is dragged or programmatically moved. +position: 9 +slug: bottomsheet-events +--- + +# .NET MAUI BottomSheet Events + +The BottomSheet `StateChanging` event is useful for tracking user interactions and responding to sheet movements. Use this event to update UI elements based on the sheet's state, implement custom animations, or trigger actions when the sheet reaches specific state during drag gestures or programmatic state changes. +The `StateChanging` event handler receives two parameters: +* The `sender` argument, which is of type `object`, but can be cast to the `RadBottomSheet` type. +* The `BottomSheetStateChangingEventArgs` object, which has a reference to the new position of the bottom sheet through its `Position` property (of type `double`). + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/getting-started.md b/controls/bottomsheet/getting-started.md new file mode 100644 index 000000000..95790451d --- /dev/null +++ b/controls/bottomsheet/getting-started.md @@ -0,0 +1,89 @@ +--- +title: Getting Started +page_title: .NET MAUI BottomSheet Documentation - Getting Started +description: Get started with the Telerik UI for .NET MAUI BottomSheet control and learn how to add the control to your .NET MAUI application. +position: 2 +slug: bottomsheet-getting-started +--- + +# Getting Started with the .NET MAUI BottomSheet + +This guide provides the information you need to start using the Telerik UI for .NET MAUI BottomSheet by adding the control to your project. + +At the end, you will achieve the following result. + +![BottomSheet Getting Started](images/bottomsheet-getting-started.png) + +## Prerequisites + +Before adding the BottomSheet, you need to: + +1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application). + +1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui). + +1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui). + +## Define the Control + +**1.** When your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page. + + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` +```C# +using Telerik.Maui.Controls; +``` + +**3.** Add the code for opening the BottomSheet view: + + + +**4.** Add the code for closing the BottomSheet view: + + + +**5.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project: + +```C# +using Telerik.Maui.Controls.Compatibility; + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseTelerik() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } +} +``` + +> For a runnable example with the BottomSheet Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Getting Started**. + +## Additional Resources + +- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet) +- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) diff --git a/controls/bottomsheet/images/bottomsheet-content.png b/controls/bottomsheet/images/bottomsheet-content.png new file mode 100644 index 000000000..31dc7e0a8 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-content.png differ diff --git a/controls/bottomsheet/images/bottomsheet-control-template.png b/controls/bottomsheet/images/bottomsheet-control-template.png new file mode 100644 index 000000000..a4ba34c91 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-control-template.png differ diff --git a/controls/bottomsheet/images/bottomsheet-handle-styling.png b/controls/bottomsheet/images/bottomsheet-handle-styling.png new file mode 100644 index 000000000..685399732 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-handle-styling.png differ diff --git a/controls/bottomsheet/images/bottomsheet-methods.gif b/controls/bottomsheet/images/bottomsheet-methods.gif new file mode 100644 index 000000000..1058e0c81 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-methods.gif differ diff --git a/controls/bottomsheet/images/bottomsheet-styling.png b/controls/bottomsheet/images/bottomsheet-styling.png new file mode 100644 index 000000000..7d8fac2e2 Binary files /dev/null and b/controls/bottomsheet/images/bottomsheet-styling.png differ diff --git a/controls/bottomsheet/methods.md b/controls/bottomsheet/methods.md new file mode 100644 index 000000000..8c5805b1e --- /dev/null +++ b/controls/bottomsheet/methods.md @@ -0,0 +1,39 @@ +--- +title: Methods +page_title: .NET MAUI BottomSheet Documentation - Methods +description: Learn about the methods that the Telerik UI for .NET MAUI BottomSheet control exposes and find out how to use them to configure the UI component. +position: 11 +slug: bottomsheet-methods +--- + +# .NET MAUI BottomSheet Methods + +The Telerik UI for .NET MAUI BottomSheet component exposes the `GoToBottomSheetState(string name)` method. Use the method to transition the bottom sheet to a specified [state]({%slug bottomsheet-configuration%}). + +The example shows how to use the `GoToBottomSheetState(string name)` method: + +**1** Define the BottomSheet in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +**3.** Call the `GoToBottomSheetState()` method with corresponding state name: + + + +This is the result on Android: + +![.NET MAUI BottomSheet Methods](images/botomsheet-methods.gif) + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) + diff --git a/controls/bottomsheet/overview.md b/controls/bottomsheet/overview.md new file mode 100644 index 000000000..ca713f65b --- /dev/null +++ b/controls/bottomsheet/overview.md @@ -0,0 +1,37 @@ +--- +title: Overview +page_title: .NET MAUI BottomSheet Documentation - Overview +description: Try now the Telerik UI for .NET MAUI BottomSheet that you can use to display action menus, various panels, previews, and more. +position: 0 +tags: .net maui, bottomsheet, ui for .net maui, .net maui conrols, microsoft .net maui +slug: bottomsheet-overview +--- + +# .NET MAUI BottomSheet Overview + +The Telerik UI for .NET MAUI BottomSheet is a UI component that slides up from the bottom of the screen to reveal more content. Use the BottomSheet to display additional information, provide the user with actions or give the option for secondary navigation. + +The control presents the information or actions related to the current screen but it does not cover the full screen. + +![.NET MAUI BottomSheet Overview](images/bottomsheet-overview.png "BottomSheet Overview") + +## Key Features of the Telerik .NET MAUI BottomSheet + +* [States]({%slug bottomsheet-configuration%}#states-built-in-transitions)—The BottomSheet control supports various states like `Full`, `Partial`, `Minimal`, and `Hidden`. +* [Visual Handle]({%slug bottomsheet-configuration%}#handle)—The BottomSheet exposes a visual cue which indicates the control can be dragged. +* [Width]({%slug bottomsheet-configuration%}#width)—The BottomSheet allows you to set the size of its bottom sheet view with an absolute value or percentage. +* [Setting Content]({%slug bottomsheet-content%})—The control allows you to set content by using the `BottomSheetContent` property. +* [Animation]({%slug bottomsheet-animation%})—The BottomSheet allows you to enable/disable the animation when opening/closing the bottom sheet view. +* [Flexible Styling API]({%slug bottomsheet-styling%})—Style the handle and the BottomSheet control by using the exposed styling API. +* [Events]({%slug bottomsheet-events%})—The BottomSheet exposes an event which occurs when the position of the bottom sheet changes. + +## Next Steps + +- [Getting Started with the Telerik UI for .NET MAUI BottomSheet]({% slug bottomsheet-getting-started %}) + +## See Also + +- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet) +- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) diff --git a/controls/bottomsheet/styling.md b/controls/bottomsheet/styling.md new file mode 100644 index 000000000..944e3639f --- /dev/null +++ b/controls/bottomsheet/styling.md @@ -0,0 +1,92 @@ +--- +title: Styling +page_title: .NET MAUI BottomSheet Documentation - Styling +description: Learn how to customize the appearance of the Telerik UI for .NET MAUI BottomSheet control and its handle component using styling properties like colors, borders, and dimensions. +position: 15 +slug: bottomsheet-styling +--- + +# .NET MAUI BottomSheet Styling + +The BottomSheet control offers styling options for both the main container, the bottom sheet content view, and its draggable handle component. You can customize colors, borders, corner radius, and dimensions to match your application's design requirements and create a polished user experience. + +To style the BottomSheet control, use the `Style` property (`Style` with target type of `RadBottomSheet`). + +To style the view of the `BottomSheetContent`, use the `BottomSheetContentStyle` property (`Style` with target type of `telerik:BottomSheetContentView`). + +The available properties are described below: + +* `BackgroundColor` (`Color`)—Specifies the background color of the control. +* `BorderColor` (`Color`)—Specifies the border color around the control. +* `BorderBrush` (`Brush`)—Specifies the border brush around the control. +* `BorderThickness` (`Thickness`)—Specifies the border thickness around the control. +* `CornerRadius` (`Thickness`)—Specifies the corner radius of the border around the control. + +Here is an example of the BottomSheet styling. + +**1.** Define the BottomSheet in XAML: + + + +**2.** Define the `RadBottomSheet` style in page's resources: + + + +**3.** Define the `BottomSheetContentView` style in page's resources: + + + +**4.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +Here is the result of styling the BottomSheet and `BottomSheetContent`. The `BottomSheetContent` opens when tapping on an item from the CollectionView: + +![.NET MAUI BottomSheet Styling](images/bottomsheet-styling.png) + +> For a runnable example with the BottomSheet Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category. + +## Styling the BottomSheet Handle + +The handle of the BottomSheet is a small visual indicator at the top of the control that users can grab to drag and resize the panel. You can style the handle by setting the `HandleStyle` property to the `RadBottomSheet`. The target type of the `HandleStyle` is `BottomSheetHandle`. + +The available properties are described below: + +* `BackgroundColor` (`Color`)—Specifies the background color of the control. +* `BorderColor` (`Color`)—Specifies the border color around the control. +* `BorderBrush` (`Brush`)—Specifies the border brush around the control. +* `BorderThickness` (`Thickness`)—Specifies the border thickness around the control. +* `CornerRadius` (`Thickness`)—Specifies the corner radius of the border around the control. +* `WidthRequest` (`double`)—Specifies the width of the handle. +* `HeightRequest` (`double`)—Specifies the height of the handle. + +Here is an example of the BottomSheet handle styling. + +**1.** Define the BottomSheet in XAML: + + + +**2.** Define the `BottomSheetHandle` style in page's resources: + + + +**3.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +Here is the result of styling the handle. The BottomSheet content opens when tapping on an item from the CollectionView: + +![.NET MAUI BottomSheet Styling](images/bottomsheet-handle-styling.png) + +> For a runnable example with the BottomSheet Handle Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category. + +## See Also + +- [Configure the BottomSheet]({%slug bottomsheet-configuration%}) +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/swipe-gesture.md b/controls/bottomsheet/swipe-gesture.md new file mode 100644 index 000000000..73001a622 --- /dev/null +++ b/controls/bottomsheet/swipe-gesture.md @@ -0,0 +1,25 @@ +--- +title: Swipe Gesture +page_title: .NET MAUI BottomSheet Documentation - Swipe Gesture +description: Learn how to enable or disable swipe gestures for the Telerik UI for .NET MAUI BottomSheet control to control user interaction and accessibility. +position: 3 +slug: bottomsheet-swipe-gesture +--- + +# .NET MAUI BottomSheet Swiping + +The BottomSheet control supports intuitive swipe gestures that allow users to close and resize the sheet by dragging up or down on the content area. +This touch-friendly interaction provides a natural way for users to control the BottomSheet's visibility and gives the smooth transition between states with animation, enhancing the overall user experience on mobile and desktop devices. + +You can disable the swipe gesture by setting the `IsSwipeEnabled` (`bool`) property. The default value is `true`. + +> The animation is always enabled when using the swipe gesture to change the states of the BottomSheet. You can configure the animation settings using the `AnimationDuration` and `AnimationEasing` properties. + +> For a runnable example with the BottomSheet Swipe scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category. + +## See Also + +- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%}) +- [Style the BottomSheet]({%slug bottomsheet-styling%}) +- [Events]({%slug bottomsheet-events%}) +- [Methods]({%slug bottomsheet-methods%}) \ No newline at end of file diff --git a/controls/bottomsheet/visual-structure.md b/controls/bottomsheet/visual-structure.md new file mode 100644 index 000000000..ea54d7771 --- /dev/null +++ b/controls/bottomsheet/visual-structure.md @@ -0,0 +1,17 @@ +--- +title: Visual Structure +page_title: .NET MAUI BottomSheet Documentation - Visual Structure +description: Learn more about the visual elements used in the Telerik UI for .NET MAUI BottomSheet control. +position: 1 +slug: bottomsheet-visual-structure +--- + +# .NET MAUI BottomSheet Visual Structure + +The visual structure of the [.NET MAUI BottomSheet]({%slug bottomsheet-overview%}) represents the anatomy of the UI control. Being familiar with the visual elements of the BottomSheet allows you to quickly find the information required to configure them. + +The following image shows the anatomy of the BottomSheet. + +![Telerik UI for .NET MAUI BottomSheet Visual Structure](images/bottomsheet-visual-structure.png "Visual elements of the .NET MAUI BottomSheet control") + +* ****— diff --git a/spell-ignore.txt b/spell-ignore.txt index 69976995f..af7b6b8b2 100644 --- a/spell-ignore.txt +++ b/spell-ignore.txt @@ -86,4 +86,5 @@ TextInput telerik TreeDataGrid Theming -MCP \ No newline at end of file +BottomSheet +MCP