Skip to content

Commit a9830b9

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1203 from telerik/didi/bottomsheet
Add first part of bottom sheet docs
2 parents 051807c + b71e0fe commit a9830b9

18 files changed

+551
-5
lines changed

‎_config.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ navigation:
118118
controls/border:
119119
title: "Border"
120120
## End Border
121+
## BottomSheet
122+
controls/bottomsheet:
123+
title: "BottomSheet"
124+
## End BottomSheet
121125
## BusyIndicator
122126
controls/busyindicator:
123127
title: "BusyIndicator"
@@ -727,6 +731,7 @@ intro_columns:
727731
title: "Navigation & Layouts"
728732
items:
729733
"Accordion": "accordion-overview"
734+
"BottomSheet": "bottomsheet-overview"
730735
"DockLayout": "docklayout-overview"
731736
"Expander": "expander-overview"
732737
"NavigationView": "navigationview-overview"

‎controls/accordion/animation.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ slug: accordion-animation
1010

1111
Telerik .NET MAUI Accordion provides an option to set the animation when expanding/collapsing an accordion item.
1212

13-
## Animation while expanding/collapsing
13+
## Animation while Expanding/Collapsing
1414

15-
To enable or disable the animation you need to use the `IsAnimationEnabled` property of `RadAccordion`. By default, the Animation is enabled.
15+
To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadAccordion`. By default, the Animation is enabled.
1616

1717
You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties.
1818

19-
* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is 500.
20-
* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is Easing.Linear.
19+
* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the `AccordionItem`. The default value is `500`.
20+
* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.Linear`.
2121

2222
## Example
2323

‎controls/bottomsheet/animation.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Animation
3+
page_title: .NET MAUI BottomSheet Documentation - Animation
4+
description: Learn how to configure animation settings for the Telerik BottomSheet for .NET MAUI, including duration, easing, and enable/disable options.
5+
position: 5
6+
slug: bottomsheet-animation
7+
---
8+
9+
# .NET MAUI BottomSheet Animation
10+
11+
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.
12+
13+
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.
14+
15+
The following properties control the animation behavior of the BottomSheet:
16+
17+
To enable or disable the animation, use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled.
18+
19+
You can also customize the animation's duration and easing by using the following properties.
20+
21+
* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000` milliseconds.
22+
* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.CubicOut`.
23+
24+
> For a runnable example with the BottomSheet Animation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
25+
26+
## See Also
27+
28+
- [Swipe Gesture]({%slug bottomsheet-swipe-gesture%})
29+
- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
30+
- [Style the BottomSheet]({%slug bottomsheet-styling%})
31+
- [Events]({%slug bottomsheet-events%})
32+
- [Methods]({%slug bottomsheet-methods%})

