.NET Maui Apps | How to use Bottom Sheet popup to display information in MAUI Mobile applications.

Introduction

This tutorial guides you through using Bottom Sheet popups in .NET MAUI applications to display information effectively. Bottom Sheets are useful for presenting additional details without navigating away from the current screen, enhancing user experience in mobile applications.

Step 1: Setting Up Your MAUI Project

1. Create a new .NET MAUI project:

   • Open your preferred IDE (e.g., Visual Studio).
   • Choose "Create a new project."
   • Select ".NET MAUI App" from the project templates and configure your project settings.

2. Install necessary NuGet packages:

   • Open the NuGet Package Manager.
   • Search for "CommunityToolkit.Maui" and install it. This package includes useful UI components, including Bottom Sheets.

Step 2: Implementing the Bottom Sheet

1. Create a Bottom Sheet class:

   • Add a new class file named BottomSheet.xaml in your project.
   • Define the layout of the Bottom Sheet in XAML. Here’s a basic example:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="YourNamespace.BottomSheet">
       <StackLayout Padding="20">
           <Label Text="Information" FontSize="20" />
           <Label Text="This is a sample Bottom Sheet." />
           <Button Text="Close" Clicked="OnCloseButtonClicked" />
       </StackLayout>
   </ContentPage>
   

2. Handle the close button:

   • In the code-behind file (BottomSheet.xaml.cs), implement the close functionality:

   private void OnCloseButtonClicked(object sender, EventArgs e)
   {
       this.IsVisible = false; // Or use any method to hide the Bottom Sheet.
   }
   

Step 3: Displaying the Bottom Sheet from the Main Page

1. Modify your Main Page:

   • In your main page, add a button to trigger the Bottom Sheet:

   <Button Text="Show Bottom Sheet" Clicked="OnShowBottomSheetClicked" />
   

2. Implement the button click event:

   • In the code-behind for your main page, create a new instance of the Bottom Sheet and display it:

   private async void OnShowBottomSheetClicked(object sender, EventArgs e)
   {
       var bottomSheet = new BottomSheet();
       await bottomSheet.ShowAsync(); // Use the appropriate method to show the Bottom Sheet.
   }
   

Step 4: Testing Your Application

1. Run the application:

   • Deploy your app on a simulator or a physical device.
   • Click the "Show Bottom Sheet" button to test the popup functionality.

2. Verify user experience:

   • Ensure the Bottom Sheet appears smoothly and can be dismissed effectively.

Conclusion

In this tutorial, you learned how to implement a Bottom Sheet popup in your .NET MAUI application. This feature enhances the user interface by providing additional information without navigating away from the main screen. For further enhancements, consider customizing the Bottom Sheet's appearance or adding more interactive elements. Explore additional resources and community support to continue improving your coding skills in .NET MAUI.