Windows 8 のストアアプリなど、特徴的な GridView では、同じ GridView のなかで複数のサイズのタイルが含まれます。
このような複数サイズのタイルを、デフォルトのテンプレートから作る方法を紹介したいと思います。
SampleDataSource.cs のクラスにプロパティ追加
SampleDataSource.cs のクラスにプロパティを追加します。
SampleDataCommon クラスに、RowSpan, ColumnSpan プロパティを追加します。
public abstract class SampleDataCommon : GridApp5.Common.BindableBase { // (中略) private int _rowSpan = 1; public int RowSpan { get { return this._rowSpan; } set { this.SetProperty(ref this._rowSpan, value); } } private int _columnSpan = 1; public int ColumnSpan { get { return this._columnSpan; } set { this.SetProperty(ref this._columnSpan, value); } } }
SampleDataSourceクラスのコンストラクタの一番最初の項目に、RowSpan, ColumnSpan プロパティを追加します。
public sealed class SampleDataSource { // (中略) public SampleDataSource() { // (中略) group1.Items.Add(new SampleDataItem("Group-1-Item-1", "Item Title: 1", "Item Subtitle: 1", "Assets/LightGray.png", "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.", ITEM_CONTENT, group1) { RowSpan = 2, ColumnSpan = 2 }); // ここ追加 // (中略) } }
MyGridView を追加する
新規クラスとして MyGridView を追加します。
using GridApp4.Data; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace GridApp4 { class MyGridView : GridView { protected override void PrepareContainerForItemOverride(DependencyObject element, object item) { var viewModel = item as SampleDataCommon; element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, viewModel.ColumnSpan); element.SetValue(VariableSizedWrapGrid.RowSpanProperty, viewModel.RowSpan); base.PrepareContainerForItemOverride(element, item); } } }
GridViewをさしかえる
GridView を作成したものにさしかえます。
GroupedItemsPage.xaml をひらき、GridView タグを local:MyGridView にかきかえます。
<!-- ほとんどのビューステートで使用される水平スクロール グリッド--> <local:MyGridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Margin="0,-3,0,0" Padding="116,0,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <!-- 中略 --> </local:MyGridView>