Set Main Content and Bottom Sheet Content in .NET MAUI Bottom Sheet

21 May 20256 minutes to read

  • The main content of the Bottom Sheet is always visible and can be set using the Content property.

  • The Bottom Sheet content is viewable only when the sheet is in the FullExpanded, HalfExpanded, or Collapsed state. Its content can be set using the BottomSheetContent property.

<bottomSheet:SfBottomSheet x:Name="bottomSheet" HalfExpandedRatio="0.35" ContentPadding="10">
    <bottomSheet:SfBottomSheet.BottomSheetContent>
        <VerticalStackLayout Spacing="5" x:Name="bottomSheetContent">
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Title:" FontSize="20" FontAttributes="Bold"/>
                <Label Text="{Binding Title}" FontSize="16" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Genre:" FontSize="20" FontAttributes="Bold"/>
                <Label Text="{Binding Genre}" FontSize="16" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Published:" FontSize="20" FontAttributes="Bold"/>
                <Label Text="{Binding Published}" FontSize="16" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Description:" FontSize="20" FontAttributes="Bold"/>
                <Label Text="{Binding Description}" FontSize="16" VerticalTextAlignment="Center" Grid.Column="1"/>
            </Grid>
            <Grid ColumnDefinitions="120, *" ColumnSpacing="10">
                <Label Text="Price:" FontSize="20" FontAttributes="Bold"/>
                <Label FontSize="16" 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>
SfBottomSheet bottomSheet = new SfBottomSheet
{
    HalfExpandedRatio = 0.35,
    ContentPadding = new Thickness(10)
};

var bottomSheetContent = new VerticalStackLayout { Spacing = 5 };

void AddRow(string labelText, string bindingPath, string? stringFormat = null)
{
    var rowGrid = new Grid
    {
        ColumnDefinitions =
        {
            new ColumnDefinition { Width = 120 },
            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
        },
        ColumnSpacing = 10
    };

    var label = new Label
    {
        Text = labelText,
        FontSize = 20,
        FontAttributes = FontAttributes.Bold
    };

    var valueLabel = new Label
    {
        FontSize = 16,
        VerticalTextAlignment = TextAlignment.Center
    };

    if (stringFormat != null)
    {
        valueLabel.SetBinding(Label.TextProperty, new Binding(bindingPath, stringFormat: stringFormat));
    }
    else
    {
        valueLabel.SetBinding(Label.TextProperty, bindingPath);
    }

    rowGrid.Children.Add(label);
    rowGrid.SetColumn(label, 0);
    rowGrid.Children.Add(valueLabel);
    rowGrid.SetColumn(valueLabel, 1);

    bottomSheetContent.Children.Add(rowGrid);
}

AddRow("Title:", "Title");
AddRow("Genre:", "Genre");
AddRow("Published:", "Published");
AddRow("Description:", "Description");
AddRow("Price:", "Price", "${0:F2}");

bottomSheet.BottomSheetContent = bottomSheetContent;
private void OnListViewItemTapped(object? sender, ItemTappedEventArgs e)
{
    bottomSheet.BottomSheetContent.BindingContext = e.Item;
    bottomSheet.Show();
}

BottomSheetContent for Bottom Sheet