BottomSheet.State Property

Gets or sets the Bottom Sheet state. This is a bindable property.

Namespace: DevExpress.Maui.Controls

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

Declaration

public BottomSheetState State { get; set; }

Property Value

Type	Default	Description
BottomSheetState	Hidden	A value that specifies the Bottom Sheet state.

Available values:

Name	Description
FullExpanded	The bottom sheet is maximized to full screen.
HalfExpanded	The bottom sheet occupies a part of the screen. The BottomSheet.HalfExpandedRatio property defines the height of the bottom screen.
Hidden	The bottom sheet is hidden.

Remarks

The following example shows an action sheet when a user swipes up the page:

XAML

<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>

C#

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) {
        //...
    }
}

You can handle the BottomSheet.StateChanged event to respond to state changes.

Use the BottomSheet.AllowedState property to restrain the available states of a bottom sheet. Note that AllowedState has priority over the State property. For example, if the HalfExpanded state is not permitted, a user cannot collapse the bottom sheet from a full-expanded state to a half-expanded state, even if the State property is set to HalfExpanded.