syncfusion-wpf-accordion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfAccordion (WPF)

实现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

当用户需要以下功能时使用本技能：

在WPF中构建可折叠/展开区域UI
显示支持按需展开的分类内容
创建Outlook样式、FAQ样式或设置面板式的手风琴布局
将业务对象集合绑定到手风琴控件
控制可同时展开的项数量
自定义手风琴项的标题、内容、展开按钮或动画

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

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

程序集：

Syncfusion.SfAccordion.WPF

命名空间：

Syncfusion.Windows.Controls.Layout

XAML架构：

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

📄 阅读： references/getting-started.md

程序集引用与NuGet配置
XAML和C#控件创建
带有Header和Content的基础SfAccordionItem
使用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
```

📄 阅读： references/populating-items.md

通过
```
Items
```
集合声明式添加项
通过
```
ItemsSource
```
进行数据绑定
模型+视图模型+ObservableCollection
使用
```
DisplayMemberPath
```
快速设置标题
```
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

📄 阅读： references/selecting-items.md

```
SelectedIndex
```
— 通过索引选择
```
SelectedItem
```
— 通过实例选择（双向绑定）
```
SelectedItems
```
/
```
SelectedIndices
```
— 只读集合
单个项上的
```
IsSelected
```
属性
```
SelectAll()
```
/
```
UnselectAll()
```
方法
```
SelectedItemsChanged
```
/
```
SelectionChanged
```
事件

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

📄 阅读： references/selection-mode.md

```
One
```
— 仅允许展开一个项（默认）
```
OneOrMore
```
— 允许多个项展开，至少保留一个展开状态
```
ZeroOrOne
```
— 最多展开一个项，所有项均可折叠
```
ZeroOrMore
```
— 允许多个项展开，所有项均可折叠
决策指南：选择合适的模式

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

📄 阅读： references/appearance-and-styling.md

```
AccentBrush
```
— 高亮颜色
```
HeaderTemplate
```
/
```
ContentTemplate
```
```
AccordionButtonStyle
```
— 展开箭头自定义
```
ItemContainerStyle
```
— 逐项样式设置
启用/禁用动画
SfSkinManager主题

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;

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

场景	实现方式
多区域，同一时间仅展开一个	`SelectionMode="One"` （默认）
允许多个区域展开的FAQ场景	`SelectionMode="ZeroOrMore"`
数据驱动内容	`ItemsSource` + `HeaderTemplate` + `ContentTemplate`
高亮激活项颜色	`AccentBrush`
自定义展开箭头	在 `SfAccordionItem` 上设置 `AccordionButtonStyle`
缓慢的展开/折叠动画	在 `ItemContainerStyle` 中设置 `ExpandableContentControl.Percentage`
跟踪已展开的项	`SelectedItemsChanged` 事件

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

属性	类型	说明
`SelectionMode`	`AccordionSelectionMode`	One / OneOrMore / ZeroOrOne / ZeroOrMore
`SelectedIndex`	`int`	最近选中项的索引
`SelectedItem`	`object`	最近选中项的实例
`SelectedItems`	只读	当前所有选中项的实例
`SelectedIndices`	只读	当前所有选中项的索引
`ItemsSource`	`IEnumerable`	数据集合绑定
`HeaderTemplate`	`DataTemplate`	所有项共享的标题模板
`ContentTemplate`	`DataTemplate`	所有项共享的内容模板
`HeaderTemplateSelector`	`DataTemplateSelector`	逐项设置标题模板
`ContentTemplateSelector`	`DataTemplateSelector`	逐项设置内容模板
`AccentBrush`	`Brush`	项高亮的强调色
`ItemContainerStyle`	`Style`	应用于每个 `SfAccordionItem` 的样式

SfAccordionItem属性：

属性	说明
`Header`	始终可见的项标题
`Content`	项展开时可见的内容
`IsSelected`	`true` = 展开， `false` = 折叠
`IsLocked`	只读； `true` 表示项无法折叠
`AccordionButtonStyle`	展开切换按钮的样式