国安Tweet前回は、入力ボックスを配置して、画面サイズによってその配置を変化させる方法を解説しました。エミュレーターの日本語化やソフトキーボードの日本語化についても解説しました。第4回の今回は、画面サイズに合わせて背景色や文字サイズを変更する方法について見ていきます。2015を起動し、新しいプロジェクトを作成します。詳細な手順は、第2回の「プロジェクトの作成」の項を参照してください。今回の「プロジェクト名」は「UniversalApp3」と指定します。[OK]ボタンをクリックすると、「UniversalApp3」のプロジェクトが起動します。ソリューションエクスプローラー内のMainPage.xamlをダブルクリックすると、デザイン画面とXAMLコードの記述された画面が表示されます。このデザイン画面にコントロールを配置していきます。新しいフォルダーの作成と画像の追加コントロールを配置する前に、ソリューションエクスプローラー内に「Image」というフォルダーを作成し、1枚の画像を追加します。詳細な手順は、第2回の「新しいフォルダーの作成と画像の追加」の項を参照してください。ここで追加する画像はサンプルファイルに含まれています。適当な画像がお手元にない場合はご利用ください。サンプルファイルはこちらからダウンロードできます(UniversalApp3.zip)。コントロールを配置していきましょう。画面右のソリューションエクスプローラーから「MainPage.xaml」をダブルクリックすると、デザイン画面が表示されます。ここでデザイン画面が狭く表示されている場合は、デバイススケールの一覧から「23”Desktop(1920×1080)100%スケール」を選択してください。デザイン画面が広く表示されます(詳細は第2回の「コントロールの配置」の項を参照)ツールボックスからデザイン画面上の任意の場所にTextBlockを1個配置し、その下にImageを1個配置します。画面左端の「ツールボックス」タブから「TextBlock」をクリックし、デザイン画面上へドラッグ&ドロップするだけです。「Image」も同様の手順で配置してください(図1)。UI」、フォントサイズを「36」に指定します(図2)。次に「共通」を展開して「Text」に「UniversalApp」と指定して太字にし、さらに「ブラシ」を展開し「Foreground」に「Red」を指定します。太字にするのは図1のTextBlock1内に表示する「UniversalApp」という文字です(図2参照)。次に、TextBlock1の下に配置したImageの「名前」に「Image1」と指定します。プロパティの「レイアウト」を展開してWidthに「640」、Heightに「480」を指定し、「共通」を展開して「Source」にソリューションエクスプローラー内のImageフォルダーに取り込んだ画像を指定します(図3)。最後に、XAMLのGrid要素のNameに「LayoutRoot」と指定します(図4)。図1のXAMLはリスト1のようになっています(リスト内の数字はコメントと対応しています)。</Grid></Page>GridのNameに「LayoutRoot」と指定してBackgroundプロパティは外しておくNameが「TextBlock1」というTextBlockと「Image1」というImageを配置しプロパティを設定している画面サイズによって文字や背景の色、画像サイズを変更させるため、リスト1のXAMLをリスト2のように編集します。</Grid></Page>レイアウトの変更にはVisualStateManagerを使用する画面サイズに応じてVisualStateを自動で切り替えるには、VisualStateに新しく追加された「StateTriggers」プロパティにAdaptiveTriggerを設定することで実現できるAdaptiveTriggerには「MinWindowWidth」と「MinWindowHeight」プロパティがあり、ここに設定した幅や高さよりも大きい時にそのVisualStateに遷移する。「画面幅が600ピクセル以上なら」という意味になる(3)の条件の場合の処理をVisualState.Setters内に記述するNameがLayoutRootのGridの背景色を「Yellow」にするTextBlock1コントロールの文字サイズを「48」にするTextBlock1の文字色をRedにするVisualState.StateTriggers内に次の新しい条件を記述するで「画面幅が0ピクセル以上なら」という意味になるVisualState.Setters内に(9)の条件の処理を記述するNameがLayoutRootの背景色を「Red」に指定するTextBlock1の文字サイズを「20」に指定するTextBlock1の文字色を「Yellow」に指定するImage1の幅を「320ピクセル」に指定するImage1の高さを「240ピクセル」に指定するImage1のMarginの値を指定するここで、併せてApp.xaml.vbのフレームレートカウンタの設定も「False」に変更しておきましょう。詳細は第3回の「コントロールの配置」の項を参照してください。それでは、編集したリスト2を実行してみましょう。「23”Desktop(1920×1080)100%スケール」を選択し、ローカルコンピューターを選択します。実行結果は図2のようになります。図5から画面の幅を狭くすると図6のように表示されます。画面の幅を狭くすると文字色と背景色、画像と文字サイズが変化したでは、次にエミュレーターで表示させてみましょう。512MB」に変更します。これで実行すると、図7のようにエミュレーター内に画像が表示されます。エミュレーターの表示結果。画面が小さくなると画像と文字のサイズ、背景色、文字色が変化するいかがでしょうか。皆さんの環境でも動作を確認できたでしょうか。今回のサンプルファイルはこちらからダウンロードできます(6473_UniversalApp3.zip)。今回は、画面のサイズによって表示されている文字や背景の色、画像サイズを変更させる方法を紹介しました。TargetやValueに指定するプロパティや値を変更するだけなので理解しやすかったのではないでしょうか。次回は、コレクション内の画像(アルバム内の写真や製品の詳細ページ内の項目など)を一度に1つずつ表示するFlipViewコントロールを使ったサンプルを紹介します。プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。