Compartilhar via


Windowsストア アプリ開発 Tips集005 ~グリッドアプリの最初のアイテム(タイル)を大きくする~

マイクロソフトの田中達彦です。
本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。

[グリッドアプリのプロジェクト]
この記事は、C#で作成したグリッド アプリケーションのトップページに表示されるアイテム(タイル状のもの)を、以下のように各グループの最初だけ大きく表示させる方法を説明します。

[GridViewを継承するクラスの作成]
アイテムの一部を大きくするには、アイテムを表示しているGridViewクラスを拡張したクラスを使用します。
最初に、GridViewを継承するクラスを作成しましょう。
ここでは、CustomGridViewというクラス名にします。

このクラスを作るには、Visual Studioでプロジェクトを開き、ソリューション エクスプローラーのプロジェクト名上で右クリックし、[追加]-[新しい項目]を選択します。
新しい項目の追加ダイアログが表示されたら、クラスを選び、名前をCustomGridView.csに変更し、[追加]ボタンを押します。
CustomGridView.csが作成されたら、以下の黄色くマーカーした部分を追加します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using App17.Data;

namespace App17
{
    class CustomGridView : GridView
    {
        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            var obj = item as SampleDataCommon;
            var gridItem = element as GridViewItem;

            if (obj.UniqueId.IndexOf("Item-1") > 0)
            {
                gridItem.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
                gridItem.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);
            }
            base.PrepareContainerForItemOverride(gridItem, item);
        }
    }
}

using App17.Dataの「App17」の部分は、そのすぐ下にあるnamespaceと同じ名前に変更してください。
ここでは、アイテムの大きさが通常のものと比べて縦2倍、横2倍になるように設定しています。
"Item-1"の部分を変更すると、最初のアイテムではなく2番めのアイテムを大きくしたり、グループ1のみ大きくするようなことも可能です。

[GroupedItemsPage.xamlの変更]
GroupedItemsPage.xamlの以下のGridViewを使用しているところを、local:CustomGridViewに変更します。

(変更前)
<GridView
    (中略)
<GridView>

(変更後)
<local:CustomGridView
    (中略)
</local:CustomGridView>

次に、VariableSizedWrapGridを定義しているところにItemsHeightとItemsWidthを追加し、それぞれ250という値を設定します。

(変更前)
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>

(変更後)
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" ItemHeight="250" ItemWidth="250"/>

グリッドアプリケーションのトップページの1つのアイテムの大きさは250x250です。
もし異なる大きさのアイテムを使用しているときは、ここの値をその大きさに変更します。

[StandardStyles.csの変更]
グリッドアプリケーションのトップページで使用しているアイテムの形状は、Common\StandardStyles.csの中でStandard250x250ItemTemplateとして定義されています。
StandardStyles.csを開き、そのテンプレートの部分を表示させ、以下の黄色でマーカーした部分を削除します。

(変更前)
<!-- GroupedItemsPage と ItemsPage に表示される、グリッドに適した 250 ピクセルの四角形のアイテム テンプレート -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">

(変更後)
<!-- GroupedItemsPage と ItemsPage に表示される、グリッドに適した 250 ピクセルの四角形のアイテム テンプレート -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left">

ここまでの変更でプロジェクトを実行すると、トップページの各グループの最初のアイテムが大きくなっています。

[関連記事]
良いWindowsストア アプリの作り方 vol.08 ~アイテムの大きさを自由に設定~
https://blogs.msdn.com/b/ttanaka/archive/2012/11/01/windows-vol-08.aspx

[前後の記事]
004 ~設定チャームに項目を追加する~
006 ~タイルやスプラッシュを簡単に作るには~
Tips集 まとめページ

マイクロソフト
田中達彦