{"id":"0b7d165a-3c4b-46c7-9929-e07af2bd586a","shortId":"DHyAWH","kind":"skill","title":"syncfusion-maui-backdrop","tagline":"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, ","description":"# Implementing Backdrop Pages (.NET MAUI)\n\nThe Syncfusion **SfBackdropPage** is a layered page with two surfaces:\n- **Back Layer** — holds actionable/contextual content (navigation menus, filters)\n- **Front Layer** — always visible, holds primary content; slides down to reveal the back layer\n\nThe back layer can be revealed/concealed via toolbar icon, touch/swipe, or programmatically.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- **Implement menu-driven navigation** with a sliding front layer\n- **Build filter or search panels** that slide in from behind primary content\n- **Add reveal and conceal animations** to a layered page\n- **Customize backdrop header icons**, corner shapes, or reveal height\n- **Handle `BackLayerStateChanged` events** for state tracking\n- **Apply the Liquid Glass Effect** to backdrop layers\n\n## Component Overview\n \nThe **SfBackdropPage** control provides:\n- **Two-Layer Architecture**: Back layer for contextual actions, front layer for primary content with spatial hierarchy\n- **Multiple Reveal Methods**: Programmatic API, toolbar icon tap, and swipe/fling gestures\n- **Adaptive Reveal Height**: Auto mode (fits content) or Fill mode (full screen expansion)\n- **Customizable Front Layer**: Curved or flat edge shapes with independent corner radius control\n- **Header Integration**: Seamless NavigationPage and FlyoutPage support with customizable icons and text\n- **Smooth Animations**: Built-in Material Design motion for reveal/conceal transitions\n- **State Tracking**: BackLayerStateChanged event with percentage-based reveal tracking\n- **Modern Effects**: Liquid Glass Effect support for translucent designs (iOS/macOS 26+, .NET 10)\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n- NuGet package installation (`Syncfusion.Maui.Backdrop`)\n- Handler registration in `MauiProgram.cs`\n- `SfBackdropPage` initialization (XAML & C#)\n- Adding `BackdropBackLayer` and `BackdropFrontLayer` content\n- Programmatic, touch, and swipe reveal/conceal\n\n### Header Configuration\n📄 **Read:** [references/header-configuration.md](references/header-configuration.md)\n- Wrapping in `NavigationPage` (required for header)\n- Default icons in NavigationPage vs FlyoutPage\n- Custom icon images (`OpenIconImageSource`, `CloseIconImageSource`)\n- Custom icon text (`OpenText`, `CloseText`)\n\n### Reveal Height & Corner Shape Customization\n📄 **Read:** [references/reveal-and-corner-customization.md](references/reveal-and-corner-customization.md)\n- `BackLayerRevealOption`: `Fill` vs `Auto`\n- `RevealedHeight` on the front layer\n- `EdgeShape`: `Curved` vs `Flat`\n- `LeftCornerRadius` / `RightCornerRadius`\n\n### Events\n📄 **Read:** [references/events.md](references/events.md)\n- `BackLayerStateChanged` event\n- `BackLayerStateChangedEventArgs.Percentage`\n- XAML and C# wiring patterns\n\n### Liquid Glass Effect\n📄 **Read:** [references/liquid-glass-effect.md](references/liquid-glass-effect.md)\n- Enabling `EnableLiquidGlassEffect` on Front or Back Layer\n- Transparent background setup for glass effect\n- Platform requirements (iOS 26+, macOS 26+, .NET 10)","tags":["syncfusion","maui","backdrop","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-backdrop","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-backdrop","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (3,178 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:56:03.365Z","embedding":null,"createdAt":"2026-04-18T22:15:00.815Z","updatedAt":"2026-04-22T06:56:03.365Z","lastSeenAt":"2026-04-22T06:56:03.365Z","tsv":"'10':262,382 '26':260,378,380 'action':171 'actionable/contextual':59 'ad':284 'adapt':191 'add':125 'alway':66 'anim':32,129,230 'api':184 'appli':149 'architectur':166 'auto':194,332 'back':13,26,56,76,79,167,367 'backdrop':4,9,23,34,42,135,155 'backdropbacklay':285 'backdropfrontlay':287 'background':370 'backlayerrevealopt':329 'backlayerstatechang':144,242,348 'backlayerstatechangedeventargs.percentage':350 'base':247 'behind':122 'build':113 'built':232 'built-in':231 'c':283,353 'closeiconimagesourc':315 'closetext':320 'compon':157 'conceal':128 'configur':295 'content':60,70,124,176,197,288 'contextu':170 'control':161,216 'corner':39,138,214,323 'cover':33 'curv':207,339 'custom':134,311,316,325 'customiz':204,225 'default':305 'design':235,258 'document':263 'driven':106 'edg':210 'edgeshap':338 'effect':153,251,254,358,374 'enabl':362 'enableliquidglasseffect':363 'event':145,243,344,349 'expans':203 'fill':199,330 'filter':63,114 'fit':196 'flat':209,341 'flyoutpag':222,310 'front':16,28,64,111,172,205,336,365 'full':201 'gestur':190 'get':267 'glass':152,253,357,373 'guid':266 'handl':143 'handler':276 'header':37,136,217,294,304 'height':142,193,322 'hierarchi':179 'hold':58,68 'icon':38,86,137,186,226,306,312,317 'imag':313 'implement':5,41,103 'independ':213 'initi':281 'instal':274 'integr':218 'io':377 'ios/macos':259 'layer':14,17,27,29,51,57,65,77,80,112,132,156,165,168,173,206,337,368 'leftcornerradius':342 'liquid':151,252,356 'maco':379 'materi':234 'maui':3,8,45 'mauiprogram.cs':279 'menu':105 'menu-driven':104 'menus':62 'method':182 'mode':195,200 'modern':250 'motion':236 'multipl':180 'navig':35,61,107,265 'navigationpag':220,301,308 'need':101 'net':7,44,261,381 'nuget':272 'openiconimagesourc':314 'opentext':319 'overview':158 'packag':273 'page':10,24,43,52,133 'panel':117 'pattern':36,355 'percentag':246 'percentage-bas':245 'platform':375 'primari':69,123,175 'programmat':89,183,289 'provid':162 'radius':215 'read':269,296,326,345,359 'references/events.md':346,347 'references/getting-started.md':270,271 'references/header-configuration.md':297,298 'references/liquid-glass-effect.md':360,361 'references/reveal-and-corner-customization.md':327,328 'registr':277 'requir':302,376 'reveal':74,126,141,181,192,248,321 'reveal/conceal':31,238,293 'revealed/concealed':83 'revealedheight':333 'rightcornerradius':343 'screen':202 'seamless':219 'search':116 'setup':371 'sfbackdroppag':11,25,48,160,280 'shape':40,139,211,324 'skill':94,97 'skill-syncfusion-maui-backdrop' 'slide':71,110,119 'smooth':229 'source-syncfusion' 'spatial':178 'start':268 'state':147,240 'support':223,255 'surfac':18,55 'swipe':292 'swipe/fling':189 'syncfus':2,6,47 'syncfusion-maui-backdrop':1 'syncfusion.maui.backdrop':275 'tap':187 'text':228,318 'toolbar':85,185 'topic-agent-skills' 'touch':290 'touch/swipe':87 'track':148,241,249 'transit':239 'transluc':257 'transpar':369 'two':54,164 'two-lay':163 'use':19,92,95 'user':100 'via':84 'visibl':67 'vs':309,331,340 'wire':354 'work':21 'wrap':299 'xaml':282,351","prices":[{"id":"a376abe7-a88c-4733-b7f8-c5aa2e631069","listingId":"0b7d165a-3c4b-46c7-9929-e07af2bd586a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:00.815Z"}],"sources":[{"listingId":"0b7d165a-3c4b-46c7-9929-e07af2bd586a","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-backdrop","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-backdrop","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:00.815Z","lastSeenAt":"2026-04-22T06:56:03.365Z"}],"details":{"listingId":"0b7d165a-3c4b-46c7-9929-e07af2bd586a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-backdrop","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"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.","skill_md_sha":"3d53bedc14cda6231152a7b3754a25999c57bae8","skill_md_path":"skills/syncfusion-maui-backdrop/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-backdrop"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-backdrop","description":"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."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-backdrop"},"updatedAt":"2026-04-22T06:56:03.365Z"}}