syncfusion-maui-toolkit-accordion

Syncfusion .NET MAUI Accordion の実装

Syncfusion .NET MAUI Accordion（SfAccordion）を実装するための包括的なガイドです。項目を1つまたは複数同時に展開・折りたたみできる、縦方向に折りたたみ可能なパネルコントロールです。

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

次のような場合に、このスキルを使用してください。

• .NET MAUI で折りたたみ可能なコンテンツセクションを実装する
• 従業員ディレクトリ、連絡先リスト、詳細レコードを表示する
• 回答を展開できる FAQ セクションを作成する
• グループ化されたオプションを含む設定パネルを構築する
• 展開・折りたたみ動作を備えた階層データを表示する
• 縦方向の展開パネルを実装する
• Accordion 項目を ObservableCollection データソースにバインドする
• テーマや Visual States で Accordion の外観をカスタマイズする
• 検証を伴う展開・折りたたみイベントを処理する

コンポーネントの概要

.NET MAUI Accordion は、各項目がヘッダーとコンテンツセクションで構成される、縦方向に積み重ねられたインターフェイスを提供します。ユーザーはヘッダーをタップしてコンテンツを展開・折りたたみできます。階層情報、FAQ、従業員ディレクトリなど、スペースを効率的に使ってグループ化されたコンテンツを表示する必要があるあらゆる場面に適しています。

• 1つまたは複数の項目を展開するモード
• .NET MAUI BindableLayout によるデータバインディング
• アニメーションのカスタマイズ（継続時間とイージング）
• 多彩な外観のカスタマイズ（色、アイコン、Visual States）
• 展開・折りたたみ操作のイベント処理
• プログラムによるスクロール制御

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

はじめに

📄 読む: references/getting-started.md

• Syncfusion.Maui.Toolkit NuGet パッケージのインストール
• ConfigureSyncfusionToolkit() によるハンドラーの登録
• XAML と C# での基本的な SfAccordion の設定
• Header と Content を含む AccordionItem の作成
• 展開モード：Single、Multiple、MultipleOrNone
• アニメーションの継続時間とイージングのカスタマイズ
• 項目間隔の設定
• 自動スクロール位置の設定
• プログラムによるスクロールのための BringIntoView メソッド

BindableLayout によるデータバインディング

📄 読む: references/data-binding.md

• INotifyPropertyChanged を実装したデータモデルの作成
• Accordion 項目用の ObservableCollection の設定
• BindingContext の設定
• データバインディングのための BindableLayout.ItemsSource の使用
• 項目の外観を定義する BindableLayout.ItemTemplate の設定
• IsExpanded プロパティによる双方向バインディング
• コレクションからの動的な項目生成
• データバインディングを使用した従業員リストの完全な例

外観のカスタマイズ

📄 読む: references/appearance-customization.md

• ヘッダーアイコンの位置（Start、End）
• ヘッダーの背景色のカスタマイズ
• アイコンの色のカスタマイズ
• 状態に応じたスタイル設定のための Visual State Manager
  • Expanded 状態と Collapsed 状態
  • キーボード操作用の Focused 状態
  • ホバー効果用の PointerOver 状態
  • Normal 状態のスタイル設定
• Visual State のスタイル設定に関する完全な例

イベントとインタラクション

📄 読む: references/events.md

• Expanding イベント（キャンセル可能）
• Expanded イベント（完了通知）
• Collapsing イベント（キャンセル可能）
• Collapsed イベント（完了通知）
• イベント引数：Cancel プロパティと Index プロパティ
• 展開・折りたたみ前の検証
• 一般的なイベント処理パターン

高度な機能

📄 読む: references/advanced-features.md

• 自動スクロール位置（Top、MakeVisible）
• プログラムによるスクロールのための BringIntoView
• Height=Auto を使用する場合の Grid レイアウトに関する考慮事項
• HorizontalOptions と VerticalOptions のベストプラクティス