DevExpress Bottom Sheet for .NET MAUI
- 2 minutes to read
The BottomSheet control is a view that slides out from the bottom of the screen and shows an action list or other supplemental content.
#Bottom Sheet Elements (Anatomy)
The following figure shows the basic elements of a bottom sheet:
#Add a Bottom Sheet to the Page
Before you proceed, read the following topics:
- Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)
- Get Started with DevExpress Bottom Sheet for .NET MAUI
The following example shows an action sheet when a user swipes up the page:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BottomSheetSample"
xmlns:dx="http://schemas.devexpress.com/maui"
x:Class="BottomSheetSample.MainPage" Shell.TabBarIsVisible="False">
<ContentPage.Resources>
<Style TargetType="dx:DXButton" x:Key="buttonStyle">
<Setter Property="BackgroundColor" Value="{x:Null}" />
<Setter Property="IconColor" Value="Gray" />
<Setter Property="TextColor" Value="Gray" />
<Setter Property="HorizontalContentAlignment" Value="Start"/>
</Style>
</ContentPage.Resources>
<VerticalStackLayout>
<VerticalStackLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Up" Swiped="SwipeGestureRecognizer_Swiped"/>
</VerticalStackLayout.GestureRecognizers>
<dx:BottomSheet x:Name="bottomSheet"
CornerRadius="30"
BackgroundColor="White"
HalfExpandedRatio="0.3"
AllowDismiss="True"
ShowGrabber="True"
IsModal="True">
<!--#region BottomSheetContent-->
<VerticalStackLayout Padding="4,20,4,4">
<dx:DXButton Content="Share" Icon="share" Style="{x:StaticResource buttonStyle}" Clicked="Button_Clicked"/>
<dx:DXButton Content="Get link" Icon="hyperlink" Style="{x:StaticResource buttonStyle}" Clicked="Button_Clicked"/>
<dx:DXButton Content="Edit name" Icon="pencil" Style="{x:StaticResource buttonStyle}" Clicked="Button_Clicked"/>
</VerticalStackLayout>
<!--#endregion-->
</dx:BottomSheet>
</VerticalStackLayout>
</ContentPage>
using DevExpress.Maui.Controls;
namespace BottomSheetSample;
public partial class MainPage : ContentPage {
public MainPage() {
InitializeComponent();
}
private void SwipeGestureRecognizer_Swiped(object sender, SwipedEventArgs e) {
bottomSheet.State = BottomSheetState.HalfExpanded;
}
private void Button_Clicked(object sender, EventArgs e) {
//...
}
}
#Next Steps
- Get Started
- This step-by-step tutorial guides you through creating an app with a BottomSheet.
- States and Modality
- Describes how to manage different states of the BottomSheet control.
- Custom Appearance
- Explains how to customize BottomSheet appearance.
- Examples
- Lists task-based solutions with the BottomSheet control.