Expander Display

折りたたんだ内容にかかる負担

Expander は HeaderedContentControl を継承しています。Content が表示したり隠したりする内容で、折りたたんだ内容の負担は、思われているより小さいものです。最初から折りたたんだ Expander では、内容の要素は作られて Loaded も発生しましたが、測られませんでした。中に置いた 1000 項目の ListBox は ListBoxItem を 1 つも作りませんでした。この構成では、内容の要素そのものは作られて読み込まれましたが、一覧の項目のコンテナーは、展開するまで作られも測られもしませんでした。展開すると内容が測られ、ListBox は 11 個の項目を作り、内容にはもう一度 Loaded が発生しました。内容の Loaded で重い処理を始めてはいけません。折りたたんでいる間にも動き、展開したときにもう一度動きます。

開閉にアニメーションはない

IsExpanded は内容を表示するかどうかで、既定値は False です。既定で TwoWay にバインドされるので、バインドしたビューモデルのプロパティは利用者のクリックに追従します。デモアプリは Mode を指定せずにチェックボックスにバインドしているので、両者は連動します。実際のマウスで見出しをクリックすると、Expander が開き、チェックボックスにチェックが付き、Expanded が発生しました。チェックを外すと閉じて、Collapsed が発生しました。

既定のテンプレートの見出しは、HeaderSite という名前の ToggleButton です。テンプレートには表示状態のグループ（VisualStateGroup）もアニメーションもなく、IsExpanded・ExpandDirection・IsEnabled のトリガーで切り替えています。IsExpanded を False にすると、内容はその場で Collapsed になりました。アニメーションを付けるなら独自のテンプレートにします。

テンプレート、クリック、折りたたんだ内容。.NET 10 / Windows 11 で計測。

見出しと内容の配置

ExpandDirection は、見出しに対して内容をどちらに出すかで、既定値は Down です。80 × 40 の内容で試すと、Down では見出しが上、内容がその下に、Up では内容が見出しの上に来ました。Left と Right では、見出しは内容の横の幅 49、高さ 39 の列になり、文字は横書きのまま列の下の方に置かれました。内容は Left で左、Right で右でした。

読み取り専用の HasHeader は、Header があるかどうかを表します。Header が null のとき HasHeader は False でしたが、矢印の付いた見出しの ToggleButton は高さ 19 で表示されたままでした。消すには独自のテンプレートが必要です。

内容だけでなく見出しにも届くプロパティ

Expander に設定した Control のプロパティは、内容だけでなく見出しにも効きます。

• Padding — Padding="20" では、見出しの高さが 19 から 59 になり、内容もその分下へ移りました。
• フォントの各プロパティ — Expander に FontWeight="Bold" を設定すると、見出しの文字も内容の TextBlock も太字になりました。
• Foreground — Red では、見出しと内容の両方の文字が赤になりました。
• Background — 見出しと内容の両方の後ろに塗られます。幅 200 の Expander で、塗られた範囲は 200 × 38.96 で見出しと内容を含んでいました。Background 自体は継承されるプロパティではないので、色が付くのは内容の後ろの領域です。見出しと内容をまとめて色付けするなら、Expander に設定します。
• BorderBrush / BorderThickness — 見出しを含めた Expander 全体を囲む枠です。Padding を付けずに単独で測ると、BorderThickness="5" では見出しが各辺から 5 内側へ移って (1, 1) から (6, 6) になり、内容も 5 下がりました。

ExpandDirection、見出し、Control のプロパティ。.NET 10 / Windows 11 で計測。

デモアプリで試す

デモアプリの Expander のページには、ExpandDirection、IsExpanded、見出し、内容と、Control のプロパティ（Padding、フォントの各プロパティ、Background、Foreground、枠）の欄があります。見出しの欄は、空のテキストボックスを null に変換します。各欄の下の「Show Code」リンクで、その欄の XAML を表示できます。次の XAML は、IsExpanded の欄（ExpanderUsageControl.xaml）から、スタイルと周囲の GroupBox を省き、名前空間の宣言を加えたものです。

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <CheckBox x:Name="IsExpandedCheckBox" VerticalContentAlignment="Center" Content="IsExpanded" />

  <Expander x:Name="IsExpandedExpander"
            Content="CONTENT"
            Header="Expander"
            IsExpanded="{Binding IsChecked, ElementName=IsExpandedCheckBox}" />
</StackPanel>

関連するコントロールと記事

• GroupBox — 常に表示する内容を、見出しと枠で囲みます。
• ToggleButton — 見出しを構成している要素です。
• TreeView — 少数の区切りではなく、階層になった項目を畳みます。

ソースコードと計測の方法

このページの挙動の記述は、すべて .NET 10 / Windows 11 で実際に動かして確かめたものです。計測には、このサイトのスクリーンショット生成ツールの ExpanderDemoScene を使いました。見出しのクリックは、計測用のウィンドウの上で実際のマウスを使って行いました。位置は Expander の左上からのもので、大きさは計測したマシンでの値です。

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