GridViewで画面サイズに合わせて画像を拡大／縮小する

リスト1: MainPage.xaml

<Page
    x:Class="UniversalApp5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp5"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer>（1）
            <GridView x:Name="GridView1" HorizontalAlignment="Left" FlowDirection="LeftToRight" />（1）
        </ScrollViewer>（1）
    </Grid>
</Page>

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

<Page
    x:Class="UniversalApp5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp5"
    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="GridViewTemplate">（2）
            <StackPanel Orientation="Horizontal" >（3）
                <Image Width="640" Height="480" Source="{Binding 画像名}" Stretch="Uniform"/>（4）
            </StackPanel>（3）
        </DataTemplate>（2）
        <DataTemplate x:Key="GridViewPhoneTemplate">（5）
            <StackPanel Orientation="Vertical" >（6）
                <Image Width="320" Height="240" Source="{Binding 画像名}" Stretch="Uniform"/>（7）
            </StackPanel>（6）
        </DataTemplate>（5）
    </Page.Resources>（1）
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer>
            <GridView x:Name="GridView1" HorizontalAlignment="Left" FlowDirection="LeftToRight" />
        </ScrollViewer>
    </Grid>
</Page>

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

<Page
    x:Class="UniversalApp5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp5"
    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="GridViewTemplate">
            <StackPanel Orientation="Horizontal" >
                <Image Width="640" Height="480" Source="{Binding 画像名}" Stretch="Uniform"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="GridViewPhoneTemplate">
            <StackPanel Orientation="Vertical" >
                <Image Width="320" Height="240" Source="{Binding 画像名}" Stretch="Uniform"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer>
            <GridView x:Name="GridView1" HorizontalAlignment="Left" FlowDirection="LeftToRight" />
        </ScrollViewer>
        <VisualStateManager.VisualStateGroups>（1）
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>（2）
                        <AdaptiveTrigger MinWindowWidth="600" />（3）
                    </VisualState.StateTriggers>（2）
                    <VisualState.Setters>（4）
                        <Setter Target="GridView1.ItemTemplate"
                            Value="{StaticResource GridViewTemplate}" />（5）
                    </VisualState.Setters>（4）
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>（6）
                        <AdaptiveTrigger MinWindowWidth="0" />（7）
                    </VisualState.StateTriggers>（6）
                    <VisualState.Setters>（8）
                        <Setter Target="GridView1.ItemTemplate"
                            Value="{StaticResource GridViewPhoneTemplate}" />（9）
                    </VisualState.Setters>（8）
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>（1）
    </Grid>
</Page>

リスト4: プログラムコード（MainPage.xaml.vb）

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

‘ ImageInfoクラス内に、文字列型の「画像名」プロパティを定義しておきます。このプロパティ
‘ 名がリスト2の（4）と（7）の中でSourceプロパティにバインドされています。
Public Class ImageInfo
    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/"
‘ と指定します。
‘ この値の指定された、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})
        Next

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