SkillsAdd

syncfusion/maui-ui-components-skills

syncfusion-maui-backdrop

Implements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces.

First seen Mar 25, 2026

Installation

$ npx skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-backdrop
View on skills.sh ↗ GitHub repository ↗

Summary

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

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from syncfusion/maui-ui-components-skills · top by installs.

npx skills add syncfusion/maui-ui-components-skills
syncfusion-maui-parallax-view 166 syncfusion-maui-cartesian-charts 161 syncfusion-maui-listview 159 syncfusion-maui-button 158 syncfusion-maui-checkbox 157 syncfusion-maui-text-input-layout 156 syncfusion-maui-tab-view 156 syncfusion-maui-combobox 156 syncfusion-maui-picker 155 syncfusion-maui-datagrid 155

Browse all from syncfusion/maui-ui-components-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 60
Default branch master
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version34.1.29
More metadata
author
Syncfusion Inc
version
34.1.29

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,645 B
  • docs SUMMARY.md 371 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 147 installs

SKILL.md

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)