{"id":"cf1f87c8-b240-452c-b391-6721a9b1cb9b","shortId":"Dq4S4d","kind":"skill","title":"syncfusion-maui-expander","tagline":"Implements the Syncfusion .NET MAUI Expander (SfExpander) control for collapsible and expandable content sections. Use when working with expanders, collapsible sections, accordions, expandable panels, or expand/collapse functionality in .NET MAUI applications. Covers space-effici","description":"# Implementing .NET MAUI Expander (SfExpander)\n\nThe Syncfusion .NET MAUI Expander control provides collapsible and expandable content sections for creating space-efficient layouts. Users can tap headers to reveal or hide content with smooth animations, making it ideal for accordion layouts, FAQs, and organized data displays.\n\n## When to Use This Skill\n\nUse this skill when you need to:\n\n- **Implement collapsible sections** for space-efficient layouts and organized content display\n- **Create accordion-style interfaces** for FAQs, settings panels, or grouped data\n- **Build invoice or receipt views** with expandable sections (date, items, payment, address)\n- **Design dynamic header/content layouts** where users tap to reveal more information\n- **Add animated expand/collapse functionality** with customizable duration and easing\n- **Handle expand/collapse events** for controlling user interactions and state management\n- **Customize header appearance** with backgrounds, icon positions, and Visual State Manager styling\n- **Apply modern liquid glass effects** for premium translucent designs in high-end applications\n\n## Component Overview\n\n- Interactive expand/collapse with single tap on header\n- Fully customizable header and content view layouts\n- Smooth animations with configurable duration and easing\n- Event system for Expanding, Expanded, Collapsing, and Collapsed states\n- Programmatic control via `IsExpanded` property\n- Visual State Manager support for dynamic styling\n- Header appearance customization (background, icon position, colors)\n- Modern liquid glass effects (.NET 10+, macOS 26+, iOS 26+)\n- Event cancellation for Expanding and Collapsing actions\n- Platform-optimized rendering and animations\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nWhen to read: First-time setup, installation, basic implementation\n- Installing Syncfusion.Maui.Expander NuGet package\n- Registering Syncfusion handler (ConfigureSyncfusionCore)\n- Creating basic SfExpander instance\n- Defining Header and Content views\n- Using IsExpanded property to control initial state\n- Complete invoice example with multiple expanders\n- Running your first expander application\n\n### Header and Content Customization\n📄 **Read:** [references/header-content-customization.md](references/header-content-customization.md)\n\nWhen to read: Customizing header and content sections with layouts and views\n- Loading any UI view in Header and Content properties\n- Using Grid layouts with icons and labels\n- Icon integration with font families\n- Multi-expander layouts (invoice with multiple sections)\n- Best practices for content structure\n- Avoiding common pitfalls (Label wrapping in containers)\n\n### Animation and Events\n📄 **Read:** [references/animation-events.md](references/animation-events.md)\n\nWhen to read: Controlling animation behavior and handling expand/collapse events\n- AnimationDuration property (default: 300ms)\n- AnimationEasing property (Linear, SinOut, etc.)\n- Programmatic control with IsExpanded property\n- Expanding event: Triggered before expansion (cancellable)\n- Expanded event: Triggered after expansion completes\n- Collapsing event: Triggered before collapse (cancellable)\n- Collapsed event: Triggered after collapse completes\n- Event handler examples with cancellation logic\n\n### Appearance and Styling\n📄 **Read:** [references/appearance-styling.md](references/appearance-styling.md)\n\nWhen to read: Customizing header appearance, colors, icons, and Visual State Manager styling\n- HeaderIconPosition property (Start, End)\n- HeaderBackground color customization\n- HeaderIconColor customization\n- Visual State Manager (VSM) states: Expanded, Collapsed, PointerOver, Normal\n- Dynamic appearance changes based on expander state\n- Complete VSM examples with color transitions\n\n### Liquid Glass Effect\n📄 **Read:** [references/liquid-glass-effect.md](references/liquid-glass-effect.md)\n\nWhen to read: Applying modern translucent designs with adaptive color tinting\n- When to use liquid glass effect (premium UX applications)\n- Wrapping SfExpander inside SfGlassEffectView\n- Setting EnableLiquidGlassEffect=\"True\" on expander\n- Using Background=\"Transparent\" for glass effect\n- Complete invoice example with liquid glass\n- Platform requirements: .NET 10+, macOS 26+, iOS 26+\n- Multiple expanders with consistent glass effect","tags":["syncfusion","maui","expander","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-expander","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-expander","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 (4,415 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-22T00:56:07.426Z","embedding":null,"createdAt":"2026-04-18T22:15:21.015Z","updatedAt":"2026-04-22T00:56:07.426Z","lastSeenAt":"2026-04-22T00:56:07.426Z","tsv":"'10':246,538 '26':248,250,540,542 '300ms':397 'accordion':26,79,112 'accordion-styl':111 'action':257 'adapt':502 'add':145 'address':133 'anim':74,146,207,263,378,388 'animationdur':394 'animationeas':398 'appear':166,235,438,449,476 'appli':176,497 'applic':35,189,317,513 'avoid':371 'background':168,237,524 'base':478 'basic':281,292 'behavior':389 'best':366 'build':122 'cancel':252,413,425,436 'chang':477 'collaps':14,24,52,99,218,220,256,420,424,426,430,472 'color':240,450,462,486,503 'common':372 'complet':307,419,431,482,529 'compon':190 'configur':209 'configuresyncfusioncor':290 'consist':546 'contain':377 'content':17,55,71,108,203,298,320,331,344,369 'control':12,50,158,223,304,387,404 'cover':36 'creat':58,110,291 'custom':164,236,321,328,447,463,465 'customiz':150,200 'data':84,121 'date':130 'default':396 'defin':295 'design':134,184,500 'display':85,109 'document':264 'durat':151,210 'dynam':135,232,475 'eas':153,212 'effect':180,244,490,510,528,548 'effici':39,61,104 'enableliquidglasseffect':519 'end':188,460 'etc':402 'event':156,213,251,380,393,409,415,421,427,432 'exampl':309,434,484,531 'expand':4,10,16,23,27,43,49,54,128,216,217,254,312,316,360,408,414,471,480,522,544 'expand/collapse':30,147,155,193,392 'expans':412,418 'famili':357 'faq':81,116 'first':277,315 'first-tim':276 'font':356 'fulli':199 'function':31,148 'get':268 'glass':179,243,489,509,527,534,547 'grid':347 'group':120 'guid':267 'handl':154,391 'handler':289,433 'header':66,165,198,201,234,296,318,329,342,448 'header/content':136 'headerbackground':461 'headericoncolor':464 'headericonposit':457 'hide':70 'high':187 'high-end':186 'icon':169,238,350,353,451 'ideal':77 'implement':5,40,98,282 'inform':144 'initi':305 'insid':516 'instal':280,283 'instanc':294 'integr':354 'interact':160,192 'interfac':114 'invoic':123,308,362,530 'io':249,541 'isexpand':225,301,406 'item':131 'label':352,374 'layout':62,80,105,137,205,334,348,361 'linear':400 'liquid':178,242,488,508,533 'load':337 'logic':437 'maco':247,539 'make':75 'manag':163,174,229,455,468 'maui':3,9,34,42,48 'modern':177,241,498 'multi':359 'multi-expand':358 'multipl':311,364,543 'navig':266 'need':96 'net':8,33,41,47,245,537 'normal':474 'nuget':285 'optim':260 'organ':83,107 'overview':191 'packag':286 'panel':28,118 'payment':132 'pitfal':373 'platform':259,535 'platform-optim':258 'pointerov':473 'posit':170,239 'practic':367 'premium':182,511 'programmat':222,403 'properti':226,302,345,395,399,407,458 'provid':51 'read':270,275,322,327,381,386,441,446,491,496 'receipt':125 'references/animation-events.md':382,383 'references/appearance-styling.md':442,443 'references/getting-started.md':271,272 'references/header-content-customization.md':323,324 'references/liquid-glass-effect.md':492,493 'regist':287 'render':261 'requir':536 'reveal':68,142 'run':313 'section':18,25,56,100,129,332,365 'set':117,518 'setup':279 'sfexpand':11,44,293,515 'sfglasseffectview':517 'singl':195 'sinout':401 'skill':90,93 'skill-syncfusion-maui-expander' 'smooth':73,206 'source-syncfusion' 'space':38,60,103 'space-effici':37,59,102 'start':269,459 'state':162,173,221,228,306,454,467,470,481 'structur':370 'style':113,175,233,440,456 'support':230 'syncfus':2,7,46,288 'syncfusion-maui-expand':1 'syncfusion.maui.expander':284 'system':214 'tap':65,140,196 'time':278 'tint':504 'topic-agent-skills' 'transit':487 'transluc':183,499 'transpar':525 'trigger':410,416,422,428 'true':520 'ui':339 'use':19,88,91,300,346,507,523 'user':63,139,159 'ux':512 'via':224 'view':126,204,299,336,340 'visual':172,227,453,466 'vsm':469,483 'work':21 'wrap':375,514","prices":[{"id":"e26ad46b-46e4-4763-bf29-1cd2d056d5f9","listingId":"cf1f87c8-b240-452c-b391-6721a9b1cb9b","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:21.015Z"}],"sources":[{"listingId":"cf1f87c8-b240-452c-b391-6721a9b1cb9b","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-expander","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-expander","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:21.015Z","lastSeenAt":"2026-04-22T00:56:07.426Z"}],"details":{"listingId":"cf1f87c8-b240-452c-b391-6721a9b1cb9b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-expander","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":"35d6f1d731a238ccbaaed9788baf701baf90f1ea","skill_md_path":"skills/syncfusion-maui-expander/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-expander"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-expander","description":"Implements the Syncfusion .NET MAUI Expander (SfExpander) control for collapsible and expandable content sections. Use when working with expanders, collapsible sections, accordions, expandable panels, or expand/collapse functionality in .NET MAUI applications. Covers space-efficient layouts, header customization, expand/collapse animations, and liquid glass effects."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-expander"},"updatedAt":"2026-04-22T00:56:07.426Z"}}