概要

レイアウトで最低限覚えておくべきGrid, StackPanel, Margin, Paddingについて詳しく見ていきます。

Gridは、行と列を定義してコントロールを配置する土台として使うものです。
HTMLのTableに似ています。

プロジェクトの作成

新しいプロジェクトの作成でWPFアプリケーションを、プロジェクト名:LayoutSample、フレームワーク:.NET 6.0で作成してください。

Gridで行・列作成

まずは以下のように行、列を作っていきましょう。

列分割

マウス操作で分割

デザイナーでGridを選択し、画面イメージのタイトルバーの付近にマウスカーソルを移動すると、+マークが付きます。

そこでクリックしてください。

そうすると列(カラム)を分割できます。

続いてもう1つ列を分割してください。
これで3列になりました。

コレクションエディターで分割

別のやり方でもやってみます。
Ctrlキーを押しながらZを2回押し、列分割前の状態に戻します。
そして、Gridが選択された状態で💡を選択し、ColumnDefinitionsの横にある...ボタンを押します。

追加ボタンを3回押します。

ColumnDefinitionが3つ追加されたらOKボタンを押します。

3列になりました。

行分割

次は行を分割します。
マウス操作でやる場合は画面イメージの左端付近をクリックします。

💡でやる場合は、RowDefinitionsの...ボタンを押します。

追加を2回押して、OKを押します。
2行になりました。

XAMLのGrid.RowDefinitionsの中のRowDefinitionの数が行数です。2つあるので2行ということです。
Grid.ColumnDefinitionsの中のColumnDefinitionの数が列(カラム)数です。3つあるので3列ということです。

Gridの各セルにコントロール配置

ツールボックスからEllipseをGridの左上のセルの真ん中あたりに(セルの中に納まるよう）ドラッグ＆ドロップします。

配置されたEllipseを右クリックし、レイアウト > すべてリセットを選択します。

ツールボックスでEllipseをクリックし、Gridの1行目の中で2列目～3列目を含むよう、対角線上にドラッグします。

レイアウトですべてリセットをします。

ツールボックスでBorderを3つ、Gridの2行目のそれぞれの列にドラッグ＆ドロップします。

XAMLで1つ目のBorderのBorderBrushの値、Black部分をダブルクリックして選択状態にし、Ctrlキーを押しながらSpaceキーを押してください。
色の候補が出てくるのでBlueを選択してTABかEnterで確定してください。

BorderThicknessの値を5に書き換えてください。

2つ目のBorderはBorderBrushにOrangeを設定してください。
色の候補が出ているときにorまで入力すればOrangeが選択状態になるので確定してください。
3つ目のBorderの色はGreenにしてください。
BorderThicknessは3つとも5にしてください。

列(カラム)はGrid.Columnで指定します。左から0始まりです。
行はGrid.Rowで指定します。上から0始まりです。
既定値の0(Grid.Column="0", Grid.Row="0")は省略可能です。
列のセル結合はGrid.ColumnSpan、行のセル結合はGrid.RowSpanです。
1行(Row=0)・2列目(Column=1)のEllipseが2列分(ColumnSpan=2)、セル結合しています。