Class SfBottomSheet

Represents the SfBottomSheet control that displays from the bottom of the screen.

Inheritance

System.Object

SfView

SfBottomSheet

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.Children

SfView.ClipToBounds

SfView.Padding

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: All HalfExpanded FullExpanded

Examples

Below is an example of how to configure the AllowedState property using XAML and C#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" AllowedState="HalfExpanded"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" Background="Beige"/>

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#:

• XAML
• 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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" CollapsedHeight="100"/>

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 false.

Examples

Below is an example of how to configure the CollapseOnOverlayTap property using XAML and C#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" CollapseOnOverlayTap="True"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" ContentPadding="15"/>

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: Full Custom

Examples

Below is an example of how to configure the ContentWidthMode property using XAML and C#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" ContentWidthMode="Custom"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" CornerRadius="15, 15, 0, 0"/>

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 true.

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" EnableSwiping="True"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" FullExpandedRatio="0.9"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberAreaHeight="16"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberBackground="Red"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberCornerRadius="12"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberHeight="8"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberWidth="48"/>

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" HalfExpandedRatio="0.35"/>

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 true.

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" IsModal="True"/>

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 false.

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#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" IsOpen="True"/>

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 true.

Examples

Below is an example of how to configure the ShowGrabber property using XAML and C#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" ShowGrabber="True"/>

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: Hidden Collapsed HalfExpanded FullExpanded

Examples

Below is an example of how to configure the State property using XAML and C#:

• XAML
• C#

<bottomSheet:SfBottomSheet x:Name="bottomSheet" State="FullExpanded"/>

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

Syncfusion.Maui.Toolkit.SfView.OnHandlerChanged()

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>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement