Class SfBottomSheet
Represents the SfBottomSheet control that displays from the bottom of the screen.
Implements
Namespace: Syncfusion.Maui.Toolkit.BottomSheet
Assembly: Syncfusion.Maui.Toolkit.dll
Syntax
public class SfBottomSheet : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IParentThemeElement, IThemeElement
Constructors
SfBottomSheet()
Initializes a new instance of the SfBottomSheet class.
Declaration
public SfBottomSheet()
Fields
AllowedStateProperty
Identifies the AllowedState bindable property.
Declaration
public static readonly BindableProperty AllowedStateProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for AllowedState bindable property. |
BackgroundProperty
Identifies the Background bindable property.
Declaration
public static readonly BindableProperty BackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for Background bindable property. |
BottomSheetContentProperty
Identifies the BottomSheetContent bindable property.
Declaration
public static readonly BindableProperty BottomSheetContentProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for BottomSheetContent bindable property. |
BottomSheetContentWidthProperty
Identifies the BottomSheetContentWidth bindable property.
Declaration
public static readonly BindableProperty BottomSheetContentWidthProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for BottomSheetContentWidth bindable property. |
CollapsedHeightProperty
Identifies the CollapsedHeight bindable property.
Declaration
public static readonly BindableProperty CollapsedHeightProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for CollapsedHeight bindable property. |
CollapseOnOverlayTapProperty
Identifies the CollapseOnOverlayTap bindable property.
Declaration
public static readonly BindableProperty CollapseOnOverlayTapProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for CollapseOnOverlayTap bindable property. |
ContentPaddingProperty
Identifies the ContentPadding bindable property.
Declaration
public static readonly BindableProperty ContentPaddingProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ContentPadding bindable property. |
ContentProperty
Identifies the Content bindable property.
Declaration
public static readonly BindableProperty ContentProperty
Field Value
Type |
---|
Microsoft.Maui.Controls.BindableProperty |
Remarks
It is mandatory to set the Content property for the SfBottomSheet when initializing.
ContentWidthModeProperty
Identifies the ContentWidthMode bindable property.
Declaration
public static readonly BindableProperty ContentWidthModeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ContentWidthMode bindable property. |
CornerRadiusProperty
Identifies the CornerRadius bindable property.
Declaration
public static readonly BindableProperty CornerRadiusProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for CornerRadius bindable property. |
EnableSwipingProperty
Identifies the EnableSwiping bindable property.
Declaration
public static readonly BindableProperty EnableSwipingProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for EnableSwiping bindable property. |
FullExpandedRatioProperty
Identifies the FullExpandedRatio bindable property.
Declaration
public static readonly BindableProperty FullExpandedRatioProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for FullExpandedRatio bindable property. |
GrabberAreaHeightProperty
Identifies the GrabberAreaHeight bindable property.
Declaration
public static readonly BindableProperty GrabberAreaHeightProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for GrabberAreaHeight bindable property. |
GrabberBackgroundProperty
Identifies the GrabberBackground bindable property.
Declaration
public static readonly BindableProperty GrabberBackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for GrabberBackground bindable property. |
GrabberCornerRadiusProperty
Identifies the GrabberCornerRadius bindable property.
Declaration
public static readonly BindableProperty GrabberCornerRadiusProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for GrabberCornerRadius bindable property. |
GrabberHeightProperty
Identifies the GrabberHeight bindable property.
Declaration
public static readonly BindableProperty GrabberHeightProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for GrabberHeight bindable property. |
GrabberWidthProperty
Identifies the GrabberWidth bindable property.
Declaration
public static readonly BindableProperty GrabberWidthProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for GrabberWidth bindable property. |
HalfExpandedRatioProperty
Identifies the HalfExpandedRatio bindable property.
Declaration
public static readonly BindableProperty HalfExpandedRatioProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for HalfExpandedRatio bindable property. |
IsModalProperty
Identifies the IsModal bindable property.
Declaration
public static readonly BindableProperty IsModalProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IsModal bindable property. |
IsOpenProperty
Identifies the IsOpen bindable property.
Declaration
public static readonly BindableProperty IsOpenProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IsOpen bindable property. |
ShowGrabberProperty
Identifies the ShowGrabber bindable property.
Declaration
public static readonly BindableProperty ShowGrabberProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowGrabber bindable property. |
StateProperty
Identifies the State bindable property.
Declaration
public static readonly BindableProperty StateProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for State bindable property. |
Properties
AllowedState
Gets or sets a value that indicates the allowed states for the bottom sheet.
Declaration
public BottomSheetAllowedState AllowedState { get; set; }
Property Value
Type | Description |
---|---|
BottomSheetAllowedState | A BottomSheetAllowedState value. The default is All. Possible values are: |
Examples
Below is an example of how to configure the AllowedState property using XAML and C#:
Background
Gets or sets the background of the SfBottomSheet.
Declaration
public Brush Background { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A Microsoft.Maui.Controls.Brush value representing the background. |
Remarks
This property overrides the background property from the base class.
Examples
Below is an example of how to configure the Background property using XAML and C#:
BottomSheetContent
Gets or sets the content of the SfBottomSheet control.
Declaration
public View BottomSheetContent { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.View | A Microsoft.Maui.Controls.View that represents the content of the bottom sheet. |
BottomSheetContentWidth
Specifies the custom width value (in pixels) for the BottomSheet when ContentWidthMode is set to Custom.
Declaration
public double BottomSheetContentWidth { get; set; }
Property Value
Type |
---|
System.Double |
Examples
Below is an example of how to configure the BottomSheetContentWidth property using XAML and C#:
<bottomSheet:SfBottomSheet x:Name="bottomSheet" ContentWidthMode="Custom" BottomSheetContentWidth="350"/>
CollapsedHeight
Gets or sets the height of the bottom sheet in collapsed state.
Declaration
public double CollapsedHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value representing the height in device-independent units. The default value is 100. |
Remarks
This value represents the height bottom sheet will occupy when collapsed.
Examples
Below is an example of how to configure the CollapsedHeight property using XAML and C#:
CollapseOnOverlayTap
Gets or sets whether the bottom sheet should collapse to its minimum height instead of closing when tapping outside.
Declaration
public bool CollapseOnOverlayTap { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It accepts Boolean values, and the default value is |
Examples
Below is an example of how to configure the CollapseOnOverlayTap property using XAML and C#:
Content
Gets or sets the view that can be used to customize the main content of the SfBottomSheet.
Declaration
public View Content { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.View | A Microsoft.Maui.Controls.View that represents the content view of the bottom sheet. |
ContentPadding
Gets or sets the padding of the content in SfBottomSheet.
Declaration
public Thickness ContentPadding { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Thickness | A Microsoft.Maui.Thickness value representing the padding. The default value is 5 on all sides. |
Remarks
Use this property to add space between the content and the edges of the bottom sheet.
Examples
Below is an example of how to configure the ContentPadding property using XAML and C#:
ContentWidthMode
Gets or sets a value that customizes the content width for the bottom sheet.
Declaration
public BottomSheetContentWidthMode ContentWidthMode { get; set; }
Property Value
Type | Description |
---|---|
BottomSheetContentWidthMode | A BottomSheetContentWidthMode value. The default is Full. Possible values are: |
Examples
Below is an example of how to configure the ContentWidthMode property using XAML and C#:
CornerRadius
Gets or sets the corner radius of the SfBottomSheet.
Declaration
public CornerRadius CornerRadius { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.CornerRadius | A CornerRadius value. The default value is 0. |
Remarks
This property allows you to round the corners of the bottom sheet. Set all values to 0 for sharp corners, or provide individual values for each corner.
Examples
Below is an example of how to configure the CornerRadius property using XAML and C#:
EnableSwiping
Gets or sets a value indicating whether swiping is enabled in the SfBottomSheet control.
Declaration
public bool EnableSwiping { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A System.Boolean value. The default value is |
Remarks
When set to true
, users can swipe the bottom sheet to change its state.
When set to false
, swiping gestures are disabled.
Examples
Below is an example of how to configure the EnableSwiping property using XAML and C#:
FullExpandedRatio
Gets or sets the height ratio of the bottom sheet in full-expanded state.
Declaration
public double FullExpandedRatio { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value between 0 and 1. The default value is 1. |
Remarks
This value represents the fraction of the screen height that the bottom sheet will occupy when full-expanded. For example, 0.75 means the bottom sheet will cover 3/4th of the screen.
Examples
Below is an example of how to configure the FullExpandedRatio property using XAML and C#:
GrabberAreaHeight
Gets or sets the height of the grabber area in SfBottomSheet.
Declaration
public double GrabberAreaHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value representing the grabber area height. The default value is 30. |
Remarks
This property allows you to customize the height of the grabber area.
Examples
Below is an example of how to configure the GrabberAreaHeight property using XAML and C#:
GrabberBackground
Gets or sets the background color of the grabber in SfBottomSheet.
Declaration
public Brush GrabberBackground { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A Microsoft.Maui.Controls.Brush value representing the grabber's background color. |
Examples
Below is an example of how to configure the GrabberBackground property using XAML and C#:
GrabberCornerRadius
Gets or sets the corner radius of the grabber in SfBottomSheet.
Declaration
public CornerRadius GrabberCornerRadius { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.CornerRadius | A CornerRadius value. The default value is 0 for all corners. |
Remarks
Use this property to round the corners of the grabber handle.
Examples
Below is an example of how to configure the GrabberCornerRadius property using XAML and C#:
GrabberHeight
Gets or sets the height of the grabber in SfBottomSheet.
Declaration
public double GrabberHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value representing the height in device-independent units. The default value is 4. |
Remarks
This property allows you to customize the size of the grabber handle.
Examples
Below is an example of how to configure the GrabberHeight property using XAML and C#:
GrabberWidth
Gets or sets the width of the grabber in SfBottomSheet.
Declaration
public double GrabberWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value representing the width in device-independent units. The default value is 32. |
Remarks
This property allows you to customize the size of the grabber handle.
Examples
Below is an example of how to configure the GrabberWidth property using XAML and C#:
HalfExpandedRatio
Gets or sets the height ratio of the bottom sheet in half-expanded state.
Declaration
public double HalfExpandedRatio { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double value between 0 and 1. The default value is 0.5. |
Remarks
This value represents the fraction of the screen height that the bottom sheet will occupy when half-expanded. For example, 0.5 means the bottom sheet will cover half of the screen.
Examples
Below is an example of how to configure the HalfExpandedRatio property using XAML and C#:
IsModal
Gets or sets a value that indicates whether the SfBottomSheet acts as a modal dialog.
Declaration
public bool IsModal { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A System.Boolean value. The default value is |
Remarks
When set to true
, the bottom sheet will behave like a modal dialog, preventing interaction with underlying content.
Examples
Below is an example of how to configure the IsModal property using XAML and C#:
IsOpen
Gets or sets a value that indicates whether the SfBottomSheet is opened or not.
Declaration
public bool IsOpen { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A System.Boolean value. The default value is |
Remarks
When set to true
, the bottom sheet will be opened.
Examples
Below is an example of how to configure the IsOpen property using XAML and C#:
ShowGrabber
Gets or sets a value indicating whether to show the drag handle (grabber) in the SfBottomSheet.
Declaration
public bool ShowGrabber { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A System.Boolean value. The default value is |
Examples
Below is an example of how to configure the ShowGrabber property using XAML and C#:
State
Gets or sets the expanded state of the SfBottomSheet control.
Declaration
public BottomSheetState State { get; set; }
Property Value
Type | Description |
---|---|
BottomSheetState | A BottomSheetState value. The default is Hidden. Possible values are: |
Examples
Below is an example of how to configure the State property using XAML and C#:
Methods
Close()
Closes the SfBottomSheet.
Declaration
public void Close()
Exceptions
Type | Condition |
---|---|
System.InvalidOperationException | Thrown when the bottom sheet or overlay grid is not initialized. |
GetThemeDictionary()
Returns the theme dictionary for the SfBottomSheet control.
Declaration
public ResourceDictionary GetThemeDictionary()
Returns
Type | Description |
---|---|
Microsoft.Maui.Controls.ResourceDictionary | A ResourceDictionary containing the theme styles for the control. |
OnCommonThemeChanged(String, String)
Handles changes to the common theme.
Declaration
public void OnCommonThemeChanged(string oldTheme, string newTheme)
Parameters
Type | Name | Description |
---|---|---|
System.String | oldTheme | The previous theme. |
System.String | newTheme | The new theme. |
OnControlThemeChanged(String, String)
Handles changes to the control-specific theme.
Declaration
public void OnControlThemeChanged(string oldTheme, string newTheme)
Parameters
Type | Name | Description |
---|---|---|
System.String | oldTheme | The previous theme. |
System.String | newTheme | The new theme. |
OnHandlerChanged()
Called when the handler for the control changes. Configures platform-specific behavior.
Declaration
protected override void OnHandlerChanged()
Overrides
OnSizeAllocated(Double, Double)
Handles size allocation for the bottom sheet, adjusting its height based on the current state.
Declaration
protected override void OnSizeAllocated(double width, double height)
Parameters
Type | Name | Description |
---|---|---|
System.Double | width | The allocated width. |
System.Double | height | The allocated height. |
Show()
Shows the SfBottomSheet.
Declaration
public void Show()
Exceptions
Type | Condition |
---|---|
System.InvalidOperationException | Thrown when the bottom sheet or overlay grid is not initialized. |
Events
StateChanged
Invoke the event when the state of SfBottomSheet is changed.
Declaration
public event EventHandler<StateChangedEventArgs> StateChanged
Event Type
Type |
---|
System.EventHandler<StateChangedEventArgs> |