Grid Layout

Grid は WPF で最も強力で汎用的なレイアウトパネルです。行と列の定義によって子要素を表形式に配置し、比率・固定・自動サイズの組み合わせで複雑なレイアウトを実現できます。

概要

WPF の Grid は行（RowDefinition）と列（ColumnDefinition）を定義して子要素をセルに配置するパネルです。列幅や行高さは固定値（例：100）、自動（Auto）、比率（*）の 3 種類で指定でき、柔軟なレスポンシブレイアウトを実現します。

子要素の配置は Grid.Row と Grid.Column 添付プロパティで指定します（0始まりのインデックス）。Grid.RowSpan と Grid.ColumnSpan でセルをまたいで配置することもできます。

IsSharedSizeScope と SharedSizeGroup を組み合わせると、異なる Grid の列幅を揃えられます。例えば、リストの各行に Grid を使い、全行で同じ列幅を維持したい場合に使用します。

Grid は WPF の UI レイアウトの基礎となるコントロールで、ほぼすべての画面レイアウトに使用されます。フォーム、ダッシュボード、ダイアログのレイアウトなど、複数の要素を整列させる場面で活躍します。

画面キャプチャ

デモしているプロパティ

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

プロパティ	設定値	説明
`Column / Row (Grid attached)`	`int`	複数のセルを持つ Grid で子要素を特定のセルに配置したいときに使います。設定した行・列インデックスのセルに要素が配置されます。デフォルト値は両方とも 0 であり、`Grid.Row`/`Grid.Column` を設定しない要素はすべて 0 行 0 列に配置されて互いに重なり合います。Grid に複数の子要素を置くときは必ず設定漏れがないか確認してください。
`ColumnSpan / RowSpan (Grid attached)`	`int`	ヘッダー行やフッター行が全カラムにまたがる場合、または複数セルを占める大きなコンテンツを配置する場合に使います。設定した値だけ連続するセルを占有し、要素が複数セルにまたがって表示されます。スパン値が定義済みの列数・行数を超えた場合、Grid は超過分を無視して利用可能な最大セル数に黙って制限するため、意図した見た目にならない場合があります。定義している行・列の数と合っているか確認してください。
`ShowGridLines`	`bool`	レイアウトの組み方を確認したい開発・デバッグ時に True にします。点線のグリッド線が表示され、各セルの境界が一目でわかるようになります。ShowGridLines は通常の Border とは異なる専用のレンダリング機構を使っており、見た目を本番 UI のグリッド線として流用することは推奨されません。本番環境では必ず False に戻してください。
`Width / MinWidth / MaxWidth (ColumnDefinition)`	`GridLength / double`	ラベル列に Auto、入力フィールド列に * を組み合わせるなど、列の役割に応じたサイズ戦略を選ぶ際に設定します。`` は残りスペースを比率で分配（2 と 1* なら 2:1）、`Auto` は内容幅に合わせ自動調整、数値は device-independent unit での固定幅を意味します。ScrollViewer や StackPanel の内部など有限の幅が与えられない場所では `*` サイズが 0 に潰れるため、Grid を ScrollViewer の直接の子にする際は注意が必要です。
`Height / MinHeight / MaxHeight (RowDefinition)`	`GridLength / double`	Width/MinWidth/MaxWidth と同様の考え方で行の高さを制御します。`Auto` は内容の高さに合わせて行が伸縮し、`*` は残りの縦スペースを比率分配、数値は固定高さを指定します。ScrollViewer の中で `Auto` 行を使うと、コンテンツが増えるにつれ行が可視領域を超えて伸長しても縦スクロールバーが現れないことがあります。縦スクロールが必要な場合は ScrollViewer を正しく設定しているか確認してください。
`Background (Panel)`	`Brush`	Grid 全体にホバーやクリックのマウスイベントを受け取らせたいときに設定します。`Transparent`（透明）を設定するとパネル全体がヒットテスト可能になり、マウスイベントを受け取れます。`null`（デフォルト）はヒットテストが無効なためクリックや MouseEnter が発生せず、背後の要素にイベントが素通りします。色ではなく透明にしたいが操作は受け付けたい場合は必ず `Transparent` を明示してください。

XAML 使用例

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" MinWidth="100" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </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}" />

  <!-- 2 列にまたがるコンテンツ -->
  <TextBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
           TextWrapping="Wrap" Text="{Binding Notes}" />
</Grid>

主な使用例

フォームレイアウト — ラベル列と入力フィールド列を Auto+* の 2 列で構成する標準的なフォームレイアウトに使用します。
ダッシュボードタイル — 複数のタイルを行列に配置するダッシュボード UI の骨格として使用します。
ダイアログレイアウト — コンテンツエリアとボタンバーを行で分けた標準的なダイアログ構造を実装します。
レスポンシブレイアウト — * サイズと Auto の組み合わせでウィンドウリサイズに対応したレイアウトを実現します。
マルチカラムナビゲーション — 左にナビゲーションツリー、右にコンテンツを配置する 2 ペインレイアウトに使用します。

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

* サイズを活用する — 2* と 1* のように書くと残りのスペースを 2:1 の比率で分配できます。レスポンシブなレイアウトには固定値より * を使います。
ネストを深くしない — Grid をむやみにネストするとパフォーマンスが低下します。可能であれば ColumnSpan/RowSpan を活用して一つの Grid で解決します。
ShowGridLines はデバッグ専用 — レイアウトの確認には ShowGridLines を使いますが、本番ビルドでは必ず False に戻します。
ColumnDefinition/RowDefinition は省略可 — 定義なしの場合、Grid は 1 行 1 列として動作します。全要素が重なる形になるため、重ねてレイアウトしたい場合に活用できます。
Auto の使いすぎに注意 — Auto 行・列は内容に応じてサイズ計算されるため便利ですが、多用すると Measure/Arrange のコストが増えます。固定値や * で十分な箇所はそちらを優先すると、複雑な画面でもレイアウトが安定しやすくなります。
SharedSizeGroup で複数 Grid の列幅を揃える — Grid.IsSharedSizeScope="True" をスコープ要素に設定し、揃えたい ColumnDefinition に同じ SharedSizeGroup 名を付けると、スコープ内の複数 Grid で列幅が自動的に同期されます。リストの各行に Grid を使いラベル列を揃えたい場合などに有効です。

ソースコード

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

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