プロジェクトの作成

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

GridとStackPanelの組み合わせ

概要

GridとStackPanelを組み合わせて、以下のような登録画面を組み立ててみます。

どう作るかというと、Gridを行分割し、

上の行に縦並びのStackPanelを配置し、その中にコントロールを配置し、

下の行に横並びのStackPanelを配置し、その中にコントロールを配置します。

行分割

まずはGridを2行にしましょう。
ボタンを配置する下の行から先に作っていきます。
ボタンを配置しやすいよう、大雑把に余裕を持たせた行の高さにします。

Gridの上の行と下の行にそれぞれStackPanelを配置し、
下の行はOrientationをHorizontalにします。

ボタンエリア作成

ボタンの配置

下のStackPanelにButtonを2つ配置します。

ButtonのContentを登録, キャンセルに書き換えます。

下のStackPanelのHorizontalAlignmentをRightに設定します。

Auto指定

Gridの下の行の設定をStarからAutoに変更します。

RowDefinitionにHeight="Auto"が設定されました。
Auto指定は中に入っているコントロールのサイズに合わせて自動的に伸縮します。

入力エリア作成

次は上の行、入力エリアを作っていきます。
上のStackPanelにLabelとTextBoxを配置し、TextBoxはレイアウト > すべてリセットします。

TextBoxのTextWrappingを折り返しありのWrapから、折り返しなしのNoWrapに変更します。

LabelのMarginを15,10,15,0(左, 上, 右, 下指定)に設定します。
TextBoxのTextを空にし、
Marginを15,0,15,0(左, 上, 右, 下指定)または15,0(左右, 上下指定)に設定します。

これで下図のように余白が設定されます。

LabelからTextBoxのタグまで行選択し、Ctrl + Cでコピーします。

1つ目のStackPanelの終了タグの行頭にテキストカーソルを移動します。

Ctrl + Vで2回貼り付けます。

LabelのContentをそれぞれ名前、年齢、備考に編集し、
年齢TextBoxのHorizontalAlignmentをStretchからLeftに変更し、Widthを50に設定します。

TextBoxは、入力桁数が極端に少ないもの以外は固定サイズを指定せず、画面幅いっぱいに表示しましょう。

画面サイズ調整

コントロールの配置はひととおり済んだのでWindowを程よいサイズにします。
Heightに300を、Widthに400を設定してください。

まとめ

• Gridの行・列サイズ指定方法には以下があります。
  • 比率のStar
  • Pixel
  • 中身のコントロールに合わせて伸縮するAuto
• StackPanelはOrientationをVertical(既定)にすると中のコントロールが縦並び、Horizontalにすると横並びになります。
• Marginでコントロール間の余白を調整します。