.NET MAUI Bottom Sheet (SfBottomSheet)
Overview
The Bottom Sheet is a user interface component that slides up from the bottom of the screen, allowing users to interact with additional information or actions without navigating away from the main screen. The Syncfusion SfBottomSheet control provides comprehensive state management, content configuration, gesture support, and extensive customization options for .NET MAUI applications.
Key Features:
- Multiple states: FullExpanded, HalfExpanded, Collapsed, Hidden
- Flexible content configuration with data binding support
- Touch gestures: swipe to expand/collapse
- Extensive customization: colors, dimensions, corner radius, padding, grabber styling
- Event handling and state change notifications
- Modal and non-modal display modes
- Programmatic control via IsOpen property and Show/Close methods
When to Use This Skill
Use this skill when you need to:
- Display supplementary content without full page navigation (product details, information panels, settings)
- Create data-driven interactions that bind list selections to detailed content views
- Implement modal dialogs or confirmation sheets that overlay the main content
- Provide partial reveal patterns where users gradually expand content (peek-a-boo effect)
- Enable gesture-based UI where users swipe to reveal more information
- Customize appearance to match application themes (colors, sizes, rounded corners, animations)
- Handle state transitions programmatically or through user interaction
- Manage focus and overlay behavior in mobile-first applications
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Project setup and template creation
- NuGet package installation (Syncfusion.Maui.Toolkit)
- Handler registration in MauiProgram.cs
- Basic control initialization
- First working example with ListView integration
Content Configuration
📄 Read: references/content-configuration.md
- Setting main content vs. bottom sheet content
- Data binding with ViewModels
- Layout patterns (VerticalStackLayout, Grid, ListView)
- Dynamic content updates
- Binding context management
States and State Management
📄 Read: references/states-management.md
- State property values and transitions
- AllowedState configuration (FullExpanded, HalfExpanded, All)
- IsOpen property for programmatic control
- State change scenarios and use cases
Customization and Styling
📄 Read: references/customization-styling.md
- Popup mode (IsModal) and overlay behavior
- Background color and corner radius
- Height adjustments (FullExpandedRatio, HalfExpandedRatio, CollapsedHeight)
- Width modes (Full, Custom)
- Content padding and spacing
- Grabber element customization
- Animation duration configuration
Gestures, Events, and Methods
📄 Read: references/gestures-events-methods.md
- Swipe gesture support (EnableSwiping)
- StateChanged event handling
- CollapseOnOverlayTap for overlay interaction
- Show/Close methods for programmatic control
- Event argument inspection
Common Patterns and Real-World Scenarios
📄 Read: references/common-patterns.md
- Data-driven Bottom Sheet with list selection
- Modal dialogs and confirmation sheets
- Partial reveal and peek patterns
- Dynamic content binding
- Error handling and edge cases
- Best practices and anti-patterns
1---
2name: syncfusion-maui-toolkit-bottom-sheet
3description: Implement the Syncfusion .NET MAUI Bottom Sheet (SfBottomSheet) control with state management, content configuration, gesture support, and customization. Covers setup, content binding, state transitions, styling, events, and interactive patterns for sliding content panels.
4metadata:
5 author: "Syncfusion Inc"
6 version: "1.0.0"
7---
8
9# .NET MAUI Bottom Sheet (SfBottomSheet)
10
11## Overview
12
13The Bottom Sheet is a user interface component that slides up from the bottom of the screen, allowing users to interact with additional information or actions without navigating away from the main screen. The Syncfusion `SfBottomSheet` control provides comprehensive state management, content configuration, gesture support, and extensive customization options for .NET MAUI applications.
14
15**Key Features:**
16- Multiple states: FullExpanded, HalfExpanded, Collapsed, Hidden
17- Flexible content configuration with data binding support
18- Touch gestures: swipe to expand/collapse
19- Extensive customization: colors, dimensions, corner radius, padding, grabber styling
20- Event handling and state change notifications
21- Modal and non-modal display modes
22- Programmatic control via IsOpen property and Show/Close methods
23
24---
25
26## When to Use This Skill
27
28Use this skill when you need to:
29
30- **Display supplementary content** without full page navigation (product details, information panels, settings)
31- **Create data-driven interactions** that bind list selections to detailed content views
32- **Implement modal dialogs** or confirmation sheets that overlay the main content
33- **Provide partial reveal patterns** where users gradually expand content (peek-a-boo effect)
34- **Enable gesture-based UI** where users swipe to reveal more information
35- **Customize appearance** to match application themes (colors, sizes, rounded corners, animations)
36- **Handle state transitions** programmatically or through user interaction
37- **Manage focus and overlay behavior** in mobile-first applications
38
39---
40
41## Documentation and Navigation Guide
42
43### Getting Started
44📄 **Read:** [references/getting-started.md](references/getting-started.md)
45- Project setup and template creation
46- NuGet package installation (Syncfusion.Maui.Toolkit)
47- Handler registration in MauiProgram.cs
48- Basic control initialization
49- First working example with ListView integration
50
51### Content Configuration
52📄 **Read:** [references/content-configuration.md](references/content-configuration.md)
53- Setting main content vs. bottom sheet content
54- Data binding with ViewModels
55- Layout patterns (VerticalStackLayout, Grid, ListView)
56- Dynamic content updates
57- Binding context management
58
59### States and State Management
60📄 **Read:** [references/states-management.md](references/states-management.md)
61- State property values and transitions
62- AllowedState configuration (FullExpanded, HalfExpanded, All)
63- IsOpen property for programmatic control
64- State change scenarios and use cases
65
66### Customization and Styling
67📄 **Read:** [references/customization-styling.md](references/customization-styling.md)
68- Popup mode (IsModal) and overlay behavior
69- Background color and corner radius
70- Height adjustments (FullExpandedRatio, HalfExpandedRatio, CollapsedHeight)
71- Width modes (Full, Custom)
72- Content padding and spacing
73- Grabber element customization
74- Animation duration configuration
75
76### Gestures, Events, and Methods
77📄 **Read:** [references/gestures-events-methods.md](references/gestures-events-methods.md)
78- Swipe gesture support (EnableSwiping)
79- StateChanged event handling
80- CollapseOnOverlayTap for overlay interaction
81- Show/Close methods for programmatic control
82- Event argument inspection
83
84### Common Patterns and Real-World Scenarios
85📄 **Read:** [references/common-patterns.md](references/common-patterns.md)
86- Data-driven Bottom Sheet with list selection
87- Modal dialogs and confirmation sheets
88- Partial reveal and peek patterns
89- Dynamic content binding
90- Error handling and edge cases
91- Best practices and anti-patterns
92
93---
gabrielmoreira