Chapter 13

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

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.10に更新

余白設定

コントロールの外側の余白

ボタンの余白を設定します。
ドキュメントアウトラインでButtonを選択し、Ctrlキーを押しながらもう1つのButtonを選択して2つのボタンを選択状態にします。

プロパティウィンドウのレイアウト > Marginを左余白0、右余白15、上余白10、下余白15に設定します。
XAMLでは左、上、右、下の順に0,10,15,15と表現します。

コントロールの内側の余白

プロパティウィンドウのレイアウトカテゴリのボタンを押して展開します。

Paddingを左余白20、右余白20、上余白5、下余白5に設定します。
XAMLでは左、上、右、下の順に20,5,20,5、または左右、上下の順に20,5と表現します。

Paddingはコントロールの中のコンテンツとの間隔です。

操作性向上

最後に、ドキュメントアウトラインでWindowを選択し、プロパティウィンドウの共通カテゴリのResizeModeCanResizeWithGripに設定します。
これで画面の右下にサイズ変更用のグリップが表示され、ウィンドウの縁をドラッグするよりもサイズ変更がやりやすくなります。

実行

実行してみます。

右下のグリップをつかんでサイズ変更してみます。

最大化ボタンにマウスカーソルを移動し、スナップレイアウトを使ってみます。

↓↓↓↓↓

画面修正

ボタンのテキストを変更してみます。

登録今すぐ登録!に、キャンセルキャンセルしますに書き換えます。

備考ラベルの上にチェックボックスを追加してみます。
備考ラベルの行頭にテキストカーソルを位置付け、

以下をコピーして貼り付けます。

<CheckBox Content="何かのオプション" IsChecked="True" Margin="15,10,15,0" />

細かいサイズ調整や位置調整をしなくても簡単に画面変更できました。