FlipViewを使用して画面内の画像と説明の配置を変更する

開発ツール

技術解説

連載 :

今日からはじめるWindows 10 ユニバーサルアプリ開発

2015年10月28日(水)

薬師寺国安

前回は、画面のサイズによって表示されている文字や背景の色、画像サイズを変更させる方法を紹介しました。第5回の今回は、「FlipView」を使ったユニバーサルアプリの作成方法について見ていきます。

FlipViewとは

FlipViewは、複数の画像をコレクション内に格納して画像をマウスホバーすることでナビゲーションボタンを表示し、クリックするとコレクション内で移動できるコントロールです。また、タッチ操作が可能なタブレットなどでは、タッチ操作で画像を左右にスワイプして画像を切り替えることが可能です。FilipViewの詳細な説明については下記のURLを参照してください。

FlipViewコントロールのガイドライン
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh850405.aspx

プロジェクトの作成

Visual Studio Community 2015を起動し、新しいプロジェクトを作成します。詳細な手順は、第2回の「プロジェクトの作成」の項を参照してください。なお、今回の「プロジェクト名」は「UniversalApp4」と指定します。

［OK］ボタンをクリックすると、「UniversalApp4」のプロジェクトが起動します。ソリューションエクスプローラー内のMainPage.xamlをダブルクリックすると、デザイン画面とXAMLコードの記述された画面が表示されます。このデザイン画面にコントロールを配置していきます。

新しいフォルダーの作成と画像の追加

コントロールを配置する前に、ソリューションエクスプローラー内に「Image」というフォルダーを作成し、10枚の画像を追加します。詳細な手順は、第2回の「新しいフォルダーの作成と画像の追加」の項を参照してください。なお、ここで追加する画像はサンプルファイルに含まれています。適当な画像がお手元にない場合はご利用ください。サンプルファイルはこちらからダウンロードできます（UniversalApp4.zip）。

XMLファイルの追加

Visual Studio Community 2015のメニューから「プロジェクト」→「新しい項目の追加」と選択し、「新しい項目の追加」画面の左に表示される項目から「データ」を、右に表示される項目から「XMLファイル」を選択します。「名前」には「photo_etc.xml」と指定して、［追加］ボタンをクリックします（図1）。

図1: XMLフィルの追加画面

エディタ画面が表示されるので、リスト1のようにXML文を作成します（サンプルファイルに編集済みのXMLファイル（photo_etc.xml）が含まれています）。

リスト1: 作成するphoto_etc.xmlファイル

01<?xml version="1.0"?>
02<画像>
03        <情報>
04                <画像名>銀杏.jpg</画像名>
05                <説明>
06抜けるような青空に，銀杏の木が突き刺さっている。
07間もなくこの銀杏も黄金色に変わるだろう。
08そして落ちていく。人生もしかり。
09                </説明>
10        </情報>
11        <情報>
12                <画像名>枯れ木.jpg</画像名>
13                <説明>
14生きていた証を鼓舞するように，
15枯れ木がその老いた身体をさらしている。
16春になれば，その老いた身体から，
17新しい生命の息吹が芽生えるだろう。
18                </説明>
19        </情報>
20        ～<情報></情報>繰り返し～
21</画像>

コントロールの配置

続けて、コントロールを配置していきましょう。画面右のソリューションエクスプローラーから「MainPage.xaml」をダブルクリックすると、デザイン画面が表示されます。ここでデザイン画面が狭く表示されている場合は、デバイススケールの一覧から「23”Desktop（1920×1080）100％スケール」を選択してください。デザイン画面が広く表示されます（詳細は第2回の「コントロールの配置」の項を参照）。

ツールボックスからデザイン画面上の任意の場所にFlipViewコントロールを1個配置します（図2）。画面左端の「ツールボックス」タブから「FlipView」をクリックしてデザイン画面上へドラッグ＆ドロップし、プロパティのNameに「FlipView1」、レイアウトのWidthに「959」、Heightに「480」を指定してください（図3）。

図2: ツールボックスからFiliViewコントロールを配置する

図3: FlipViewのプロパティを設定する

そしてFlipView内に「画像」と「説明」にあたる「テキスト」を表示させるために、MainPage.xamlをリスト2のように編集してImageコントロールとTextBlockをFlipViewに適用させます。

