syncfusion-wpf-accordion

SfAccordion（WPF）の実装

このスキルを使用するタイミング

次のような場合にこのスキルを使用します。

• WPF で折りたたみ／展開可能なセクション UI を構築する
• 必要に応じて展開できる、カテゴリ別のコンテンツを表示する
• Outlook 風、FAQ 風、または設定パネルのアコーディオンレイアウトを作成する
• ビジネスオブジェクトのコレクションをアコーディオンにバインドする
• 同時に展開できる項目数を制御する
• アコーディオン項目のヘッダー、コンテンツ、展開ボタン、またはアニメーションをカスタマイズする

---

コンポーネントの概要

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

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照と NuGet のセットアップ
• XAML および C# でのコントロールの作成
• Header と Content を設定した基本的な SfAccordionItem
• SfSkinManager を使用したテーマ

項目の追加

📄 参照： references/populating-items.md

• Items コレクションを使用した宣言的な項目
• ItemsSource を使用したデータバインディング
• Model + ViewModel + ObservableCollection
• ヘッダーを簡単に設定できる DisplayMemberPath
• HeaderTemplate / HeaderTemplateSelector
• ContentTemplate / ContentTemplateSelector

項目の選択

📄 参照： references/selecting-items.md

• SelectedIndex — インデックスで選択する
• SelectedItem — インスタンスで選択する（TwoWay バインディング）
• SelectedItems / SelectedIndices — 読み取り専用コレクション
• 個々の項目の IsSelected
• SelectAll() / UnselectAll() メソッド
• SelectedItemsChanged / SelectionChanged イベント

選択モード

📄 参照： references/selection-mode.md

• One — 1 つだけ展開（デフォルト）
• OneOrMore — 複数展開でき、少なくとも 1 つは必須
• ZeroOrOne — 最大 1 つまで展開でき、すべて折りたたみ可能
• ZeroOrMore — 複数展開でき、すべて折りたたみ可能
• モード選択ガイド：適切なモードの選び方

外観とスタイル

📄 参照： references/appearance-and-styling.md

• AccentBrush — ハイライト色
• HeaderTemplate / ContentTemplate
• AccordionButtonStyle — 展開矢印のカスタマイズ
• ItemContainerStyle — 項目ごとのスタイル設定
• アニメーションの有効化／無効化
• SfSkinManager のテーマ

---

クイックスタート

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;

---

よくあるパターン

シナリオ	方法
複数のセクションを一度に 1 つずつ開く	SelectionMode="One"（デフォルト）
複数を開ける FAQ	SelectionMode="ZeroOrMore"
データ駆動型のコンテンツ	ItemsSource + HeaderTemplate + ContentTemplate
アクティブな項目の色を強調する	AccentBrush
展開矢印をカスタマイズする	SfAccordionItem の AccordionButtonStyle
展開／折りたたみのアニメーションを遅くする	ItemContainerStyle の ExpandableContentControl.Percentage
展開中の項目を追跡する	SelectedItemsChanged イベント

---

主なプロパティ

プロパティ	型	説明
SelectionMode	AccordionSelectionMode	1つ／1つ以上／0または1つ／0個以上
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	展開切り替えボタンのスタイル