良いWindowsストア アプリの作り方 vol.04 ～「もっと見る」を置かない～

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


[もっと見るを置かない]
Windowsストア アプリには、下図のような「もっと見る」や「すべて表示」などを置かないようにします。

 
 「もっと見る」を置く代わりに、グループ名をクリックしたときに「もっと見る」を実行します。


[グリッド アプリケーションの例]
Visual Studio 2012で作るグリッド アプリケーションは、グループごとにアイテムをまとめて表示するページがあります。
C#で作ったグリッド アプリケーションのプロジェクトには、GroupedItemsPageというファイルができています。
グループごとにアイテム表示している例は、以下のようなページです。

 

この例では、Group1に5つのアイテム、Group2に3つのアイテムが含まれています。
もし、Group1に数多くのアイテム、例えば50アイテムあった場合はどうなるでしょうか?
グリッド アプリケーションのGroupedItemsPageは、1グループあたり12個のアイテムしか表示できない仕様です。
(この数を変更する方法については後述します)
 アイテム数が12を超えるときには、以下の赤で囲っているグループ名の部分をクリックします。
アイテム数が12以下のときでも、グループ名をクリックするとそのグループに含まれるアイテムを見ることができます。




[GroupedItemsPageでのアイテム表示数の変更]
C#用のグリッドアプリケーションの場合、GroupedItemsPageで1グループに表示するアイテム数は最大12です。
この個数を変更するには、DataModel\SampleDataSource.csの以下の部分を変更します。
変更するのは、黄色くマーカーした部分です。

private void ItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    // バインドする完全な項目コレクションのサブセットを GroupedItemsPage から指定します。
    // これには次の 2 つの理由があります。GridView はサイズの大きい項目コレクションを仮想化しません。また、
    // グループを通じてたくさんのアイテムを参照するときに、ユーザー エクスペリエンスを
    // 向上します。
    //
    // 1、2、3、4、または 6 個の列が表示される場合でも、入力済みのグリッド コラムが使用されることになるため、
    // 最大 12 個のアイテムが表示されます

    switch (e.Action)
    {
        case NotifyCollectionChangedAction.Add:
            if (e.NewStartingIndex < 12)
            {
                TopItems.Insert(e.NewStartingIndex,Items[e.NewStartingIndex]);
                if (TopItems.Count > 12)
                {
                    TopItems.RemoveAt(12);
                }
            }
            break;
        case NotifyCollectionChangedAction.Move:
            if (e.OldStartingIndex < 12 && e.NewStartingIndex < 12)
            {
                TopItems.Move(e.OldStartingIndex, e.NewStartingIndex);
            }
            else if (e.OldStartingIndex < 12)
            {
                TopItems.RemoveAt(e.OldStartingIndex);
                TopItems.Add(Items[11]);
            }
            else if (e.NewStartingIndex < 12)
            {
                TopItems.Insert(e.NewStartingIndex, Items[e.NewStartingIndex]);
                TopItems.RemoveAt(12);
            }
            break;
        case NotifyCollectionChangedAction.Remove:
            if (e.OldStartingIndex < 12)
            {
                TopItems.RemoveAt(e.OldStartingIndex);
                if (Items.Count >= 12)
                {
                    TopItems.Add(Items[11]);
                }
            }
            break;
        case NotifyCollectionChangedAction.Replace:
            if (e.OldStartingIndex < 12)
            {
                TopItems[e.OldStartingIndex] = Items[e.OldStartingIndex];
            }
            break;
        case NotifyCollectionChangedAction.Reset:
            TopItems.Clear();
            while (TopItems.Count < Items.Count && TopItems.Count < 12)
            {
                TopItems.Add(Items[TopItems.Count]);
            }
            break;
    }
}

12という数値が直打ちされているので、

const int MaxItems = 12;

というような定数を作り、12をMaxItemsに、11をMaxItems - 1に変更するとよいでしょう。


[前後の記事]
vol.03 : 共有チャームで情報共有


マイクロソフト
田中達彦

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