How to implement navigation using the .NET MAUI Bottom Sheet (SfBottomSheet)?
This article demonstrates how to implement navigation using the Syncfusion® .NET MAUI Bottom Sheet in a .NET MAUI application. We’ll also walk through how to display a list of books, use the bottom sheet for book details, and navigate to a separate page for the user’s favorite books.
Step 1: Setting up the MainPage.xaml
Start by creating the MainPage.xaml, which contains a list of books and the bottom sheet for displaying book details. The page also includes a Favorites button in the toolbar for navigating to a new page that shows the list of favorite books.
<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"
xmlns:listview="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
xmlns:local="clr-namespace:BottomSheetSample"
x:Class="BottomSheetSample.MainPage">
<ContentPage.BindingContext>
<local:BookViewModel/>
</ContentPage.BindingContext>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Favorites" Clicked="OnFavoritesClicked" />
</ContentPage.ToolbarItems>
<Grid>
<listview:SfListView ItemsSource="{Binding Books}" SelectionMode="None" AutoFitMode="DynamicHeight">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<VerticalStackLayout Padding="10">
<Label Text="{Binding Title}" FontSize="20" FontAttributes="Bold">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="BookTitleTapped"/>
</Label.GestureRecognizers>
</Label>
<Label Text="{Binding Description}" FontSize="14"
TextColor="Gray"/>
</VerticalStackLayout>
</ViewCell>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
<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>
<Button Text="Add to Favorites" Clicked="AddToFavoritesClicked" Margin="0,10,0,0"/>
</VerticalStackLayout>
</bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>
</Grid>
</ContentPage>
Step 2: Handling Book Item Selection and Bottom Sheet Behavior in MainPage.xaml.cs
Handle the interaction when a user taps on a book title, showing the bottom sheet with the book details. We’ll also implement functionality to add books to the user’s favorites.
public partial class MainPage : ContentPage
{
private Book? selectedBook;
public MainPage()
{
InitializeComponent();
}
private void BookTitleTapped(object sender, TappedEventArgs e)
{
// Retrieve the tapped book item and display it in the bottom sheet
if (sender is Label label && label.BindingContext is Book book)
{
selectedBook = book;
bottomSheetContent.BindingContext = book; // Bind the book to the bottom sheet content
bottomSheet.Show(); // Show the bottom sheet
}
}
private void AddToFavoritesClicked(object sender, EventArgs e)
{
// Add the selected book to the favorites list
if (selectedBook != null && !BookFavorites.FavoriteBooks.Contains(selectedBook))
{
BookFavorites.FavoriteBooks.Add(selectedBook);
DisplayAlert("Success", "Book added to favorites!", "OK");
}
}
private async void OnFavoritesClicked(object sender, EventArgs e)
{
// Navigate to the FavoritesPage
await Navigation.PushAsync(new FavoritesPage());
}
}
BookTitleTapped: This method is triggered when a book title is tapped in the ListView. It retrieves the Book object from the BindingContext of the tapped label and displays the book’s details in the bottom sheet.
AddToFavoritesClicked: This method is triggered when the "Add to Favorites" button is clicked in the bottom sheet. It checks if the book is already in the favorite list before adding it.
OnFavoritesClicked: This method is triggered when the user taps the Favorites button in the toolbar. It navigates to the FavoritesPage to display a list of favorite books.
Step 3: Managing Favorite Books
Create a class to manage the favorite books in the application. This class will store the list of books that the user has marked as favorites.
public static class BookFavorites
{
public static List<Book> FavoriteBooks { get; } = new List<Book>();
}
Step 4: Creating the FavoritesPage.xaml
Create a page to display the list of favorite books. This page will use a Syncfusion® .NET MAUI ListView to show the books that have been added to the favorites.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
. . .>
<listview:SfListView ItemsSource="{Binding FavoriteBooks}" SelectionMode="None">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Border>
<VerticalStackLayout>
<Label Text="{Binding Title}" FontAttributes="Bold" FontSize="20"/>
<Label Text="{Binding Description}" FontSize="14" TextColor="Gray"/>
</VerticalStackLayout>
</Border>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</ContentPage>
Step 5: Binding Data in FavoritesPage.xaml.cs
The FavoritesPage displays a list of favorite books by binding its UI to the FavoriteBooks property, which gets data from the shared BookFavorites class.
public partial class FavoritesPage : ContentPage
{
public List<Book> FavoriteBooks { get; set; }
public FavoritesPage()
{
InitializeComponent();
FavoriteBooks = BookFavorites.FavoriteBooks;
BindingContext = this;
}
}
Output:
When the user taps on a book title in the main page, the bottom sheet will display the book’s details along with an "Add to Favorites" button. Once a book is added to favorites, it will appear in the FavoritesPage when the user taps on the Favorites button in the toolbar.
Download the complete sample from GitHub.
Conclusion
I hope you enjoyed learning how to implement navigation using the .NET MAUI Bottom Sheet (SfBottomSheet).
Learn about its other groundbreaking feature representations on our .NET MAUI Bottom Sheet feature tour page.
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!
