Chapter 21

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

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.13に更新

XAMLにコメントを入れる

XAMLもれっきとしたソースファイルなので、コメントを入れて見やすくしましょう。
<!---->の範囲内がコメントになります。

コメントを入れてみましょう。
LabelStyle定義の上で、
<!まで入力すれば候補の!--が選択状態になるので、

TABで確定します。

ラベルの既定スタイルと入力します。

ボタンのスタイルにもコメントを入れてみます。

他のところにもコメントを入れてみます。

#regionコメントを入れてみます。
StackPanelの上で#regionと入力し、

TABを入力します。

コメント内容部分が選択状態になっているので左側と入力します。

Enterを押すと#endregionの行頭にカーソルが移動します。

Altキーを押しながらを押すと現在行の内容が1つ下に移動します。

Altキーを押しながらを押し続けてStackPanelの閉じタグの下まで#endregionを移動してください。
(下まで行きすぎたらAlt + で上に移動します)

同様に子Grid#regionで囲って右側とコメントを入れてください。

regionの範囲は行頭付近にある[-]で折りたたむことができます。

通知画面の作成

時間が来た時に表示する画面を作ります。
ソリューションエクスプローラーでプロジェクトを右クリックし、
追加 > ウィンドウ (WPF)を選択します。

NotifyWindowと入力して追加ボタンを押します。

↓↓↓↓↓

NotifyWindowTitle時間ですに、TopmostをONにします。

半透明にするため、AllowsTransparencyをONにします。
こちらを先に設定すればWindowStyleは連動してNoneになってくれるようです。

Backgroundのアルファ値を85にします。

デザイナーでGridを右クリックし、レイアウトの種類の変更 > Viewboxを選択します。
ツールボックスからTextBlockをデザイナーのVewboxにドラッグ&ドロップします。
TextBlockの名前をMessageに、Margin5に設定します。

TextBlockd:Text="xx:xx になりました"を追加します。
これはステップ5-1で出てきたd:ItemsSourceと同じく、d:付きのプロパティ設定値はデザイン時のみ有効なダミーデータです。

https://docs.microsoft.com/ja-jp/visualstudio/xaml-tools/xaml-designtime-data?view=vs-2022

本物のText設定値は空にしておきましょう。

通知画面の処理

起動時の処理

NotifyWindow.xaml.csを開き、コンストラクタのInitializeComponent呼び出しの後に以下の処理を書きます。

// ウィンドウ位置を左上に設定
Left = 0;
Top = 0;
// ウィンドウサイズをスクリーンサイズに設定
Width = SystemParameters.PrimaryScreenWidth;
Height = SystemParameters.PrimaryScreenHeight;

これでスクリーン全体を覆う半透明の通知画面が表示されるようになります。

画面を閉じる処理

マウスクリックで画面が閉じるようにします。
WindowMouseDownイベントハンドラを用意し、

以下を記述します。

Close();

キー操作でも画面が閉じるようにします。
KeyDownイベントハンドラを追加し、以下を入力します。

// 「ESC」か「スペース」か「C」を押されたら終了
if (e.Key is
    Key.Escape or
    Key.Space or
    Key.C)
{
    Close();
}

これで通知画面のロジック部分も完成です。
一応ビルドしておきましょう。
メニューのビルド > ソリューションのビルドを実行します。

復習ポイント

  • XAMLコメント、#region
  • デザイン時のサンプルデータ表示