GridViewにグループ化された項目を表示するには

CollectionViewSource

GridViewはグループ化された項目を表示することができます。

WindowsストアアプリのGridVewテンプレートなどはグループ化された項目が表示できるようになっています。
44

しかし通常のコレクションをItemsSourceに入れてもグループ化は表現できません。
そこでCollectionViewSourceというものを使います。
CollectionViewSourceはグループ化されたコレクションのバインドをサポートし、グループ化されたコンテンツを表示するときによく使われます。

グループ化されたコレクションを作る

今回はSampleItemというアイテムをSmapleGroupクラスでグループ化し、そのグループのコレクションをMainViewModelが持つという形のサンプルデータを作ります。
11

データの最小単位のアイテムです。
タイトルとテキストのメンバを所持します。

SmapleItemのコレクションを持つグループです。
グループタイトルというメンバを持ちます。

MainVeiwModelです。SmapleItemGroupのコレクションをもち、コンストラクタでサンプルデータを入れています。
このmainViewModelが直接PageのDataContextに入ります。

Viewを作る

続いてXAMLです。
PageのリソースにCollectionViewSource型のリソースを作ります。
SourceプロパティにはMainViewModelのGroupsコレクションとバインドをし、
ItemsPathプロパティにはSampleItemGroup内にあるItemsコレクションの名前を指定します。
ItemsPathはBindingでは無いので注意しましょう。
IsSourceGroupedをTrueにしないとグループ化されません。

続いてGridViewです。
ItemsSourceには先ほど作成したCollectionViewSourceとのバインドを行います。

ItemTemplateでは実際のアイテム1つのテンプレートを指定します。
SmapleItemがDataContextに入るのでTitleとTextをバインドさせます。

GroupStyleではHeaderTemplateを編集し、
グループタイトルがButtonに表示されるようにします。
SampleItemGroupがDataContextに入るのでGroupTitleとバインドをおこないます。

最後にPageのDataContextにMainViewModelを入れたら完成です。

グループ化されたコレクションがGridViewにグループ化されて表示されています。
43