Syncfusion maui backdrop

Skill syncfusion/maui-ui-components-skills/skills/syncfusion-maui-backdrop

Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.

Install

npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-backdrop

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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.md

3.6 KB, as published. Nobody here has run it

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)