Windowsストア アプリの作り方解説 今日の運勢編 第4回 ～テンプレートの変更～
マイクロソフトの田中達彦です。
本連載では、「今日の運勢」というWindowsストア アプリの開発元に情報をいただき、このアプリがいかにして作られたかを解説します。
今回は、アイテムの見た目を変えるために、StandardStyle.xamlに手を入れます。
[アイテムの見た目]
Visual Studio 2012で作成したグリッド アプリケーションのハブページでは、アイテムを以下のように表示しています。
一方、今日の運勢では、アイテムを以下のように表示しています。
(縮尺は同じ)
1つのアイテムの大きさが、グリッド アプリケーションでは250x250なのに対して、今日の運勢のアイテムは200x200と少し小さめになっています。
タイトルとサブタイトルの表示位置も、グリッド アプリケーションでは上下に表示されていますが、今日の運勢では左右に表示しています。
アイテムは、XAMLで書かれたテンプレートを使用して表示されています。
このテンプレートを変更すると、自分が好きなレイアウトを使用できます。
どのテンプレートを使用しているかを調べるには、ハブページのUIを記述しているXAMLファイルであるGroupedItemsPage.xamlの中を見てみます。
その中に、以下の記述があります。
<!-- ほとんどのビューステートで使用される水平スクロール グリッド-->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
ItemsTemplateという文字を探すと、以下の文が見つかります。
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
ここで使用しているテンプレートは、Standard250x250ItemTemplateだということがわかります。
Standard250x250ItemTemplateは、ソリューション エクスプローラーに表示されているCommonを展開したところに入っている、StandardStyles.xamlに含まれています。
その中を検索すると、以下のXAMLで書かれたテンプレートが見つかります。
<!-- GroupedItemsPage と ItemsPage に表示される、グリッドに適した 250 ピクセルの四角形のアイテム テンプレート -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
これがグリッド アプリケーションのハブページのアイテムを見た目を形成している本体です。
この中では、以下のことが定義されています。
- 幅、高さは250
- その中に指定された画像を表示する。表示方法はUniformToFill (縦横比を変えずに、空白が生じないようになるべく広い範囲を表示させる)
- 下のほうに半透明の黒い帯を表示される
- 黒い帯の中にタイトルとサブタイトルを縦方向に表示させる
[テンプレートの追加]
このテンプレートはそのまま残し、新たに星座を選択させるためのテンプレートを追加します。
ここでは、以下のStandard200x200ItemTemplateというテンプレートを追加しています。
<DataTemplate x:Key="Standard200x200ItemTemplate">
<Grid HorizontalAlignment="Left" Width="200" Height="200">
<Border Background="Transparent">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="22" Margin="8,4,15,0"/>
</StackPanel>
<TextBlock VerticalAlignment="Bottom" TextAlignment="Right" Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" FontSize="28" FontFamily="Segoe UI Light" TextWrapping="NoWrap" Margin="15,0,2,-7"/>
</Grid>
</DataTemplate>
新規に追加したこのテンプレートは、以下のことを定義しています。
- 幅、高さは200
- その中に指定された画像を表示する。表示方法はUniformToFill (縦横比を変えずに、空白が生じないようになるべく広い範囲を表示させる)
- 画像の背景は透明色とする
- 下のほうに半透明の黒い帯を表示される
- 黒い帯の中にタイトルを左詰めで表示させる
- 下の右のほうにサブタイトルを表示させる。フォントサイズ、フォント名も指定している
テンプレートを追加したら、GroupedItemsPage.xamlのテンプレートを指定している部分を、新たに追加したテンプレートに変更します。
次回は、星座選択ページの仕上げについて説明します。
[記事一覧]
第1回 開発のための環境構築
第2回 グリッド アプリケーションの中身を理解する
第3回 データの変更
第3回のソースコード
第4回 テンプレートの変更
第5回 GroupedItemsPageの仕上げ
第6回 別のGroupedItemsPageの追加
マイクロソフト
田中達彦