syncfusion-maui-toolkit-expander

Q: How do I install syncfusion-maui-toolkit-expander?

Run npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-expander in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-maui-toolkit-expander/ (personal) or .claude/skills/syncfusion-maui-toolkit-expander/ (project).

by syncfusionBackend & APIs

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 and expand/collapse animations.

Installs: 48
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-expander

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-maui-toolkit-expander automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing .NET MAUI Expander (SfExpander)

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

When to Use This Skill

Use this skill when you need to:

Implement collapsible sections for space-efficient layouts and organized content display
Create accordion-style interfaces for FAQs, settings panels, or grouped data
Build invoice or receipt views with expandable sections (date, items, payment, address)
Design dynamic header/content layouts where users tap to reveal more information
Add animated expand/collapse functionality with customizable duration and easing
Handle expand/collapse events for controlling user interactions and state management
Customize header appearance with backgrounds, icon positions, and Visual State Manager styling

Component Overview

Interactive expand/collapse with single tap on header
Fully customizable header and content view layouts
Smooth animations with configurable duration and easing
Event system for Expanding, Expanded, Collapsing, and Collapsed states
Programmatic control via IsExpanded property
Visual State Manager support for dynamic styling
Header appearance customization (background, icon position, colors)
Event cancellation for Expanding and Collapsing actions
Platform-optimized rendering and animations

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When to read: First-time setup, installation, basic implementation

Installing Syncfusion.Maui.Toolkit NuGet package
Registering Syncfusion handler (ConfigureSyncfusionToolkit)
Creating basic SfExpander instance
Defining Header and Content views
Using IsExpanded property to control initial state
Complete invoice example with multiple expanders
Running your first expander application

Header and Content Customization

📄 Read: references/header-content-customization.md

When to read: Customizing header and content sections with layouts and views

Loading any UI view in Header and Content properties
Using Grid layouts with icons and labels
Icon integration with font families
Multi-expander layouts (invoice with multiple sections)
Best practices for content structure
Avoiding common pitfalls (Label wrapping in containers)

Animation and Events

📄 Read: references/animation-events.md

When to read: Controlling animation behavior and handling expand/collapse events

AnimationDuration property (default: 300ms)
AnimationEasing property (Linear, SinOut, etc.)
Programmatic control with IsExpanded property
Expanding event: Triggered before expansion (cancellable)
Expanded event: Triggered after expansion completes
Collapsing event: Triggered before collapse (cancellable)
Collapsed event: Triggered after collapse completes
Event handler examples with cancellation logic

Appearance and Styling

📄 Read: references/appearance-styling.md

When to read: Customizing header appearance, colors, icons, and Visual State Manager styling

HeaderIconPosition property (Start, End)
HeaderBackground color customization
HeaderIconColor customization
Visual State Manager (VSM) states: Expanded, Collapsed, PointerOver, Normal
Dynamic appearance changes based on expander state
Complete VSM examples with color transitions

FAQ

What does the syncfusion-maui-toolkit-expander skill do?

How do I install syncfusion-maui-toolkit-expander?

Run npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-expander in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-maui-toolkit-expander/ (personal) or .claude/skills/syncfusion-maui-toolkit-expander/ (project).

Which AI agents can use syncfusion-maui-toolkit-expander?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-maui-toolkit-expander safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-maui-toolkit-expander?

It is published by syncfusion in syncfusion/maui-toolkit-ui-components-skills. It has 48 recorded installs.