Chapter 20

ステップ5-2: 画面作成 続き1

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.27に更新

コンボボックスの設定

左のComboBoxを選択し、名前をTimeInputIsEditableをON、Width100、左右の余白を10、上下の余白を0、フォントをConsolasに設定します。

Items...ボタンを押します。

一覧からComboBoxItemを選択します。

追加ボタンを押し、Content09:00と入力します。

追加ボタンを押し、Content12:00と入力します。
同様の手順で15:00, 17:30を追加し、OKボタンを押します。

ComboBoxのドロップダウンリストの中身ができました。

ラベルの設定

ComboBoxの上にあるLabelContent時刻(_T)に設定します。
TargetComboBoxの名前であるTimeInputに設定します。

ラベルの共通設定

画面上に2つあるLabelに対し、同じ余白設定をします。

Windowの開始タグとGridの開始タグの間に、<Window.Resoまで入力するとResourcesが候補に出てくるので選択します。

>を入力すると閉じタグが自動入力されます。

Enterで改行し、<Style TargetType="Label">のタグを入力します。

Styleタグの中でsetと入力してTABキーを押します。
そうするとSetterタグが入力されます。

プロパティ名のBackgroundの部分が選択状態になっているので、そのままMarと入力します。

候補でMarginが選択状態になるため、TABで確定します。

もう一度TABを押すと、選択状態がRedの部分に移動します。

そのまま10,15,10,2と入力します。
これは左余白10, 上余白15, 右余白10, 下余白2という意味です。

Enterで確定するとSetterタグの外にカーソルが設定されます。

Enterで改行し、setと入力して

TABを入力します。
さきほどと同様に今度はPaddingプロパティを設定します。
Paまで入力でPaddingが選択状態になっているため、TABで確定、
TABで選択状態をRedに移動、0を入力し、Enterで確定します。

この画面上に出てくるすべてのLabelコントロールにMarginPaddingの設定値が適用されます。

ボタンの共通設定

Labelと同様にButtonの共通スタイルを書きましょう。
Margin10,15,10,0を設定してください。

ボタンの個別設定

1つ目のButtonの名前をAddButtonContent追加(_A) →IsDefaultをONにします。
IsDefaultが有効になっているボタンは、そのボタンにフォーカスがないときでもEnterを押すとボタンが押されたことになります。

2つ目のButtonの名前をRemoveButtonContent削除(_R) ←にします。

Gridのレイアウト仕上げ

Gridの1列目のHeightAutoに設定します。

2列目のHeight×ボタンを押して設定をクリアします。

Windowの設定

WindowResizeModeCanResizeWithGripTitleアラームに設定します。

Height250Width300に設定します。

BackgroundMistyRoseに設定します。

これでメイン画面の見た目部分は完成しました。

復習ポイント

  • XAML上でのコンボボックスアイテムの設定
  • コントロールの既定スタイル
  • デフォルトボタン