How to create a .NET MAUI Bottom Sheet (SfBottomSheet)?

This article demonstrates how to create a Syncfusion® .NET MAUI Bottom Sheet in a .NET MAUI application and display content using book details as an example. It presents a list of books and their descriptions. Tapping on any book will display its respective details.

Step 1: Install the Syncfusion.Maui.Toolkit NuGet package, add the namespace for the Bottom Sheet, and then initialize the .NET MAUI Bottom Sheet control.

XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:bottomSheet="clr-namespace:Syncfusion.Maui.Toolkit.BottomSheet;assembly=Syncfusion.Maui.Toolkit"
             x:Class="BottomSheet.MainPage">

    <bottomSheet:SfBottomSheet x:Name="bottomSheet">
    </bottomSheet:SfBottomSheet>

</ContentPage>

Step 2: Populate the data in the ViewModel.

C#

public class Book
{
    public string? Title {  get; set; }
    public string? Genre { get; set; }
    public string? Published { get; set; }
    public string? Description { get; set; }
    public decimal Price { get; set; }
}

public class BookViewModel
{
    public ObservableCollection<Book>? Books { get; set; }
    public BookViewModel()
    {
        Books = new ObservableCollection<Book>
        {
            new Book
            {
                Title = "Object-Oriented Programming in C#",
                Genre = "Programming, Software Development",
                Published = "July 2023",
                Description = "Object-oriented programming is a programming paradigm based on the concept of objects",
                Price = 49.99m
            },
            new Book
            {
                Title = "C# Code Contracts",
                Genre = "Programming",
                Published = "March 2019",
                Description = "Code Contracts provide a way to convey code assumptions",
                Price = 39.99m
            },
           .   .   .
        };
    }
}

Step 3: Bind the data
Bind the Books collection to the ItemsSource property of the ListView and bind the Title and Description properties to the corresponding UI elements within the item template.

XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             .  .  .>
             
    <ContentPage.BindingContext>
         <local:BookViewModel/>
    </ContentPage.BindingContext>
        
     <Grid>
         <ListView ItemsSource="{Binding Books}" HasUnevenRows="True" ItemTapped="ListViewItemTapped">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <ViewCell>
                         <VerticalStackLayout Padding="10">
                             <Label Text="{Binding Title}" FontSize="20" FontAttributes="Bold"/>
                             <Label Text="{Binding Description}" FontSize="14" TextColor="Gray"/>
                         </VerticalStackLayout>
                     </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
    </Grid>
    
</ContentPage>

Step 4: Implement Tap Event to Trigger Bottom Sheet
Set the tapped book item as the data context for the bottom sheet and display it in a half-expanded state.

C#

private void ListViewItemTapped(object sender, ItemTappedEventArgs e)
{
   bottomSheetContent.BindingContext = e.Item;
   bottomSheet.State = BottomSheetState.HalfExpanded;
   bottomSheet.Show();
} 

Step 5: Create a Structured View for Book Details
The bottom sheet displays detailed information about the selected book, including its title, genre, publication date, description, and price within the BottomSheetContent property.

XAML:

<bottomSheet:SfBottomSheet x:Name="bottomSheet">
    <bottomSheet:SfBottomSheet.BottomSheetContent>
        <VerticalStackLayout x:Name="bottomSheetContent" Spacing="5">
            <Grid ColumnDefinitions="120,*" ColumnSpacing="10">
                <Label Text="Title:" FontSize="18" FontAttributes="Bold"/>
                <Label Text="{Binding Title}" FontSize="18" 
                       VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Genre:" FontSize="18" FontAttributes="Bold"/>
                <Label Text="{Binding Genre}" FontSize="18" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Published:" FontSize="18" FontAttributes="Bold"/>
                <Label Text="{Binding Published}" FontSize="18" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Description:" FontSize="18" FontAttributes="Bold"/>
                <Label Text="{Binding Description}" FontSize="18" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120,*" ColumnSpacing="10">
                <Label Text="Price:" FontSize="18" FontAttributes="Bold"/>
                <Label FontSize="18" VerticalTextAlignment="Center" Grid.Column ="1">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="$" FontAttributes="Bold"/>
                            <Span Text="{Binding Price, StringFormat='{0:F2}'}"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid> 
        </VerticalStackLayout>
    </bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to create a .NET MAUI Bottom Sheet (SfBottomSheet).

Refer to our .NET MAUI Bottom Sheet feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Bottom Sheet documentation to understand how to present and manipulate data.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us by creating a support ticket. We are always happy to assist you!