syncfusion-wpf-accordion

Q: How do I install syncfusion-wpf-accordion?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-accordion 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-wpf-accordion/ (personal) or .claude/skills/syncfusion-wpf-accordion/ (project).

by syncfusionFrontend & Design

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.

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

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-accordion

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-wpf-accordion 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 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

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

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

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

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

AccentBrush — highlight color
HeaderTemplate / ContentTemplate
AccordionButtonStyle — expander arrow customization
ItemContainerStyle — per-item styling
Animation enable/disable
SfSkinManager themes

Quick Start

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>

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

FAQ

What does the syncfusion-wpf-accordion skill do?

How do I install syncfusion-wpf-accordion?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-accordion 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-wpf-accordion/ (personal) or .claude/skills/syncfusion-wpf-accordion/ (project).

Which AI agents can use syncfusion-wpf-accordion?

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-wpf-accordion 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-wpf-accordion?

It is published by syncfusion in syncfusion/wpf-ui-components-skills. It has 157 recorded installs.