# Syncfusion Maui Toolkit Expander

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

- Skill: `gabrielmoreira/syncfusion-maui-toolkit-expander` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/syncfusion-maui-toolkit-expander`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/syncfusion-maui-toolkit-expander/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/syncfusion-maui-toolkit-expander

---


# 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](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](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](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](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