‎controls/bottomsheet/configuration.md

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
title: Configuration
3+
page_title: .NET MAUI BottomSheet Documentation - Configuration
4+
description: Learn more about how to configure the Telerik UI for .NET MAUI BottomSheet control.
5+
position: 3
6+
slug: bottomsheet-configuration
7+
---
8+
9+
# .NET MAUI BottomSheet Configuration
10+
11+
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.
12+
13+
## States
14+
15+
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.
16+
17+
### Predefined States
18+
19+
The control includes four built-in states with predefined heights:
20+
21+
* `Hidden` (default)—Represents a completely hidden bottom sheet.
22+
* `Minimal`—Represents a minimal bottom sheet state with height `25%`.
23+
* `Partial`—Represents a partial bottom sheet state with height `50%`.
24+
* `Full`—Represents a full bottom sheet state with height `90%`.
25+
26+
### Setting States
27+
28+
You can specify the current state using the `State` property of type `BottomSheetState`:
29+
30+
```xaml
31+
<telerik:RadBottomSheet x:Name="bottomSheet"
32+
State="Partial">
33+
<!-- Content -->
34+
</telerik:RadBottomSheet>
35+
```
36+
37+
### Custom States
38+
39+
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.
40+
41+
```xaml
42+
<telerik:RadBottomSheet AutoGenerateStates="False" />
43+
```
44+
45+
Create custom states using the `BottomSheetState` class constructors:
46+
47+
* Using `BottomSheetLength`
48+
49+
```csharp
50+
public BottomSheetState(string name, BottomSheetLength height)
51+
```
52+
53+
* Using `double` value
54+
55+
```csharp
56+
public BottomSheetState(string name, double size, bool isPercentage = false)
57+
```
58+
59+
Example of creating custom states:
60+
61+
```csharp
62+
// Custom state with 30% height
63+
var customState = new BottomSheetState("Custom", 30, true);
64+
65+
// Custom state with absolute height = 200
66+
var fixedState = new BottomSheetState("Fixed", 200, false);
67+
```
68+
69+
### Programmatic State Changes
70+
71+
Use the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}) to programmatically change states:
72+
73+
Here is an example setting the predefined name of the state inside the `GoToBottomSheetState(string name)` method:
74+
75+
<snippet id='open-bottomsheet-view' />
76+
77+
Here is an example setting a custom state:
78+
79+
```csharp
80+
// Navigate to custom states
81+
var customState = new BottomSheetState("Custom", 30, true);
82+
bottomSheet.GoToBottomSheetState("Custom");
83+
```
84+
85+
### States Collection
86+
87+
The BottomSheet provides a read-only `States` collection of type `ObservableCollection<BottomSheetState>` that contains all available states for the bottom sheet, including both predefined and custom states.
88+
89+
> For a runnable example with setting the BottomSheet States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
90+
91+
## Width
92+
93+
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:
94+
95+
```xaml
96+
<!-- Percentage width -->
97+
<telerik:RadBottomSheet BottomSheetContentWidth="80%">
98+
<!-- Content -->
99+
</telerik:RadBottomSheet>
100+
101+
<!-- Absolute width -->
102+
<telerik:RadBottomSheet BottomSheetContentWidth="300">
103+
<!-- Content -->
104+
</telerik:RadBottomSheet>
105+
```
106+
```csharp
107+
// Using percentage
108+
bottomSheet.BottomSheetContentWidth = new BottomSheetLength(80, true);
109+
110+
// Using absolute value
111+
bottomSheet.BottomSheetContentWidth = new BottomSheetLength(300, false);
112+
```
113+
114+
> For a runnable example with setting the BottomSheet Width, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
115+
116+
## Handle
117+
118+
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.
119+
120+
For more details, review the [BottomSheet Handle Styling]({%slug bottomsheet-styling%}#handle-styling) article.
121+
122+
## See Also
123+
124+
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
125+
- [Style the BottomSheet]({%slug bottomsheet-styling%})
126+
- [Events]({%slug bottomsheet-events%})
127+
- [Methods]({%slug bottomsheet-methods%})

‎controls/bottomsheet/content.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Content
3+
page_title: .NET MAUI BottomSheet Documentation - Content
4+
description: Learn more about how to set content inside the Telerik UI for .NET MAUI BottomSheet control.
5+
position: 3
6+
slug: bottomsheet-content
7+
---
8+
9+
# .NET MAUI BottomSheet Content
10+
11+
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.
12+
13+
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`.
14+
15+
**1.** Define the sample data model:
16+
17+
<snippet id='bottomsheet-data-model' />
18+
19+
**2.** Define the `ViewModel`:
20+
21+
<snippet id='bottomsheet-view-model' />
22+
23+
**3.** Define the BottomSheet in XAML with `RadCollectionView`:
24+
25+
<snippet id='bottomsheet-animation-swipe' />
26+
27+
**4.** Add the `telerik` namespace:
28+
29+
```XAML
30+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
31+
```
32+
33+
**5.** Add the following code for the `RadCollectionView.ItemTapped` event handler:
34+
35+
<snippet id='bottomsheet-content-tapped-event' />
36+
37+
This is the result on Android:
38+
39+
![.NET MAUI BottomSheet Content](images/bottomsheet-content.png)
40+
41+
> For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example.
42+
43+
## Setting Custom Control Template
44+
45+
> 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.
46+
47+
48+
Here is an example setting custom `ControlTemplate`.
49+
50+
<snippet id='bottomsheet-custom-control-template' />
51+
52+
This is the result on Android:
53+
54+
![.NET MAUI BottomSheet Control Template](images/bottomsheet-control-template.png)
55+
56+
## See Also
57+
58+
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
59+
- [Style the BottomSheet]({%slug bottomsheet-styling%})
60+
- [Events]({%slug bottomsheet-events%})
61+
- [Methods]({%slug bottomsheet-methods%})

‎controls/bottomsheet/events.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Events
3+
page_title: .NET MAUI BottomSheet Documentation - Events
4+
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.
5+
position: 9
6+
slug: bottomsheet-events
7+
---
8+
9+
# .NET MAUI BottomSheet Events
10+
11+
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.
12+
The `StateChanging` event handler receives two parameters:
13+
* The `sender` argument, which is of type `object`, but can be cast to the `RadBottomSheet` type.
14+
* The `BottomSheetStateChangingEventArgs` object, which has a reference to the new position of the bottom sheet through its `Position` property (of type `double`).
15+
16+
## See Also
17+
18+
- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
19+
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
20+
- [Style the BottomSheet]({%slug bottomsheet-styling%})
21+
- [Methods]({%slug bottomsheet-methods%})

‎controls/bottomsheet/getting-started.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Getting Started
3+
page_title: .NET MAUI BottomSheet Documentation - Getting Started
4+
description: Get started with the Telerik UI for .NET MAUI BottomSheet control and learn how to add the control to your .NET MAUI application.
5+
position: 2
6+
slug: bottomsheet-getting-started
7+
---
8+
9+
# Getting Started with the .NET MAUI BottomSheet
10+
11+
This guide provides the information you need to start using the Telerik UI for .NET MAUI BottomSheet by adding the control to your project.
12+
13+
At the end, you will achieve the following result.
14+
15+
![BottomSheet Getting Started](images/bottomsheet-getting-started.png)
16+
17+
## Prerequisites
18+
19+
Before adding the BottomSheet, you need to:
20+
21+
1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application).
22+
23+
1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui).
24+
25+
1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui).
26+
27+
## Define the Control
28+
29+
**1.** When your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page.
30+
31+
<snippet id='bottomsheet-getting-started-xaml' />
32+
<snippet id='bottomsheet-getting-started-csharp' />
33+
34+
**2.** Add the `telerik` namespace:
35+
36+
```XAML
37+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
38+
```
39+
```C#
40+
using Telerik.Maui.Controls;
41+
```
42+
43+
**3.** Add the code for opening the BottomSheet view:
44+
45+
<snippet id='open-bottomsheet-view' />
46+
47+
**4.** Add the code for closing the BottomSheet view:
48+
49+
<snippet id='close-bottomsheet-view' />
50+
51+
**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:
52+
53+
```C#
54+
using Telerik.Maui.Controls.Compatibility;
55+
56+
public static class MauiProgram
57+
{
58+
public static MauiApp CreateMauiApp()
59+
{
60+
var builder = MauiApp.CreateBuilder();
61+
builder
62+
.UseTelerik()
63+
.UseMauiApp<App>()
64+
.ConfigureFonts(fonts =>
65+
{
66+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
67+
});
68+
69+
return builder.Build();
70+
}
71+
}
72+
```
73+
74+
> For a runnable example with the BottomSheet Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Getting Started**.
75+
76+
## Additional Resources
77+
78+
- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet)
79+
- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763)
80+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
81+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
82+
83+
## See Also
84+
85+
- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
86+
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
87+
- [Style the BottomSheet]({%slug bottomsheet-styling%})
88+
- [Events]({%slug bottomsheet-events%})
89+
- [Methods]({%slug bottomsheet-methods%})

‎controls/bottomsheet/images/bottomsheet-content.png

38.4 KB
Loading

‎controls/bottomsheet/images/bottomsheet-control-template.png

20.1 KB
Loading

‎controls/bottomsheet/images/bottomsheet-handle-styling.png

49.6 KB
Loading

0 commit comments

Comments
 (0)