How do I install the Syncfusion Maui Backdrop skill?

Run npx skillmds@latest add gabrielmoreira/syncfusion-maui-backdrop in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Syncfusion Maui Backdrop safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Syncfusion Maui Backdrop?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Syncfusion Maui Backdrop free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Syncfusion Maui Backdrop?

gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Syncfusion Maui Backdrop by gabrielmoreira

Name: Syncfusion Maui Backdrop
Rating: 4.2 (5 reviews)
Author: gabrielmoreira

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.

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

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)

---name: syncfusion-maui-backdropdescription: 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.--- # 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)

Frequently asked questions