Chapter 05

ステップ1-3: コントロールの編集

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.27に更新

Windowの設定変更


XAMLでWindowタグを選択してください。
右側のプロパティ ウィンドウWindowのプロパティが表示されます。

Titleはじめてのアプリと入力してEnterキーを押してください。
画面のタイトルバーとXAMLのTitleに反映されます。

レイアウトカテゴリのWidth400を、Height250を入力してください。

Buttonの設定変更

デザイナーでボタンを選択します。

💡マーク(推奨されるアクション)が表示されるので選択してください。
そのコントロールでよく利用されるプロパティの一覧ウィンドウがポップアップ表示されます。
Contentプロパティをボタンに書き換えてください。

↓↓↓↓↓

デザイナーでボタンを右クリックし、レイアウト > すべてリセットを選択します。

ButtonのXAML定義からレイアウト関連の記述が消え、ボタンがGrid内いっぱいに表示されました。

次はボタンに余白を空けましょう。
デザイナーでボタンを選択し、💡を選択し、Margin(左)に30を入力してEnterを押してください。
XAMLのMarginの値が30,0,0,0になってデザイナーのボタンの左端に余白ができました。
,区切りの4つの数字は、左、上、右、下の順に値を指定できます。

XAMLを直接編集してみます。
Marginの値を30,0に書き換えてください。
数字2つの指定方法の場合は左右、上下です。

最後にMarginの値を30に書き換えてください。
この指定方法は上下左右すべて同じ値を設定するという意味です。

余白の指定方法おさらい

  1. 左、上、右、下
  2. 左右、上下
  3. 上下左右すべて