画面の作り方を学ぼう

前回、Universal Windows Platform(以下UWP)においての基本的なアプリの作り方、実行方法を学び、実際にボタンをクリックするとHello,Worldと表示するアプリを作りました。 しかし実用的なアプリを作ろうと思うと、ボタン1つでは実用的なアプリを作ることができません。 また、UWPはモバイル端末や巨大スクリーンなど、様々なサイズのデバイスに対応しており作成した1つのアプリがすべての端末において 問題なく動作するためには、様々なサイズの画面に対応したレイアウトを設計する必要があります。 UWPではそのような「どのデバイスにおいても動作するレイアウト」を「どのデバイスにも適用できる」という意味でAdaptive Layoutと呼んでいます。 今回はそのようなUWPの画面を構成するUIコントロールと、どのデバイスにおいても動作する画面レイアウトの方法を学んでいきましょう。

1. いろいろなUIコントロールを使ってみよう

UWPには様々なUIコントロールが標準で用意されています。 標準で用意されているUIコントロールはツールボックスから[すべてのXAMLコントロール]を展開すると表示されます。

UIコントロール

画面へのUIコントロールの配置方法、イベントの設定方法は前回の記事を参考にしてください。 本記事では様々なUIコントロールの中でも、非常によく使うものを紹介します。

Buttonコントロール

ユーザーによってクリックをすることができるボタンです。 ボタンに表示される文字列はContentプロパティを編集することで設定でき、ユーザーがボタンをクリックしたことを検知するには、Clickイベントを使用します。

Buttonコントロール

TextBlockコントロール、TextBoxコントロール

TextBlockコントロールとTextBoxコントロールは任意のテキストを表示するコントロールです。 2つの違いとしては、TextBlockコントロールはテキストを表示するのみであり、TextBoxコントロールはテキストを表示するだけでなくユーザーからのテキストの編集を受け付けます。 表示しているテキストを取得、設定するためにはTextプロパティを使用します。

TextBlockコントロール

 

TextBoxコントロール

 

例えば先ほどのButtonコントロールのClickイベントと組み合わせると、ボタンがクリックされたときに、TextBoxのテキストを変更するということが実現できます。

private void button_Click(object sender, RoutedEventArgs e)
{
    //TextBoxに表示される文字列を設定する
    textBox.Text = "Hello,World";
}

Sliderコントロール

ユーザーによって数値を設定するためのコントロールです。 Minimumプロパティに設定可能な最小値を、Maximumプロパティに設定可能な最大値を設定します。 ユーザーはMinimumからMaximumの間で数値を調整することができ、Valueプロパティで現在の値を取得、設定できます。

Sliderコントロール

 

値が変更されたことは、ValueChangedイベントによって検知できます。

private void slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    //sliderで設定された値をTextBoxに表示する
    textBox.Text = slider.Value.ToString();
}

ToggleSwitchコントロール

ユーザーからのTrueかFalseの2値を受け取ります。 表示されている文字列はHeaderプロパティを、SwitchがOnかOffかはIsOnプロパティにて取得、設定できます。

ToggleSwitchコントロール

 

スイッチが変更されたことは、Toggledイベントによって検知できます。

private void toggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    //ToggleSwitchで設定された値をTextBoxに表示する
    textBox.Text = toggleSwitch.IsOn.ToString();
}

2. UIコントロールの配置を調整しよう

今まで行ってきた、XAMLデザイナ上にUIコントロールをドラッグアンドドロップする配置方法では、4隅の余白が自動で設定されることによってUIコントロールの位置を決定しています。 デフォルトでは左上からの絶対座標によってUIコントロールが配置されますが、これではアプリのサイズを変更したとき、下図のようにレイアウトが崩れてしまいます。

アプリのサイズを変更した時

 

UWPではアプリのサイズが変更されたとしてもレイアウトが崩れないように複数のUIコントロールを束ね、UIコントロールの配置方法を決定するためのUIコントロールが存在します。 レイアウト用のUIコントロールは子要素として配置されたコントロールの配置を調整します。ですのでレイアウト用UIコントロールを使うにはまずレイアウト用UIコントロールを配置し、その上に配置したいUIコントロールをドラッグアンドドロップすることで配置できます。

レイアウト用コントロールの使用方法

Grid

Gridは画面分割を行い、子要素を分割したどこかのセルに配置します。 デフォルトでは画面を比率で分割するため、画面のサイズが変わったとしても UIコントロールの位置は分割した比率を保つことができます。

Gridコントロールで画面サイズを変えた場合

 

Gridを使うためにはXAMLデザイナー上にGridを配置し、Gridの端をクリックすることで画面分割を行うことができます。

Gridの画面分割方法

 

画面分割が完了したら子要素としてUIコントロールを配置し、RowプロパティとColumnプロパティを設定することでどの行とどの列に配置するかを設定できます。

Gridの行と列設定方法

StackPanel

StackPanelは子要素を1列に並べる様に配置するコントロールです。 OrientationプロパティをVerticalに設定すると縦1列、Horizontalに設定すると横一列に並べることができます。

StackPanel

SplitView

左端から開閉可能なペインを表示するコントロールです。 ペインに入れたいコントロールはPaneプロパティ下に配置します。 様々な画面サイズに適用しやすく、UWPではよく利用されるレイアウトであり、標準のニュースアプリでも使われています。

SplitView

 

Paneを開くかどうかはIsPaneOpenプロパティに値を設定することによって制御できます。

private void button_Click(object sender, RoutedEventArgs e)
{
    splitView.IsPaneOpen = true;
}

3. 画面のデザインを変更してみよう

UIコントロールには様々なプロパティが設定されており、プロパティを変更することによって画面のデザインも変更することができます。 例えばボタンの背景色はBackgroundプロパティを,文字の色を設定するにはForegroundプロパティを変更することで色を変えることができます。

ボタンデザイン

UIコントロールのサイズはWidthプロパティとHeightプロパティを設定することでサイズを変更できます。 XAMLデザイナーの場合、UIコントロールの隅をドラッグすることによって、直感的な操作でサイズを変更できます。

 

下図は筆者の作成したアプリのデザインです。 様々なUIコントロールを組み合わせ、プロパティを変更することによって画面のデザインを構築していくことができます。

WordShuffleアプリのデザイン

まとめ

今回はUWPにおける様々なコントロールとそのレイアウト方法について紹介しました。 VisualStudioでは非常に直感的にレイアウトを構築できるようになっており、XAMLデザイナーをいじっているだけでも それらしいアプリの画面を作ることができます。 皆さんもいろいろなUWPの画面を設計してみて、よりユーザーにとって使いやすいデザインを作ってみてください。