How to Adjust the Height of the .NET MAUI Bottom Sheet?

This article explains how to adjust the height of the Syncfusion® .NET MAUI Bottom Sheet control using various configuration properties directly in the XAML file of your .NET MAUI application.
The height of the bottom sheet can be customized using the following properties:

• FullExpandedRatio – Defines the height ratio of the bottom sheet when in the Fully Expanded state. A value between 0.1 and 1 can be set to limit its maximum height.

• HalfExpandedRatio – Sets the height ratio of the bottom sheet when in the Half Expanded state. You can specify a value between 0.1 and 0.9 to control its mid-level height.

• CollapsedHeight – Specifies the height of the Bottom Sheet when it is in the Collapsed state. The default value is 100.

Each of these properties allows you to customize the height of the bottom sheet in different states: FullExpanded, HalfExpanded, and Collapsed.

XAML:

<bottomSheet:SfBottomSheet x:Name="bottomSheet" FullExpandedRatio="0.8" ContentPadding="10" State="FullExpanded">
    <bottomSheet:SfBottomSheet.BottomSheetContent>
     .   .   .
    </bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>

Output:

XAML:

<bottomSheet:SfBottomSheet x:Name="bottomSheet" HalfExpandedRatio="0.4" ContentPadding="10" State="HalfExpanded">
    <bottomSheet:SfBottomSheet.BottomSheetContent>
     .   .   .
    </bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>

Output:

XAML:

<bottomSheet:SfBottomSheet x:Name="bottomSheet" State="Collapsed" CollapsedHeight="150" ContentPadding="10">
    <bottomSheet:SfBottomSheet.BottomSheetContent>
     .   .   .
    </bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>

Output:

Download the complete sample on GitHub

Conclusion

Hope you enjoyed learning how to adjust the height of the .NET MAUI Bottom Sheet (SfBottomSheet).

Refer to our .NET MAUI Bottom Sheet feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Bottom Sheet documentation to understand how to present and manipulate data.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us by creating a support ticket. We are always happy to assist you!