いろいろなサイズのタイルを含むGridViewを作る

Windows 8 のストアアプリなど、特徴的な GridView では、同じ GridView のなかで複数のサイズのタイルが含まれます。

このような複数サイズのタイルを、デフォルトのテンプレートから作る方法を紹介したいと思います。

新規作成

Visual Studio 2012 で、Windows Metro style の Grid App (XAML) を作成します。

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>