[VB]Windows8のAppStoreアプリを作る（その1.5）

前回のエントリではXAMLで画面を作りましたが、AppBarの実装で力尽きてしまいましたので、グリッドビューの実装を、このエントリでやっていきたいと思います。

シリーズ：[VB]Windows8のAppStoreアプリを作る（その1）

ファイルピッカーで複数個のファイルを選択できるようにしたいので、グリッドビューに何個サムネイルが表示されるかはわかりません。ですので、グリッドビューにデータを渡せば、自動的に表示できるように、グリッドビューにテンプレートを作成します。

ダイアログが出ますが、名前は適当で構いません。定義先の方は、アプリケーションにすると、作成するアプリ全体でテンプレートを使いまわすことができますし、このドキュメントを選んでPageを選ぶと、そのXAML内で使いまわす事ができます。GridViewを選んだ場合は、他で使いまわす事はできませんが、テンプレート部分がGridViewの中に定義されるので、XAMLコードの見通しがよくなります。
今回は他で使う予定もないので、GridViewに定義しました。
また、このテンプレートでは、画像とファイル名を表示する部分だけをテンプレ化します。

作成すると、デザインが真っ白になりました。これはItemTemplateのデザインに切り替わったからで、デザインの中のなにもないところをダブルクリックすると元の画面に戻ります。

小さい水色の四角をクリックすると、ItemTemplateのプロパティが表示されます。そのまま端をドラッグしてサイズを変更することもできますし、プロパティに数値を打ち込んで変更することもできます。
Gridのは幅450、高さ500に設定しました。

この水色のボックスもグリッドなので、前回も設定したRowDefinitionを設定できます。
グリッドを2分割し、上を400、下を100になるように設定。上には画像、下にファイル名を入れる予定です。

ツールボックスからImageをグリッドの上に、TextBlockをグリッドの下に設定します。ざっくりサイズ調整します（後述のXAMLコードを参照のこと）。

以上でUIは完成です。
今回作成したUIのXAMLコードは以下の通りです。

<Page
    x:Class="App6.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar>
            <Button Content="O" HorizontalAlignment="Left" AutomationProperties.Name="ファイルを開く" Style="{StaticResource AppBarButtonStyle}" Click="Button_Click_1"/>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <GridView HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Grid.Row="1">
            <GridView.Resources>
                <DataTemplate x:Key="DataTemplate1">
                    <Grid d:DesignWidth="365.823" d:DesignHeight="447.956" Width="450" Height="500">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="400*"/>
                            <RowDefinition Height="100*"/>
                        </Grid.RowDefinitions>
                        <Image Margin="10" Width="430" Height="380" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock HorizontalAlignment="Left" Margin="10" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Width="430" Height="20"/>
                    </Grid>
                </DataTemplate>
            </GridView.Resources>
            <GridView.ItemTemplate>
                <StaticResource ResourceKey="DataTemplate1"/>
            </GridView.ItemTemplate>
        </GridView>

    </Grid>
</Page>

実は後で修正をする事になりますが、プログラムができてからなのでここで一旦終了です。
次からは、中のロジックを作っていきたいと思います。