syncfusion-maui-backdrop

Implementing 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 BackLayerStateChanged events 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
• SfBackdropPage initialization (XAML & C#)
• Adding BackdropBackLayer and BackdropFrontLayer content
• 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: Fill vs Auto
• RevealedHeight on the front layer
• EdgeShape: Curved vs Flat
• LeftCornerRadius / RightCornerRadius

Events

📄 Read: references/events.md

• BackLayerStateChanged event
• BackLayerStateChangedEventArgs.Percentage
• XAML and C# wiring patterns

Liquid Glass Effect

📄 Read: references/liquid-glass-effect.md

• Enabling EnableLiquidGlassEffect on Front or Back Layer
• Transparent background setup for glass effect
• Platform requirements (iOS 26+, macOS 26+, .NET 10)