# Syncfusion Wpf Accordion

> Implement Syncfusion WPF SfAccordion for collapsible and expandable panel layouts. Use this when working with accordion controls, expandable panels, or collapsible section navigation in WPF. Covers populating items declaratively or via data binding, selection modes (One/OneOrMore/ZeroOrOne/ZeroOrMore), programmatic selection, appearance customization (AccentBrush, HeaderTemplate, ContentTemplate), and theming with SfSkinManager.

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

---


# Implementing SfAccordion (WPF)

## When to Use This Skill

Use this skill when the user needs to:
- Build collapsible/expandable section UI in WPF
- Display categorized content with expand-on-demand behavior
- Create Outlook-style, FAQ-style, or settings-panel accordion layouts
- Bind a business object collection to an accordion
- Control how many items can be expanded simultaneously
- Customize accordion item headers, content, expander buttons, or animation

---

## Component Overview

```
SfAccordion                          (ItemsControl)
└── SfAccordionItem  (×N)            (HeaderedContentControl)
    ├── Header      — always visible (collapsed & expanded)
    └── Content     — visible only when expanded (IsSelected=true)
```

**Assembly:** `Syncfusion.SfAccordion.WPF`  
**Namespace:** `Syncfusion.Windows.Controls.Layout`  
**XAML Schema:** `http://schemas.syncfusion.com/wpf`

---

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Assembly reference and NuGet setup
- XAML and C# control creation
- Basic SfAccordionItem with Header and Content
- Themes with SfSkinManager

### Populating Items
📄 **Read:** [references/populating-items.md](references/populating-items.md)
- Declarative items via `Items` collection
- Data binding via `ItemsSource`
- Model + ViewModel + ObservableCollection
- `DisplayMemberPath` for quick headers
- `HeaderTemplate` / `HeaderTemplateSelector`
- `ContentTemplate` / `ContentTemplateSelector`

### Selecting Items
📄 **Read:** [references/selecting-items.md](references/selecting-items.md)
- `SelectedIndex` — select by index
- `SelectedItem` — select by instance (TwoWay binding)
- `SelectedItems` / `SelectedIndices` — read-only collections
- `IsSelected` on individual items
- `SelectAll()` / `UnselectAll()` methods
- `SelectedItemsChanged` / `SelectionChanged` events

### Selection Mode
📄 **Read:** [references/selection-mode.md](references/selection-mode.md)
- `One` — exactly one expanded (default)
- `OneOrMore` — multiple expanded, at least one required
- `ZeroOrOne` — at most one, all can collapse
- `ZeroOrMore` — multiple, all can collapse
- Decision guide: choosing the right mode

### Appearance and Styling
📄 **Read:** [references/appearance-and-styling.md](references/appearance-and-styling.md)
- `AccentBrush` — highlight color
- `HeaderTemplate` / `ContentTemplate`
- `AccordionButtonStyle` — expander arrow customization
- `ItemContainerStyle` — per-item styling
- Animation enable/disable
- SfSkinManager themes

---

## Quick Start

```xaml
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:SfAccordion Width="300" Height="200">
    <syncfusion:SfAccordionItem Header="WPF"
                                Content="Essential Studio for WPF"/>
    <syncfusion:SfAccordionItem Header="Silverlight"
                                Content="Essential Studio for Silverlight"/>
    <syncfusion:SfAccordionItem Header="WinRT"
                                Content="Essential Studio for WinRT" IsSelected="True"/>
</syncfusion:SfAccordion>
```

```csharp
using Syncfusion.Windows.Controls.Layout;

SfAccordion accordion = new SfAccordion();
accordion.Items.Add(new SfAccordionItem { Header = "WPF",        Content = "Essential Studio for WPF" });
accordion.Items.Add(new SfAccordionItem { Header = "Silverlight", Content = "Essential Studio for Silverlight" });
accordion.Items.Add(new SfAccordionItem { Header = "WinRT",       Content = "Essential Studio for WinRT", IsSelected = true });
this.Content = accordion;
```

---

## Common Patterns

| Scenario | Approach |
|---|---|
| Multiple sections, one open at a time | `SelectionMode="One"` (default) |
| FAQ where multiple can be open | `SelectionMode="ZeroOrMore"` |
| Data-driven content | `ItemsSource` + `HeaderTemplate` + `ContentTemplate` |
| Highlight active item color | `AccentBrush` |
| Custom expander arrow | `AccordionButtonStyle` on `SfAccordionItem` |
| Slow expand/collapse animation | `ExpandableContentControl.Percentage` in `ItemContainerStyle` |
| Track which items are expanded | `SelectedItemsChanged` event |

---

## Key Properties

| Property | Type | Description |
|---|---|---|
| `SelectionMode` | `AccordionSelectionMode` | One / OneOrMore / ZeroOrOne / ZeroOrMore |
| `SelectedIndex` | `int` | Index of most recently selected item |
| `SelectedItem` | `object` | Instance of most recently selected item |
| `SelectedItems` | read-only | All currently selected item instances |
| `SelectedIndices` | read-only | All currently selected item indices |
| `ItemsSource` | `IEnumerable` | Data collection binding |
| `HeaderTemplate` | `DataTemplate` | Shared header template for all items |
| `ContentTemplate` | `DataTemplate` | Shared content template for all items |
| `HeaderTemplateSelector` | `DataTemplateSelector` | Per-item header template |
| `ContentTemplateSelector` | `DataTemplateSelector` | Per-item content template |
| `AccentBrush` | `Brush` | Accent color for item highlight |
| `ItemContainerStyle` | `Style` | Style applied to each `SfAccordionItem` |

**SfAccordionItem properties:**

| Property | Description |
|---|---|
| `Header` | Always-visible item header |
| `Content` | Visible when item is expanded |
| `IsSelected` | `true` = expanded, `false` = collapsed |
| `IsLocked` | Read-only; `true` when item cannot be collapsed |
| `AccordionButtonStyle` | Style for the expander toggle button |