Chapter 12

ステップ3-4: レイアウトの基礎4

Apterygiformes-zenn
Apterygiformes-zenn
2022.02.25に更新

プロジェクトの作成

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

GridとStackPanelの組み合わせ

概要

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

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

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

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

行分割

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

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

ボタンエリア作成

ボタンの配置

下のStackPanelButtonを2つ配置します。

ButtonContent登録, キャンセルに書き換えます。

下のStackPanelHorizontalAlignmentRightに設定します。

Auto指定

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

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

入力エリア作成

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

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

LabelMargin15,10,15,0(左, 上, 右, 下指定)に設定します。
TextBoxTextを空にし、
Margin15,0,15,0(左, 上, 右, 下指定)または15,0(左右, 上下指定)に設定します。

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

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

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

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

LabelContentをそれぞれ名前年齢備考に編集し、
年齢TextBoxHorizontalAlignmentStretchからLeftに変更し、Width50に設定します。

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

画面サイズ調整

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

まとめ

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