GroupBox Display

GroupBox は枠線とヘッダーを持つコンテナコントロールです。関連するコントロールを視覚的にグループ化するために使用され、フォームのセクション分けによく使われます。

概要

WPF の GroupBox は HeaderedContentControl を継承したコントロールで、タイトル（Header）付きの枠線でコンテンツを囲みます。フォームの入力セクションや設定グループを視覚的に区切る際に使用されます。

Header プロパティには文字列だけでなく任意の WPF 要素を配置できます。アイコン付きタイトルや、折りたたみボタンを含む複合ヘッダーなど、リッチな表示が可能です。

Content プロパティには StackPanel や Grid などのパネルを配置して、複数のコントロールをグループとして収納します。GroupBox 自体は 1 つの子要素しか持てないため、通常は Grid や StackPanel をルートコンテナとして使います。

Expander と GroupBox の使い分け：GroupBox は常にコンテンツを表示する固定コンテナで、Expander はユーザーが折りたたみを切り替えられる点が異なります。折りたたみが不要なシンプルなグループ化には GroupBox が適しています。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`Header / HasHeader (HeaderedContentControl)`	`object / bool`	ヘッダー部分に表示するコンテンツを設定します。文字列が一般的ですが、アイコン＋テキストの StackPanel やバッジ付きタイトルなど任意の WPF 要素も設定可能です。HasHeader は Header が設定されているかどうかの読み取り専用プロパティです。Header に複数行のテキストを直接設定することはできず、複数行を表示するには TextBlock を Header に配置して TextWrapping を設定します。ヘッダーのフォントやスタイルをカスタマイズするには HeaderTemplate や Style を定義し、直接プロパティで変更するのではなくテンプレートで制御してください。
`HeaderStringFormat`	`string`	Header がシンプルなオブジェクトの場合の表示フォーマット文字列を設定します。例：'Selected: {0}' のように指定します。
`Content (ContentControl)`	`object`	GroupBox 内部に表示するコンテンツを設定します。通常は Grid や StackPanel などのパネルを指定して複数の子コントロールを収納します。GroupBox 自体は 1 つの子要素しか持てないため、複数コントロールを配置するにはパネルをルートとして使います。Content に配置したコントロールは GroupBox の DataContext を自動で継承するため、ViewModel のバインドは通常そのまま機能します。
`BorderBrush / BorderThickness (Control)`	`Brush / Thickness`	GroupBox の枠線の色と太さを設定します。デフォルトではテーマに合った枠線が表示されます。カード型 UI やアプリのカラーテーマに合わせてカスタマイズする際に使用し、強調したいグループには太めの BorderThickness を設定することで視覚的な優先度を表現できます。アプリ全体で統一した見た目にするには、Style リソースとして定義して個別設定を避けることを推奨します。
`Background / Foreground (Control)`	`Brush`	GroupBox の背景色とテキスト（ヘッダー）の前景色を設定します。Background を設定するとグループ内のコンテンツ領域全体に色が適用されます。視覚的なセクション分けを強調するために薄い背景色を設定することがあります。ただし Background の色がコンテンツ内のコントロールに継承されるため、子コントロールの見た目が変わることに注意します。
`Padding (Control)`	`Thickness`	GroupBox の内側の余白を設定します。Padding を設定すると枠線とコンテンツの間にスペースが生まれ、コンテンツが枠線に密着して窮屈に見えることを防ぎます。GroupBox 自体の Padding が効かない場合は、Content 直下のパネルに Margin を設定することで同等の効果が得られます。テーマによっては GroupBox の Padding が正しく反映されないことがあるため、レイアウト確認を行ってから採用してください。

XAML 使用例

<GroupBox Header="ユーザー情報" Margin="8">
  <Grid Margin="8">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="名前:" />
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
    <Label Grid.Row="1" Grid.Column="0" Content="メール:" />
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Email}" />
  </Grid>
</GroupBox>

主な使用例

フォームのセクション分け — 「基本情報」「連絡先情報」「支払情報」などのセクションを GroupBox で区切ります。
設定の論理グループ — 設定画面で関連する設定項目をまとめてグループとして表示します。
オプション選択グループ — RadioButton グループを GroupBox で囲み、選択肢のグループであることを視覚的に示します。
統計情報パネル — 集計値や KPI 指標をグループごとに GroupBox で表示するダッシュボードに使用します。
ウィザードのステップ情報 — ウィザードの各ステップで必要な入力項目を GroupBox でグループ化します。

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

内側に Padding を設定する — GroupBox の Content 直下のパネルに Margin を設定して、枠線とコンテンツの間に適切な余白を作ります。
Header には簡潔なラベルを — Header は短い説明的なテキストが最適です。長すぎるとレイアウトが崩れる場合があります。
折りたたみが必要なら Expander を使う — コンテンツの表示・非表示を切り替える必要がある場合は GroupBox ではなく Expander を使います。
RadioButton との相性が良い — 排他的な選択肢（RadioButton グループ）を GroupBox で囲むと、選択グループの範囲が視覚的に明確になります。
スタイルで統一感を出す — アプリ全体の GroupBox スタイルをリソースで定義し、枠線の色・太さ・ヘッダーフォントを統一します。

ソースコード

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

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