画面サイズに合わせて背景色や文字サイズを変更する

連載 :

2015年10月14日(水)

前回は、入力ボックスを配置して、画面サイズによってその配置を変化させる方法を解説しました。また、エミュレーターの日本語化やソフトキーボードの日本語化についても解説しました。第4回の今回は、画面サイズに合わせて背景色や文字サイズを変更する方法について見ていきます。

プロジェクトの作成

Visual Studio Community 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）。TextBlockの「名前」には「TextBlock1」と指定し、プロパティの「テキスト」を展開して書体を「Meiryo 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のようになっています（リスト内の数字はコメントと対応しています）。

リスト1: MainPage.xaml

01<Page
02    x:Class="UniversalApp3.MainPage"
03    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05    xmlns:local="using:UniversalApp3"
06    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08    mc:Ignorable="d">
09    <Grid x:Name=”LayoutRoot”>（1）
10        <TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Height="69" TextWrapping="Wrap" Text="UniversalApp" VerticalAlignment="Top" Width="363" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" Foreground="Red"/>（2）
11       <Image x:Name="Image1" HorizontalAlignment="Left" Height="480" Margin="0,74,0,0" VerticalAlignment="Top" Width="640" Source="Image/民家.jpg"/>（2）
12    </Grid>
13</Page>

GridのNameに「LayoutRoot」と指定してBackgroundプロパティは外しておく
Nameが「TextBlock1」というTextBlockと「Image1」というImageを配置しプロパティを設定している

画面サイズによって文字や背景の色、画像サイズを変更させるため、リスト1のXAMLをリスト2のように編集します。

リスト2: 編集されたXAML（MainPage.xaml）

01<Page
02    x:Class="UniversalApp4.MainPage"
03    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05    xmlns:local="using:UniversalApp4"
06    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08    mc:Ignorable="d">
09<Grid x:Name=“LayoutRoot”>
10              <TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Height="69" TextWrapping="Wrap" Text="UniversalApp" VerticalAlignment="Top" Width="363" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" Foreground="Red"/>
11             <Image x:Name="image1" HorizontalAlignment="Left" Height="480" Margin="0,74,0,0" VerticalAlignment="Top" Width="640" Source="Image/民家.jpg"/>
12     <VisualStateManager.VisualStateGroups>（1）
13            <VisualStateGroup>
14                <VisualState x:Name="WideState">
15                    <VisualState.StateTriggers>（2）
16                        <AdaptiveTrigger MinWindowWidth="600" />（3）
17                    </VisualState.StateTriggers>（2）
18 
19                    <VisualState.Setters>（4）
20                        <Setter Target="LayoutRoot.Background"
21                            Value="Yellow" />（5）
22                        <Setter Target="TextBlock1.FontSize"
23                            Value="48" />（6）
24                        <Setter Target="TextBlock1.Foreground"
25                            Value="Red" />（7）
26                    </VisualState.Setters>（4）
27                </VisualState>
28 
29                <VisualState x:Name="NarrowState">
30                    <VisualState.StateTriggers>（8）
31                        <AdaptiveTrigger MinWindowWidth="0" />（9）
32                    </VisualState.StateTriggers>（8）
33 
34                    <VisualState.Setters>（10）
35                        <Setter Target="LayoutRoot.Background"
36                            Value="Red" />（11）
37                        <Setter Target="TextBlock1.FontSize"
38                            Value="20" />（12）
39                        <Setter Target="TextBlock1.Foreground"
40                            Value="Yellow" />（13）
41                        <Setter Target="Image1.Width"
42                            Value="320" />（14）
43                        <Setter Target="Image1.Height"
44                            Value="240" />（15）
45                        <Setter Target="Image1.Margin"
46                            Value="0,30,0,0" />（16）
47                    </VisualState.Setters>（10）
48                </VisualState>
49            </VisualStateGroup>
50        </VisualStateManager.VisualStateGroups>（1）
51     </Grid>
52</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のように表示されます。

では、次にエミュレーターで表示させてみましょう。「6“Phone（1920×1080）250％スケール」を選択し、「ローカルコンピューター」の箇所を「Mobile Emulator 10.0.10240.0 WVGA 4 inch 512MB」に変更します。これで実行すると、図7のようにエミュレーター内に画像が表示されます。

いかがでしょうか。皆さんの環境でも動作を確認できたでしょうか。なお、今回のサンプルファイルはこちらからダウンロードできます（6473_UniversalApp3.zip）。

今回はここまでです。今回は、画面のサイズによって表示されている文字や背景の色、画像サイズを変更させる方法を紹介しました。XAMLの記述方法は、これまでの記述方法とまったく同じで、Setter TargetやValueに指定するプロパティや値を変更するだけなので理解しやすかったのではないでしょうか。

次回は、コレクション内の画像（アルバム内の写真や製品の詳細ページ内の項目など）を一度に1つずつ表示するFlipViewコントロールを使ったサンプルを紹介します。お楽しみに。

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストアアプリを多数公開中。

Microsoft MVP for Development Platforms - Client App Dev （Oct 2003-Sep 2012）。Microsoft MVP for Development Platforms - Windows Phone Development（Oct 2012-Sep 2013）。Microsoft MVP for Development Platforms - Client Development（Oct 2013-Sep 2014）。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015）。