Getting Started with the .NET MAUI BottomSheet

This guide provides the information you need to start using the Telerik UI for .NET MAUI BottomSheet by adding the control to your project.

At the end, you will achieve the following result.

Prerequisites

Before adding the BottomSheet, you need to:

1. Set up your .NET MAUI application.

2. Download Telerik UI for .NET MAUI.

3. Install Telerik UI for .NET MAUI.

Define the Control

1. When your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page.

xaml

<telerik:RadBottomSheet x:Name="bottomSheet">
	<telerik:RadBottomSheet.Content>
		<HorizontalStackLayout>
			<telerik:RadTemplatedButton Content="Open BottomSheet Content" 
										Clicked="OnOpenClicked"/>
			<telerik:RadTemplatedButton Content="Close BottomSheet Content" 
										Clicked="OnCloseClicked"/>
		</HorizontalStackLayout>
	</telerik:RadBottomSheet.Content>
	<telerik:RadBottomSheet.BottomSheetContent>
		<Label Text="BottomSheet Content"
			   VerticalOptions="Start"
			   HorizontalOptions="Center" />
	</telerik:RadBottomSheet.BottomSheetContent>
</telerik:RadBottomSheet>

c#

var stack = new HorizontalStackLayout
{
	Spacing = 5,
	VerticalOptions = LayoutOptions.Start
};

var openButton = new RadTemplatedButton
{
	Content = "Open BottomSheet Content",
};

var closeButton = new RadTemplatedButton
{
	Content = "Close BottomSheet Content",
};

openButton.Clicked += OnOpenClicked;
closeButton.Clicked += OnCloseClicked;

stack.Children.Add(openButton);
stack.Children.Add(closeButton);

this.bottomSheet.Content = stack;

var label2 = new Label
{
	Text = "BottomSheet Content",
	VerticalOptions = LayoutOptions.Start,
	HorizontalOptions = LayoutOptions.Center
};

this.bottomSheet.BottomSheetContent = label2;

2. Add the telerik namespace:

XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

C#

using Telerik.Maui.Controls;

3. Add the code for opening the BottomSheet view:

c#

private void OnOpenClicked(object sender, System.EventArgs e)
{
	this.bottomSheet.GoToBottomSheetState(BottomSheetState.PartialStateName);
}

4. Add the code for closing the BottomSheet view:

c#

private void OnCloseClicked(object sender, System.EventArgs e)
{
	this.bottomSheet.GoToBottomSheetState(BottomSheetState.HiddenStateName);
}

5. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:

C#

using Telerik.Maui.Controls.Compatibility;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseTelerik()
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
			});

		return builder.Build();
	}
}

For a runnable example with the BottomSheet Getting Started scenario, see the SDKBrowser Demo Application and go to BottomSheet > Getting Started.

Additional Resources

• .NET MAUI BottomSheet Product Page
• .NET MAUI BottomSheet Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap

See Also

• Configure the BottomSheet
• Animation when opening and closing the bottom sheet
• Style the BottomSheet
• Events
• Methods