リスト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    <Page.Resources>（1）
10        <DataTemplate x:Key="FlipViewTemplate">（2）
11            <StackPanel Orientation="Horizontal">（3）
12                <Image Width="640" Height="480" Source="{Binding 画像名}"/>（4）
13                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5"/>（5）
14            </StackPanel>（3）
15        </DataTemplate>（2）
16        <DataTemplate x:Key="FlipViewPhoneTemplate">（6）
17            <StackPanel Orientation="Vertical">（7）
18                <Image Width="320" Height="240" Source="{Binding 画像名}" HorizontalAlignment="Left"/>（8）
19                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5" HorizontalAlignment="Left"/>（9）
20            </StackPanel>（7）
21        </DataTemplate>（6）
22    </Page.Resources>（1）
23    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
24        <FlipView x:Name="FlipView1" HorizontalAlignment="Left" Height="480" VerticalAlignment="Top" Width="959"/>（10）
25    </Grid>
26</Page>

Page.Resourcesプロパティ要素を記述する
Page.Resourcesプロパティ要素内にKey名が「FlipViewTemplate」というDataTemplateを記述する
DataTemplateの子要素としてStackPanelを記述し、Orientatonプロパティに「Horizontal」を指定して水平方向にオブジェクトを配置する
StackPanel要素の子要素としてImageを記述し、Widthを「640」、Heightを「480」と指定する。Sourceプロパティには「画像名」をバインドしておく
同様にTextBlockを配置して各プロパティを設定し、Textプロパティには「説明」をバインドしておく。ここで指定するバインド名はVBコードのクラス内で定義するプロパティ名になる
Key名が「FlipViewPhoneTemplate」のDataTemplateを記述する
DataTemplateの子要素としてStackPanelを記述し、Orientatonプロパティに「Vertical」を指定して垂直方向にオブジェクトを配置する
StackPanel要素の子要素としてImageを記述し、Widthを「320」、Heightを「240」と指定する。Sourceプロパティには「画像名」をバインドしておく
同様にTextBlockを配置して各プロパティを設定し、Textプロパティには「説明」をバインドしておく。ここで指定するバインド名もVBコードのクラス内で定義するプロパティ名になる
Nameが「FlipView1」というFlipViewコントロールを配置しておく。

リスト2のデザイン画面は図4のようになります。

図4: FlipViewコントロールを配置

続けて、リスト2をリスト3のように編集します。

リスト3: 編集された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    <Page.Resources>
10        <DataTemplate x:Key="FlipViewTemplate">
11            <StackPanel Orientation="Horizontal">
12                <Image Width="640" Height="480" Source="{Binding 画像名}"/>
13                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5"/>
14            </StackPanel>
15        </DataTemplate>
16        <DataTemplate x:Key="FlipViewPhoneTemplate">
17            <StackPanel Orientation="Vertical">
18                <Image Width="320" Height="240" Source="{Binding 画像名}" HorizontalAlignment="Left"/>
19                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5" HorizontalAlignment="Left"/>
20            </StackPanel>
21        </DataTemplate>
22    </Page.Resources>
23    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
24        <VisualStateManager.VisualStateGroups>（1）
25            <VisualStateGroup>
26                <VisualState x:Name="WideState">
27                    <VisualState.StateTriggers>（2）
28                        <AdaptiveTrigger MinWindowWidth="600" />（3）
29                    </VisualState.StateTriggers>（2）
30                    <VisualState.Setters>（4）
31                        <Setter Target="FlipView1.ItemTemplate"
32                            Value="{StaticResource FlipViewTemplate}" />（5）
33                    </VisualState.Setters>（4）
34                </VisualState>
35                <VisualState x:Name="NarrowState">
36                    <VisualState.StateTriggers>（6）
37                        <AdaptiveTrigger MinWindowWidth="0" />（7）
38                    </VisualState.StateTriggers>（6）
39                    <VisualState.Setters>（8）
40                        <Setter Target="FlipView1.ItemTemplate"
41                            Value="{StaticResource FlipViewPhoneTemplate}" />（9）
42                    </VisualState.Setters>（8）
43                </VisualState>
44            </VisualStateGroup>
45        </VisualStateManager.VisualStateGroups>（1）
46        <FlipView x:Name="FlipView1" HorizontalAlignment="Left" Height="480" VerticalAlignment="Top" Width="959"/>
47    </Grid>
48</Page>

レイアウトの変更にはVisualStateManagerを使用する
画面のサイズに応じてVisualStateを自動で切り替えるには、VisualStateに新しく「StateTriggers」というプロパティが追加されており、ここに「AdaptiveTrigger」を設定することで実現できる
AdaptiveTriggerには「MinWindowWidth」と「MinWindowHeight」という2つのプロパティがあり、ここに設定した幅や高さよりも大きい時にそのVisualStateに遷移する。は「画面幅が600ピクセル以上なら」という意味になる
（3）の条件の場合の処理をVisualState.Settersの中に記述する
FlipView1.ItemTemplateの値に"{StaticResource FlipViewTemplate}"を指定する。StaticResourceでリスト1の（2）で定義した「FlipViewTemplate」を参照させる
次の新しい条件をVisualState.StateTriggers内に記述する
は「画面幅が0ピクセル以上なら」という意味になる
（7）の条件の処理をVisualState.Setters内に記述する
FlipView1.ItemTemplateの値に"{StaticResource FlipViewPhoneTemplate}"を指定する。StaticResourceでリスト1の（6）で定義した「FlipPhoneViewTemplate」を参照させる

