About syncfusion-maui-backdrop
A guidance skill for implementing Syncfusion’s SfBackdropPage in .NET MAUI. It helps developers build layered pages where a sliding back layer reveals menus or contextual content behind the main view.
Key features
- 01Layered front and back surfaces
- 02Toolbar, gesture, and programmatic controls
- 03Automatic or full-screen reveal height
- 04Customizable edges and header icons
- 05Reveal-state change events
Use cases
- 01Adding sliding navigation menus
- 02Building filter or search panels
- 03Tracking backdrop reveal state
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/syncfusion-maui-backdropin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/events.mdgetting-started.mdheader-configuration.mdliquid-glass-effect.mdreveal-and-corner-customization.mdDetails
From the project READMEImplementing Backdrop Pages (.NET MAUI)
The Syncfusion SfBackdropPage is a layered page with two surfaces:
- Back Layer — holds actionable/contextual content (navigation menus, filters)
- Front Layer — always visible, holds primary content; slides down to reveal the back layer
The back layer can be revealed/concealed via toolbar icon, touch/swipe, or programmatically.
When to Use This Skill
Use this skill when the user needs to:
- Implement menu-driven navigation with a sliding front layer
- Build filter or search panels that slide in from behind primary content
- Add reveal and conceal animations to a layered page
- Customize backdrop header icons, corner shapes, or reveal height
- Handle
BackLayerStateChangedevents for state tracking - Apply the Liquid Glass Effect to backdrop layers
Component Overview
The SfBackdropPage control provides:
- Two-Layer Architecture: Back layer for contextual actions, front layer for primary content with spatial hierarchy
- Multiple Reveal Methods: Programmatic API, toolbar icon tap, and swipe/fling gestures
- Adaptive Reveal Height: Auto mode (fits content) or Fill mode (full screen expansion)
- Customizable Front Layer: Curved or flat edge shapes with independent corner radius control
- Header Integration: Seamless NavigationPage and FlyoutPage support with customizable icons and text
- Smooth Animations: Built-in Material Design motion for reveal/conceal transitions
- State Tracking: BackLayerStateChanged event with percentage-based reveal tracking
- Modern Effects: Liquid Glass Effect support for translucent designs (iOS/macOS 26+, .NET 10)
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet package installation (
Syncfusion.Maui.Backdrop) - Handler registration in
MauiProgram.cs SfBackdropPageinitialization (XAML & C#)- Adding
BackdropBackLayerandBackdropFrontLayercontent - Programmatic, touch, and swipe reveal/conceal
Header Configuration
📄 Read: references/header-configuration.md
- Wrapping in
NavigationPage(required for header) - Default icons in NavigationPage vs FlyoutPage
- Custom icon images (
OpenIconImageSource,CloseIconImageSource) - Custom icon text (
OpenText,CloseText)
Reveal Height & Corner Shape Customization
📄 Read: references/reveal-and-corner-customization.md
BackLayerRevealOption:FillvsAutoRevealedHeighton the front layerEdgeShape:CurvedvsFlatLeftCornerRadius/RightCornerRadius
Events
📄 Read: references/events.md
BackLayerStateChangedeventBackLayerStateChangedEventArgs.Percentage- XAML and C# wiring patterns
Liquid Glass Effect
📄 Read: references/liquid-glass-effect.md
- Enabling
EnableLiquidGlassEffecton Front or Back Layer - Transparent background setup for glass effect
- Platform requirements (iOS 26+, macOS 26+, .NET 10)