Chapter 15

ステップ4-1: 時計アプリ

このチャプターの目次

概要

デジタル時計を作ります。
こんなイメージで現在の時・分・秒を表示します。

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

WindowのWidthを200に、Heightを100に設定します。

画面が小さいのでデザイナー左下の表示倍率を変更して大きく表示しましょう。

WindowStyleをToolWindowに設定します。
デザイン画面上ではわかりませんが、これで最小化ボタンと最大化ボタンが非表示になります。

Debugモードで実行してみます。

↓↓↓↓↓

実行したままWindowのプロパティ編集を続けます。
Titleの値を時計に書き換えます。
ソース修正が即座に実行中のプログラムに反映されます。
この機能をホットリロードと言います。

いったんデバッグ実行を終了します。
ResizeModeをCanResizeWithGripに設定します。
ShowInTaskbarのチェックを外して、実行時にタスクバーに表示されないようにします。
Topmostにチェックを入れ、画面が最前面表示されるようにします。

ブラシカテゴリのBackground、単色ブラシ > エディタータブのR,G,Bをそれぞれ0に設定します。
そうするとXAML上にBackground="Black"が設定されます。

デザイナーでGridを右クリックし、レイアウトの種類の変更 > Viewboxを選択します。
XAMLのGridタグがViewboxタグに変わります。
Viewboxは中に配置したコントロールを拡大縮小してくれます。

ツールボックスからTextBlockをViewboxの上にドラッグ＆ドロップします。
Viewboxの効果で画面サイズいっぱいに拡大されます。
FontのRを255に設定します。
そうするとXAML上にForeground="Red"が設定されます。

TextBlockの名前にTimeLabelを、Textに00:00:00を、TextWrappingにNoWrapを設定します。

TextBlockはLabelと同様、テキスト表示のためのコントロールです。
Labelは入力項目のラベルとしての用途で用意されているので、その他のテキスト表示はTextBlockを使うとよいでしょう。