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

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

<?xml version="1.0"?>
<画像>
        <情報>
                <画像名>銀杏.jpg</画像名>
                <説明>
抜けるような青空に，銀杏の木が突き刺さっている。
間もなくこの銀杏も黄金色に変わるだろう。
そして落ちていく。人生もしかり。
                </説明>
        </情報>
        <情報>
                <画像名>枯れ木.jpg</画像名>
                <説明>
生きていた証を鼓舞するように，
枯れ木がその老いた身体をさらしている。
春になれば，その老いた身体から，
新しい生命の息吹が芽生えるだろう。
                </説明>
        </情報>
        ～<情報></情報>繰り返し～
</画像>

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

<Page
    x:Class="UniversalApp4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>（1）
        <DataTemplate x:Key="FlipViewTemplate">（2）
            <StackPanel Orientation="Horizontal">（3）
                <Image Width="640" Height="480" Source="{Binding 画像名}"/>（4）
                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5"/>（5）
            </StackPanel>（3）
        </DataTemplate>（2）
        <DataTemplate x:Key="FlipViewPhoneTemplate">（6）
            <StackPanel Orientation="Vertical">（7）
                <Image Width="320" Height="240" Source="{Binding 画像名}" HorizontalAlignment="Left"/>（8）
                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5" HorizontalAlignment="Left"/>（9）
            </StackPanel>（7）
        </DataTemplate>（6）
    </Page.Resources>（1）
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="FlipView1" HorizontalAlignment="Left" Height="480" VerticalAlignment="Top" Width="959"/>（10）
    </Grid>
</Page>

リスト3: 編集されたMainPage.xaml

<Page
    x:Class="UniversalApp4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="FlipViewTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Width="640" Height="480" Source="{Binding 画像名}"/>
                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="FlipViewPhoneTemplate">
            <StackPanel Orientation="Vertical">
                <Image Width="320" Height="240" Source="{Binding 画像名}" HorizontalAlignment="Left"/>
                <TextBlock Width="320" TextAlignment="Left" Text="{Binding 説明}" FontFamily="Meiryo UI" FontSize="24" TextWrapping="Wrap" Padding="5" HorizontalAlignment="Left"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>（1）
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>（2）
                        <AdaptiveTrigger MinWindowWidth="600" />（3）
                    </VisualState.StateTriggers>（2）
                    <VisualState.Setters>（4）
                        <Setter Target="FlipView1.ItemTemplate"
                            Value="{StaticResource FlipViewTemplate}" />（5）
                    </VisualState.Setters>（4）
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>（6）
                        <AdaptiveTrigger MinWindowWidth="0" />（7）
                    </VisualState.StateTriggers>（6）
                    <VisualState.Setters>（8）
                        <Setter Target="FlipView1.ItemTemplate"
                            Value="{StaticResource FlipViewPhoneTemplate}" />（9）
                    </VisualState.Setters>（8）
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>（1）
        <FlipView x:Name="FlipView1" HorizontalAlignment="Left" Height="480" VerticalAlignment="Top" Width="959"/>
    </Grid>
</Page>

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

‘ XML文書を扱うため、System.Xml.Linq名前空間をインポートしておきます。
Imports System.Xml.Linq

‘ ImageInfoクラス内に、文字列型の「画像名」と「説明」プロパティを定義しておきます。このプロパティ
‘ 名がリスト1の（4）と（8）の中でSourceやTextプロパティにバインドされています。
Public Class ImageInfo
    Property 画像名 As String
    Property 説明 As String
End Class

Public NotInheritable Class MainPage
    Inherits Page

‘ ●ページがアクティブになった時の処理
    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
       ‘ XElementクラス型の変数xmldocを宣言し、XElement.Loadメソッドで
‘　「photo_etc.xml」ファイル読み込みます。
        Dim xmldoc As XElement = XElement.Load("photo_etc.xml")

　　　　　　‘ ImageInfoクラス型の新しいリストであるmyImageInfoオブジェクトを作成します。
        Dim myImageInfo As List(Of ImageInfo) = New List(Of ImageInfo)

　　　　　　‘ Descendantsメソッドですべての子孫要素である、「情報」内の値を変数resultに格納し
‘ ながら、以下の処理を行います。

‘ 新しいImageIfoクラスの、「画像名」プロパティに、XML文書の「画像名」要素の値を指定
‘ します。ソリューションエクスプローラー内のImageフォルダーにある画像を指定するには
‘　"ms-appx:///Image/"
‘ と指定します。次に、「説明」プロパティに、XML文書内の「説明」要素の値を指定します。
‘ これらの値の指定された、ImageInfoクラスを、AddメソッドでmyImageInfoオブジェク
‘ トに追加します。
        For Each result In From c In xmldoc.Descendants("情報") Select c
            myImageInfo.Add(New ImageInfo With {.画像名 = "ms-appx:///Image/" & result.Element("画像名").Value, .説明 = result.Element("説明")})
        Next

　　　　　‘ FlipView1コントロールのItemsSourceにmyImageInfoオブジェクトを指定します。
　　　　　‘ これで、FlipViewの中に画像が表示され、タッチデバイスやマウスで画像を切り替えることが可
‘ 能になります。
        FlipView1.ItemsSource = myImageInfo
        MyBase.OnNavigatedTo(e)
    End Sub
End Class