Get Started with DevExpress Bottom Sheet for .NET MAUI

• Jul 25, 2024
• 3 minutes to read

This topic explains how to integrate the BottomSheet component into a .NET MAUI cross-platform solution.

Watch Video: Get Started with the Bottom Sheet Control for .NET MAUI

Prerequisites

Refer to the following pages before you proceed with this Getting Started lesson:

• Microsoft .NET Multi-platform App UI documentation
• .NET MAUI and DevExpress Mobile UI Supported Platforms
• Requirements for .NET MAUI and DevExpress Mobile UI
• Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Create a New Project

Create a new .NET MAUI project in Visual Studio. If you use the DevExpress project templates, note that this project already comes pre-configured, with the required NuGet packages, initialized components, and its XAML namespaces are declared on all predefined pages.

If you use the standard .NET MAUI project template, you should install the following NuGet packages from the DevExpress NuGet Gallery:

• DevExpress.Maui.Controls—contains the BottomSheet component.

In the MauiProgram.cs file, call DevExpress.Maui.UseDevExpress and UseDevExpressControls methods to initialize the BottomSheet component.

C#

using DevExpress.Maui;
using DevExpress.Maui.Controls;

namespace mauiTemplate;

public static class MauiProgram {
    public static MauiApp CreateMauiApp() => MauiApp
        .CreateBuilder()
        .UseDevExpressControls()
        .UseMauiApp<App>()
        // This method adds handlers for all DevExpress components.
        .UseDevExpress()
        /* You can also use the code below to add the Bottom Sheet handler.
        .ConfigureMauiHandlers(handlers => {
            handlers.AddHandler<BottomSheet, BottomSheetHandler>();
        })
        */
        .Build();
}

See the following help topic for more information: Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI).

Add a Bottom Sheet to the Main Page

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

The following image shows the results:

Note: Errors may occur if you add a Button object to a Bottom Sheet. We recommend that you use a DXButton instead. Another option is a Label with a TapGestureRecognizer. See also: Java.Lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponent