Chapter 19

ステップ5-1: アラームアプリ

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.25に更新

概要

アラームを作ります。こんなイメージです。

  • 左上の時刻コンボボックスに時刻を入力するかドロップダウンから時刻を選択し、追加ボタンを押すと右の一覧に登録されます。
  • アラーム一覧に登録された時刻が来るとメッセージが表示され、一覧から該当時刻は削除されます
  • メッセージはスクリーン全体を覆う半透明ウィンドウで、メッセージ表示時にシステムサウンドを鳴らします。
  • ミュートチェックボックスをONにしているとシステムサウドは鳴りません。
  • アラーム一覧で選択している時刻を削除ボタンで削除できます。

プロジェクトの作成

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

メイン画面の作成

レイアウト概要

まずGridを左側のコンボボックスやボタンを配置する列と右側の一覧を配置する列、そしてミュートチェックボックスを配置する行に分けます。

Gridの1列目にStackPanel、2列目にGridを配置します。

このGridはラベルと一覧を別の行に配置するため、2行にします。

コントロールの配置・設定

まずはざっくりGridを分割します。後で調整するのでここはざっくりでよいです。

ツールボックスからStackPanelをデザイナーのGrid左上のセルにドラッグ&ドロップします。
ツールボックスのGridをクリックし、デザイナーのGrid右側の2行を含むように対角線上にドラッグします。

GridGrid.Column="1", Grid.RowSpan="2"になっているでしょうか。
失敗したら削除して配置しなおしてください。
Gridを右クリックし、レイアウト > すべてリセットを選択します。
これで子Gridが右の列全体に広がります。

Gridの💡からRowDefinitions...を選択し、RowDefinitionを2つ追加します。

↓↓↓↓↓

ツールボックスからLabel, ComboBox, Button, Buttonの順でStackPanelにドラッグ&ドロップします。
Grid左下のセルにCheckBoxをドラッグ&ドロップします。

CheckBoxレイアウト > すべてリセットした後、Margin10,15に、名前をMuteに、Contentミュート(_M)に設定します。

Grid2行目の中身が完成したため、Gridの行高さを調整します。
XAMLで親Grid2つ目のRowDefinitionを選択し、プロパティウィンドウでHeightStarからAutoに変更します。

↓↓↓↓↓

ついでに1つ目のRowDefinitionHeight×でリセットしておきます。

↓↓↓↓↓

右側の子Grid上段にLabelを、下段にListBoxを配置します。

ListBoxの名前をAlarmList、左右の余白を10、上余白を0、下余白を15に設定し、
フォントを等幅フォントのConsolasに設定します。

XAMLのd:ItemsSource=...ItemsCount15にします。
デザイナーのリスト内容が15個になりました。
これはデザイン時に画面イメージがわかりやすいように表示されるダミーデータで、実行時には表示されません。

Grid上段のLabelレイアウト > すべてリセットし、Contentアラーム一覧(_L)にします。
Targetプロパティを設定します。
tarまで入力してTargetが候補で選択されたらTABキーを押して確定、

""の中で{bを入力、候補のBindingで確定、
空白をひとつ空け、eを入力、ElementNameで確定します。

ElementName=の部分でaを入力、AlarmListで確定します。

これは、アラーム一覧ラベルのアクセラレータキー(アクセスキー)のターゲットをAlarmListリストボックスにするという意味です。
プログラム実行時、Altキーを押しながらLキーを押すと、AlarmListリストボックスにフォーカスが移動します。
これがTextBlockにはないLabelの機能です。

XAMLで子Gridの1つ目のRowDefinitionを選択し、HeightAutoに設定します。
Gridの行の高さが中のLabelに合わせて縮小し、完成イメージの画面に大分近づいてきました。

復習ポイント

  • ラベルのターゲットプロパティ