Expander Display

Expander はユーザーが展開・折りたたみを切り替えられるコンテナコントロールです。ヘッダーは常に表示され、コンテンツエリアはトグルボタンのクリックで表示・非表示が切り替わります。

概要

WPF の Expander は HeaderedContentControl を継承したコントロールで、ヘッダー部分とコンテンツ部分から構成されます。ヘッダーには矢印（トグルボタン）が表示され、クリックすると IsExpanded が切り替わってコンテンツの表示・非表示が変わります。

ExpandDirection プロパティでコンテンツが展開される方向を設定できます。デフォルトは Down（下方向）で、ヘッダーの下にコンテンツが現れます。Up、Left、Right も指定可能です。

MVVM では IsExpanded を ViewModel の bool プロパティに TwoWay バインドすることで、プログラムから展開・折りたたみを制御できます。アプリの状態として展開状態を保存・復元する場合にも使用します。

スタイルをカスタマイズすることで、アコーディオン UI（複数の Expander を縦に並べて一つだけ展開できるようにしたもの）を実装できます。WPF にはアコーディオンコントロールは標準では含まれていませんが、Expander の組み合わせで実現できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。アプリ上でリアルタイムに各プロパティを変更してその動作を確認できます。

プロパティ	設定値	説明
`IsExpanded`	`bool`	True のときコンテンツが表示（展開）されます。False のときは折りたたまれ、ヘッダーのみ表示されます。TwoWay バインドで ViewModel から展開状態を制御でき、変更時には Expanded / Collapsed ルーティングイベントが発生するためイベントハンドラでの追加処理も可能です。展開状態をアプリ設定として保存・復元したい場合にも TwoWay バインドが有効です。注意点として、コンテンツは折りたたまれていても視覚ツリー上に存在し続けるため、データバインドされたグリッドや重い UI はユーザーが開く前から描画リソースを消費します。
`ExpandDirection`	`Down / Up / Left / Right`	コンテンツが展開される方向を設定します。Down（デフォルト）はヘッダーの下にコンテンツが現れ、Up はヘッダーの上方向、Left は左、Right は右に展開します。Up は画面下部にある固定ツールバーからコンテンツが上方向に展開する場合に便利です。Left や Right を指定するとヘッダーの向きも変わり、矢印インジケーターやテキストの配置がデフォルトスタイルでは意図どおりにならない場合があります。Left/Right で見た目を整えるにはカスタムスタイルが必要になることを念頭に置いてください。
`Header / HasHeader (HeaderedContentControl)`	`object / bool (ReadOnly)`	ヘッダー部分に表示するコンテンツを設定します。文字列だけでなく、アイコン＋テキストのパネルや件数バッジなど任意の WPF 要素を配置したリッチなヘッダーも作成できます。HasHeader は Header が設定されているかどうかを示す読み取り専用プロパティで、Header が設定されると自動的に True になります。ただし Header に null を設定してもヘッダー領域（矢印トグルボタンのエリア）は完全には消えません。ヘッダー自体を非表示にするにはカスタム ControlTemplate が必要です。
`Content (ContentControl)`	`object`	展開時に表示するコンテンツを設定します。任意の WPF 要素を配置できます。コンテンツは折りたたみ時でも論理ツリー上は存在していますが、視覚的に非表示になります。重要な点として、コンテンツは Expander が初期化された時点で生成され、ユーザーが初めて展開するまで遅延されません。コンテンツにデータベースクエリを起動するデータバインドコントロールや重い初期化コードがある場合、ユーザーがパネルを開く前から実行されます。重い処理が必要な場合は遅延初期化パターン（IsExpanded のトリガーで DataTemplate を切り替えるなど）を検討してください。
`BorderBrush / BorderThickness (Control)`	`Brush / Thickness`	Expander の枠線の色と太さを設定します。デフォルトではテーマカラーの細い枠線が表示されます。カード型 UI やテーマに合わせた Expander を実装する際に BorderBrush と BorderThickness をカスタマイズすることで、デザインの統一感を高められます。アプリ全体に統一したスタイルを適用するにはリソースに Style を定義し、各 Expander に個別設定するのではなくスタイルで一括管理することを推奨します。

XAML 使用例

<Expander Header="詳細設定" IsExpanded="{Binding IsAdvancedExpanded, Mode=TwoWay}"
           ExpandDirection="Down">
  <StackPanel Margin="16,8">
    <CheckBox Content="デバッグログを有効にする"
              IsChecked="{Binding EnableDebugLog}" />
    <CheckBox Content="詳細なエラー情報を表示する"
              IsChecked="{Binding ShowDetailedErrors}" />
    <TextBox Text="{Binding LogPath}" />
  </StackPanel>
</Expander>

主な使用例

詳細設定の折りたたみ — 基本設定は常に表示し、上級者向けの詳細設定を Expander で折りたたんで初期非表示にします。
アコーディオン UI — FAQ や設定カテゴリを複数の Expander で表現し、必要な項目だけ展開して見る UI を実装します。
フォームのセクション分け — 長いフォームを複数のセクションに分けて Expander で管理し、必要なセクションのみ展開して入力します。
サイドバーのパネル — サイドバーに複数のカテゴリパネルを Expander で折りたたみ可能にし、必要なパネルだけ展開して使います。
コードサンプルの表示 — ドキュメント UI でコードサンプルを折りたたみ可能にして、画面の占有スペースを最小化します。

ヒントとベストプラクティス

初期状態を適切に設定する — IsExpanded の初期値を ViewModel で設定し、ユーザーが最初に見るべきセクションが開いた状態で表示されるようにします。
展開状態を永続化する — IsExpanded を設定ファイルに保存・復元することで、前回のセッションで開いていたパネルを次回も同じ状態で表示できます。
アニメーション — Expander は標準でアニメーションなしですが、ControlTemplate をカスタマイズしてアコーディオンアニメーションを追加できます。
コンテンツの遅延初期化 — コンテンツは折りたたまれていても論理ツリー上に存在するため、重い処理が必要な場合は IsExpanded の変化をトリガーに遅延初期化します。
Header にもリッチコンテンツを — Header プロパティには文字列だけでなく、アイコン＋テキストのパネルや件数バッジなどを配置してリッチなヘッダーを実現できます。
コンテンツの遅延ロード — IsExpanded が True になったときに初めてコンテンツを生成するには、bool フラグを ViewModel に持ち DataTemplate を切り替えるパターンが有効です。展開前は軽量なプレースホルダーを表示し、初回展開時のみ重い UI を生成することでアプリ起動時のパフォーマンスを改善できます。
展開・折りたたみアニメーション — 実装時は、Height を 0 から Auto へ直接アニメーションできない点に注意します。Storyboard の対象には Grid の RowDefinition の Height や ScaleTransform など、数値で補間できるプロパティを選ぶと安定して実装できます。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で Expander のソースコードを見る →