Chapter 15

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

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.25に更新

概要

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

プロジェクトの作成

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

画面の作成

Window

WindowWidth200に、Height100に設定します。

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

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

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

↓↓↓↓↓

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

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

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

Viewbox

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

TextBlock

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

TextBlock名前TimeLabelを、Text00:00:00を、TextWrappingNoWrapを設定します。

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