# Syncfusion Maui Backdrop

> Implements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.

- Skill: `gabrielmoreira/syncfusion-maui-backdrop` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/syncfusion-maui-backdrop`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/syncfusion-maui-backdrop/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/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](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](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](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](references/events.md)
- `BackLayerStateChanged` event
- `BackLayerStateChangedEventArgs.Percentage`
- XAML and C# wiring patterns

### Liquid Glass Effect
📄 **Read:** [references/liquid-glass-effect.md](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)