UniformGrid Layout

UniformGrid はすべてのセルが同じサイズになるシンプルなグリッドパネルです。行数・列数を指定すると、子要素を均等に配置します。カレンダー・ゲームボード・タイルグリッドなどに使われます。

概要

WPF の UniformGrid は Panel を継承したシンプルなグリッドパネルです。Rows と Columns を設定すると、全セルが同じサイズで子要素を均等に配置します。通常の Grid とは異なり、個別の行・列定義が不要です。

Rows と Columns の両方を設定しない場合、UniformGrid は子要素の数に基づいて自動的に行数・列数を計算します（正方形に近い形になるよう算出）。子要素が 4 つなら 2×2、9 つなら 3×3 という具合です。

FirstColumn プロパティを設定すると、最初の行の先頭を空のセルで埋めてオフセットを作ることができます。例えば週カレンダーで月の最初の日が水曜日ならば FirstColumn="3"（0始まりで日月火水...の水=3）と設定します。

UniformGrid は動的なセル数には対応していません（子要素数が変わると再計算が必要です）。また、GridSplitter のようなリサイズ機能もありません。シンプルな均等グリッドが必要なケースに特化した軽量なパネルです。

画面キャプチャ

デモしているプロパティ

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

プロパティ	設定値	説明
`Rows`	`int (0 = auto)`	カレンダーの週行数や三目並べの盤など、行数を明示的に決めたいときに設定します。設定した行数でグリッドが固定され、子要素がその行数内に均等に収まります。0（デフォルト）は子要素の数と Columns の値から自動計算されます。Rows と Columns の積より子要素が多い場合、はみ出た子要素は表示されないため子要素の数を管理してください。
`Columns`	`int (0 = auto)`	1 週間を 7 列で表す週カレンダーや、4 列タイルのダッシュボードなど、列数を固定したいときに設定します。設定した列数で全子要素が均等幅に並びます。0（デフォルト）は Rows の値と子要素数から自動計算されます。Columns のみ指定し Rows を 0 のままにすると、行数は自動計算されるため子要素が増えても列数は維持されます。
`FirstColumn`	`int`	月の最初の日が週の途中から始まるカレンダーで、最初の行に空セルのオフセットを作りたいときに使います。設定した数だけ先頭行の前方に空のセルが挿入され、各日付を正しい曜日列に配置できます。FirstColumn の値が Columns の値以上の場合は無視されるため、月初の曜日インデックス（0=日曜日）が Columns 未満に収まるよう管理してください。

XAML 使用例

<!-- 3x3 のゲームボード（三目並べ） -->
<UniformGrid Rows="3" Columns="3" Width="150" Height="150">
  <Button Content="X" />
  <Button Content="O" />
  <Button />
  <Button Content="X" />
  <Button />
  <Button Content="O" />
  <Button />
  <Button Content="X" />
  <Button />
</UniformGrid>

<!-- 均等タイルグリッド（Columns のみ指定） -->
<UniformGrid Columns="4">
  <Border Background="CornflowerBlue" Margin="2">
    <TextBlock Text="タイル 1" HorizontalAlignment="Center" />
  </Border>
  <!-- ... その他のタイル -->
</UniformGrid>

主な使用例

カレンダーグリッド — 月間カレンダーの 7 列（日〜土）× 複数行のセルを UniformGrid で実装します。FirstColumn で月初の曜日に対応します。
ゲームボード — 三目並べや 15 パズルなどのゲームの均等グリッドを実装します。
ダッシュボードタイル — 同じサイズの KPI タイルを均等に並べたダッシュボードグリッドを作成します。
カラーパレット — カスタムカラーピッカーで色のタイルを均等に並べたパレットを実装します。
画像ギャラリー — サムネイル画像を均等なグリッドで表示するギャラリーに使用します。

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

動的なアイテム数には WrapPanel を検討する — アイテム数が動的に変わる場合は UniformGrid より WrapPanel+ItemsControl の組み合わせが柔軟です。
Rows と Columns の両方を指定する — 一方のみ指定した場合、もう一方は子要素数から計算されます。明示的にサイズを制御したい場合は両方設定します。
Grid との使い分け — 列幅・行高が均等でない場合や、GridSplitter などの高度な機能が必要な場合は Grid を使います。均等セルが必要なシンプルな場合に UniformGrid が適しています。
ItemsControl のパネルとして使う — ItemsControl の ItemsPanel に UniformGrid を設定すると、コレクションのアイテムを均等グリッドで表示できます。
セルサイズは親のサイズに依存する — UniformGrid は親コンテナのサイズを行数・列数で均等に分割してセルサイズを決めます。親に明示的な Width/Height が設定されていない場合、セルサイズが予期せず 0 になることがあります。ScrollViewer など無限サイズを与えるコンテナに入れる場合は明示的にサイズを設定してください。
セル内の子要素はデフォルトで Stretch — UniformGrid の子要素は HorizontalAlignment と VerticalAlignment がデフォルトで Stretch のため、セル全体を埋めます。意図的に左揃えや中央揃えにしたい場合は子要素側で HorizontalAlignment/VerticalAlignment を明示的に設定してください。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

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