.NET MAUI BottomSheet States and Modality
- 2 minutes to read
If you want to specify the expanded state of the BottomSheet control (FullExpanded, HalfExpanded, or Hidden), use the State property. To limit possible states, specify the AllowedState property. For example, you can select the All option to allow both HalfExpanded and FullExpanded states, or allow only one of them.
You can specify the bottom sheet height when it is in the Half-Expanded state. For this purpose, define the HalfExpandedRatio property.
| HalfExpandedRatio = 0.3 | HalfExpandedRatio = 0.7 |
|---|---|
 |
 |
Visibility and Dismissal
Users can expand and collapse the BottomSheet control (“swipe up” and “swipe down” gestures). To disable the “swipe down” gesture, use the AllowDismiss property. A user can also tap outside the control to hide it (the State property value changes to Hidden).
Use the Show(BottomSheetState, Element) method to expand the bottom sheet, and Close(Action) or CloseAsync() methods to collapse it.
Modal Mode
If you enable the IsModal property, the Bottom Sheet acts as a dialog page. It blocks the rest of the app UI until dismissed by a user. Note that runtime changes to the IsModal property have no effect on bottom sheet behavior.
You can enable the ShowGrabber property to show the drag handle.
Limitations
You cannot change the scrim color due to native component specifics.
iOS platform: the HalfExpandedRatio property value is in effect for iOS 16 and later. In earlier versions, the
HalfExpandedRatiovalue is always 0.5.