リスト3のように編集すると、MainPage.xamlのデザイン画面は図5のようになります。

図5: リスト3のXAMLで変更されたデザイン画面、特にFlipViewに見かけ上の変化はない

プログラムコードの記述（MainPage.xaml.vb）

次に、ソリューションエクスプローラーから「MainPage.xaml」を展開し、「MainPage.xaml.vb」をダブルクリックしてデザイン画面にコードを表示してリスト4のように編集します。

リスト4: MainPage.xaml.vbを編集

01‘ XML文書を扱うため、System.Xml.Linq名前空間をインポートしておきます。
02Imports System.Xml.Linq
03 
04‘ ImageInfoクラス内に、文字列型の「画像名」と「説明」プロパティを定義しておきます。このプロパティ
05‘ 名がリスト1の（4）と（8）の中でSourceやTextプロパティにバインドされています。
06Public Class ImageInfo
07    Property 画像名 As String
08    Property 説明 As String
09End Class
10 
11Public NotInheritable Class MainPage
12    Inherits Page
13 
14‘ ●ページがアクティブになった時の処理
15    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
16       ‘ XElementクラス型の変数xmldocを宣言し、XElement.Loadメソッドで
17‘　「photo_etc.xml」ファイル読み込みます。
18        Dim xmldoc As XElement = XElement.Load("photo_etc.xml")
19 
20　　　　　　‘ ImageInfoクラス型の新しいリストであるmyImageInfoオブジェクトを作成します。
21        Dim myImageInfo As List(Of ImageInfo) = New List(Of ImageInfo)
22 
23　　　　　　‘ Descendantsメソッドですべての子孫要素である、「情報」内の値を変数resultに格納し
24‘ ながら、以下の処理を行います。
25 
26‘ 新しいImageIfoクラスの、「画像名」プロパティに、XML文書の「画像名」要素の値を指定
27‘ します。ソリューションエクスプローラー内のImageフォルダーにある画像を指定するには
28‘　"ms-appx:///Image/"
29‘ と指定します。次に、「説明」プロパティに、XML文書内の「説明」要素の値を指定します。
30‘ これらの値の指定された、ImageInfoクラスを、AddメソッドでmyImageInfoオブジェク
31‘ トに追加します。
32        For Each result In From c In xmldoc.Descendants("情報") Select c
33            myImageInfo.Add(New ImageInfo With {.画像名 = "ms-appx:///Image/" & result.Element("画像名").Value, .説明 = result.Element("説明")})
34        Next
35 
36　　　　　‘ FlipView1コントロールのItemsSourceにmyImageInfoオブジェクトを指定します。
37　　　　　‘ これで、FlipViewの中に画像が表示され、タッチデバイスやマウスで画像を切り替えることが可
38‘ 能になります。
39        FlipView1.ItemsSource = myImageInfo
40        MyBase.OnNavigatedTo(e)
41    End Sub
42End Class

ここで、App.xaml.vbのフレームレートカウンタの設定も「False」に変更しておきましょう。詳細は第3回の「コントロールの配置」の項を参照してください。

それでは、編集したリスト4を実行してみましょう。「23”Desktop（1920×1080）100％スケール」を選択し、ローカルコンピューターを選択します。実行結果は図6のようになります。図6の状態から画面の幅を狭くすると図7のように表示されます。

図6: リスト4の実行結果。説明が画像の横に表示され、マウスホイールで画像を切り替えることができる

図7: 画面の幅を狭くすると画像サイズも小さくなり、説明が下段に表示された

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

図8: エミュレーターの表示結果。マウスをドラッグすると画像を切り替えることができる。画面に合わせて画像サイズも小さくなり、説明も下段に表示された

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

今回はFlipViewコントロールを使って画像と説明テキストを表示し、画面のサイズによって説明テキストを縦横の位置に変更する方法を解説しました。画面が広い状態では説明テキストが画像の横に表示され、画面を狭くすると縦に表示されるようにしてみました。次回はGridViewを使ったサンプルを紹介します。GridView内に画像を表示し、画面サイズによって表示方法を変化させてみます。お楽しみに。

著者

薬師寺国安

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

薬師寺国安事務所

薬師寺国安事務所代表。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）。