良いWindowsストア アプリの作り方 vol.08 ~アイテムの大きさを自由に設定~


マイクロソフトの田中達彦です。
本連載では、良いWindowsストア アプリを作るために、知っておくべきポイントを紹介します。

[グリッドアプリのアイテム]
Visual Studioのグリッド アプリケーション プロジェクトを使用すると、タイルのように表示されるアイテムがすべて同じ大きさになります。
例えば以下のように、すべてのアイテムが250x250ピクセルの大きさになっています。

これではすべてのアイテムが平等に扱われるため、ちょっと面白味がありません。
強調したいアイテムは、以下のように大きくしたいものです。

今回は、グリッド アプリケーションの特定のアイテムを大きく表示させる方法を紹介します。

[GridViewの拡張]
まずは、GridViewクラスを継承したクラスを作ります。
ここではCustomGridViewというクラスを用意します。

Visual Studioでグリッド アプリケーション プロジェクトを新規に作成します。
今回はC#で作成します。
プロジェクトを作成したら、ソリューション エクスプローラーのプロジェクト名の上で右クリックし、[追加]-[新しい項目]を選択します。
[クラス]を選択し、名前に[CustomGridView.cs]と入力して、[追加]ボタンを押します。

作成されたソースコードに、以下の黄色でマーカーした部分を追加します。
水色でマーカーした部分はプロジェクト名なので、その下に表示されているnamespaceの名前に変更してください。

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 App33.Data;

namespace App33
{
    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, 3);
                gridItem.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);
            }
            base.PrepareContainerForItemOverride(gridItem, item);
        }
    }
}

ここでは、アイテムのUniqueIdに"Item-1"という文字が含まれていた場合に、アイテムの大きさを横3倍、縦2倍にしています。
UniqueIdについては、DataModel\SampleDataSource.csをご覧ください。

[XAML中の使用クラスの変更]
GroupedItemsPage.xamlでGridViewを使用しています。
その部分を、local:CustomGridViewに変更します。
以下の黄色いマーカーの部分です。

<!-- ほとんどのビューステートで使用される水平スクロール グリッド-->
<local:CustomGridView
    x:Name="itemGridView"
    AutomationProperties.AutomationId="ItemGridView"
    AutomationProperties.Name="Grouped Items"
(中略)
        </GroupStyle>
    </GridView.GroupStyle>
</local:CustomGridView>

これでアプリを実行すると、以下のようになります。

これでは、まだ想定していたものになっていないですね。

[アイテムの大きさの変更]
先ほどの図は、アイテムの大きさが250x250で固定されていたため、表示エリアが広がってもその中に250x250の大きさでアイテムが表示されていました。
この現象を回避するために、アイテムの表示に使用しているテンプレートを変更します。
テンプレートはCommon\StandardStyles.csで定義されています。
Common\StandardStyles.csのStandard250x250ItemTemplateの、以下の黄色でマーカーした部分を削除します。

<!-- 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>

これで、テンプレートで定義されていたサイズがなくなりました。
このまま実行しても、アイテムが変な大きさになってしまいます。
そこで、今度はGroupedItemsPage.xamlの以下の黄色のマーカーの部分を追加します。

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" ItemHeight="250" ItemWidth="250" Margin="0,0,80,0"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

サイズ指定をテンプレート側で行わず、GroupedItemsPage.xamlで行うことで、最初のアイテムのみを大きく表示させることができました。

[さらなる拡張]
例えばCustomGridViewクラスに以下の黄色くマーカーした部分を追加すると、特定のアイテムの背景色を変えることができます。
今は画像ファイルを前面に表示させているため効果が分かりませんが、画像ファイルが透過ファイルの場合であれば効果が分かります。

        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, 3);
                gridItem.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);
                gridItem.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.LightBlue);
            }
            base.PrepareContainerForItemOverride(gridItem, item);
        }

[前後の記事]
vol.07 : スプラッシュ スクリーン
vol.09 : タッチのフィードバックを用意する

マイクロソフト
田中達彦

※ 「Metroスタイル アプリ」は、「Windowsストア アプリ」に名前が変わりました

Skip to main content