New to Telerik UI for .NET MAUI? Start a free 30-day trial
.NET MAUI BottomSheet Content
The BottomSheet control has two distinct content areas: the main content that serves as the background layer, and the bottom sheet content that slides up to overlay additional information or functionality. You set the main content as the primary child of the control, while the BottomSheetContent (View) property defines what appears in the sliding panel.
Here is a sample scenario when using the Telerik .NET MAUI RadCollectionView in the main content of the BottomSheet and a detailed view in the BottomSheetContent.
1. Define the sample data model:
c#
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Country { get; set; }
public int CompanyID { get; set; }
public string Department { get; set; }
public string Position { get; set; }
public DateTime Joined { get; set; }
}2. Define the ViewModel:
c#
public class ViewModel
{
public ViewModel()
{
this.People = new ObservableCollection<Person>()
{
new Person { Name = "Michel", Age = 23, Department = "Human Resources", Country = "Mexico", CompanyID = 23213, Position = "Junior Recruiter", Joined = new DateTime(2024, 10, 21) },
new Person { Name = "Jerry", Age = 23, Department = "Finance", Country = "USA", CompanyID = 7667, Position = "Financial Analyst", Joined = new DateTime(2024, 06, 12) },
new Person { Name = "Ethan", Age = 51, Department = "Marketing", Country = "Australia", CompanyID = 75676, Position = "Manager SEO", Joined = new DateTime(2002, 05, 01) },
new Person { Name = "Isabella", Age = 25, Department = "Marketing", Country = "Argentina", CompanyID = 9789, Position = "Regular Marketing specialist", Joined = new DateTime(2023, 11, 11) },
new Person { Name = "Joshua", Age = 45, Department = "Software Development", Country = "USA", CompanyID = 867, Position = "Manager Software Engineering", Joined = new DateTime(2021, 11, 11) },
new Person { Name = "Logan", Age = 26, Department = "Human Resources", Country = "UK", CompanyID = 3123, Position = "HR Representative", Joined = new DateTime(2024, 10, 12) },
new Person { Name = "Anthony", Age = 40, Department = "Innovations", Country = "Belgium", CompanyID = 645, Position = "AI Researcher Scientist", Joined = new DateTime(2023, 12, 21) },
new Person { Name = "Jack", Age = 21, Department = "Customer Service", Country = "USA", CompanyID = 7858, Position = "Developer Support Engineer", Joined = new DateTime(2025, 03, 11) },
new Person { Name = "Aaron", Age = 32, Department = "Software Development", Country = "USA", CompanyID = 314, Position = "Full Stack Developer", Joined = new DateTime(2023, 02, 12) },
new Person { Name = "Elena", Age = 37, Department = "Finance", Country = "France", CompanyID = 6757, Position = "Accountant", Joined = new DateTime(2024, 10, 21) },
new Person { Name = "Ross", Age = 29, Department = "Marketing", Country = "Spain", CompanyID = 546547, Position = "Marketing Manager", Joined = new DateTime(2022, 07, 12) },
new Person { Name = "Jane", Age = 46, Department = "Innovations", Country = "UK", CompanyID = 3187, Position = "AI Developer", Joined = new DateTime(2000, 06, 21) },
new Person { Name = "John", Age = 37, Department = "Customer Service", Country = "Australia", CompanyID = 646, Position = "Support Officer", Joined = new DateTime(2024, 03, 11) },
};
}
public ObservableCollection<Person> People { get; set; }
}3. Define the BottomSheet in XAML with RadCollectionView:
xaml
<telerik:RadBottomSheet x:Name="bottomSheet"
Margin="0, 20, 0, 0"
Grid.Row="1">
<telerik:RadBottomSheet.Content>
<telerik:RadCollectionView ItemsSource="{Binding People}"
SelectionChanged="OnSelectionChanged"
x:Name="peopleCollectionView">
<telerik:RadCollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto, Auto"
Padding="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadCollectionViewItemView}}, Path=ActualPadding}"
RowSpacing="3">
<HorizontalStackLayout>
<Label Text="Name: " />
<Label Text="{Binding Name}" />
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Row="1">
<Label Text="Position: " />
<Label Text="{Binding Position}" />
</HorizontalStackLayout>
</Grid>
</DataTemplate>
</telerik:RadCollectionView.ItemTemplate>
<telerik:RadCollectionView.ItemsLayout>
<telerik:CollectionViewLinearLayout ItemSpacing="6" />
</telerik:RadCollectionView.ItemsLayout>
</telerik:RadCollectionView>
</telerik:RadBottomSheet.Content>
<telerik:RadBottomSheet.BottomSheetContent>
<Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto"
Margin="20,0,0,0"
ColumnDefinitions="100, *"
RowSpacing="8">
<Label Text="Country: "
FontAttributes="Bold" />
<Label Text="{Binding Country}"
Grid.Column="1" />
<Label Text="Age: "
FontAttributes="Bold"
Grid.Row="1" />
<Label Text="{Binding Age}"
Grid.Row="1"
Grid.Column="1" />
<Label Text="Department: "
FontAttributes="Bold"
Grid.Row="2" />
<Label Text="{Binding Department}"
Grid.Row="2"
Grid.Column="1" />
<Label Text="Company Id: "
FontAttributes="Bold"
Grid.Row="3" />
<Label Text="{Binding CompanyID}"
Grid.Row="3"
Grid.Column="1" />
<Label Text="Hired: "
FontAttributes="Bold"
Grid.Row="4" />
<Label Text="{Binding Joined}"
Grid.Row="4"
Grid.Column="1" />
</Grid>
</telerik:RadBottomSheet.BottomSheetContent>
</telerik:RadBottomSheet>4. Add the telerik namespace:
XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"5. Add the following code for the RadCollectionView.ItemTapped event handler:
c#
private void OnSelectionChanged(object sender, Telerik.Maui.RadSelectionChangedEventArgs e)
{
this.bottomSheet.BottomSheetContent.BindingContext = e.AddedItems.First();
this.bottomSheet.GoToBottomSheetState(BottomSheetState.PartialStateName);
}This is the result on Android:
For a runnable example with the BottomSheet Content scenario, see the SDKBrowser Demo Application and review all BottomSheet example.