UniversalWindowsApp開発入門02-画面デザインとHelloWorld-

動画

UWPの画面デザイン

UWPの画面デザインはXAMLファイルによって記述されます。

XAMLとはXMLを拡張したようなマークアップ言語のことで、VisualStudioでXAMLファイルを開くとデザイナーによって画面デザインをしながらXAMLを書くことができます。

また、UWPの画面を記述したXAMLファイルにはコードビハインドと呼ばれるプログラミング言語(C#など)を記述できるファイルが存在し、画面上の挙動をプログラミングすることができます。

XAMLコントロールの配置

UWPの画面記述言語であるXAMLは、ButtonなどのコントロールをXAMLとして記述することで配置できます。

左のツールボックスからbuttonを探し、デザイナーの画面上にドラッグアンドドロップします。

すでにXAML上ではGridコントロールが配置されているため、Gridコントロールの子要素としてbuttonを配置することができます。

Gridコントロールは子コントロールを余白を指定して配置することができるコントロールのため、buttonコントロールは余白を設定して位置を変更できます。

Clickイベントのフック

XAMLコントロールにはイベントというそのコントロールに起きた挙動をフックする機能があり、たとえばbuttonならばbuttonがクリックされたとき、Clickイベントが発動します。

イベントはコードビハインドによってフックすることができ、イベントがおきた時の挙動を記述することができます。

イベントはコントロールのプロパティウインドウの中にある雷のようなマークを選択すると一覧を見ることができ、その中のイベントをダブルクリックすることでコードビハインドにコードが自動生成されます。

また、buttonなどの場合はbutton自体をダブルクリックしてもコードビハインドにコードが自動生成されます。

このコードビハインドに自動生成されたメソッドはイベントが発動したときにこのメソッド内が実行されるという意味になります。

XAML上ではClick属性にコードビハインド上のメソッド名が記述されることでひも付けています。

MessageDialogの表示

ではコードビハインドにダイアログを表示するコードを記述します。

UWPではMessageDialogというクラスがダイアログを表示することができるのでnewし、コンストラクタに表示したいメッセージを記述します。

注意点としてMessageDialogのShowメソッドではMessageDialogが表示されたときUIが止まってしまわないように非同期にする必要があり、UWPでの非同期記述方法はメソッドにasyncとつけ、非同期開始するところでawaitをつけます。

こうすることでawait以降はMessageDialogが閉じたあとに実行されることになります。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.