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