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

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

Key Properties

SfAccordionItem properties: