GridViewのアイテム・コンテナーをカスタマイズするには

XAML(C#やVB)で作成するWindowsストア アプリで良く使うであろうコントロールとして、GridViewやListViewコントロールがあります。Visual Studioに組み込まれてプロジェクト・テンプレートであるグリッド・アプリケーションでもこれらのコントロールを使用しています。これらのコントロールのメリットは、コレクションのデータをItemSourceとしてデータ・バインドできることです。しかし、デザインの一環で配色などを独自のものに設定していくと、GridViewコントロールが持つアイテムに対する標準の配色(青系)を変更したいことが良くあります。このような場合の方法としては、GridViewコントロールのアイテム・コンテナーをカスタマイズする必要があります。今回は、アイテム・コンテナーのカスタマイズ方法を説明します。

最初に、Visual Studioでストア・アプリのグリッド・アプリケーションを選択して作成したプロジェクトを用意します。そして、GroupdItemsPage.xamlをデザイナーで開きます。次に、GridViewを選択してから、コンテキストメニューを表示して、[追加テンプレートの編集]-[生成されたアイテム コンテナーの編集]-[コピーして編集]を選択します（コピー済みであれば、現在の編集を選択します)。

 

そうすると、アイテム・コンテナーをコピーするダイアログが表示されます。[このドキュメント]を選択して、何らかの名前を指定してOKボタンをクリックします(Visual StudioやBlendでビジュアルにコンテナーを編集するには、[このドキュメント]を選択するのがポイントになります。アプリケーションなどを選択すると、ビジュアルな編集を行うことはできません)。

こうすることで、アイテム・コンテナーの編集画面がデザイナーに表示されます。

ドキュメント・アウトラインから、OuterContainer\ReorderHintContent\ContentContainer\InnerDragContent\SelectionBackgroundを選択して、プロパティ・ウィンドウでFillプロパティ（ブラシ）の色を変更します。こうすることで、選択されたアイテムの背景色をカスタマイズすることができます。

次に、ドキュメント・アウトラインから、OuterContainer\ReorderHintContent\ContentContainer\InnerDragContent\SelectedBorderを選択して、Strokeプロパティ（ブラシ）の色を変更します。これで、選択したアイテムの外周に表示される線の色を変更することができます。

次に、ドキュメント・アウトラインから、OuterContainer\ReorderHintContent\ContentContainer\InnerDragContent\SelectedCheckMarkOuter\SelectedEarmarkを選択して、Fillプロパティの色を変更します。これで、スワイプなどで選択した時の外周のに表示される線の色を変更することができます。

今度は、OuterContainer\ReorderHintContent\ContentContainer\InnerDragContent\SelectedCheckMarkOuter\Pathを選択して、Strokeプロパティの色を変更します。これで、スワイプなどで選択した時に表示されるチェックマークの色を変更することができます。

SelectedCheckMarkOuterとは、スワイプなどで選択した時に表示される外周などを定義しているGridとなっていますから、SelectedEarmarkとPathは同じ色にした方が良いでしょう。仮に、PathのDataを変更すればチェックマークの図形を変更することもできます。それでは、実行結果を以下に示します。

この実行結果は、上記の変更だけでなくFocusVisualの変更も行っていますので、フォーカスが当たっているアイテムの外周が赤くなっています。また、SelectionBackgroundを変更していますが、画像が表示されていることによってSelectionBackgroundを変更した効果を確認できなくなっています。この点を解消するには、アイテム・テンプレートの画像定義のOpacityを変更するか、イメージを削除します。また、GridViewのIsSwipとSelectionModeを変更していることは言うまでもありません(変更しないとスワイプが使用できないからです)。

この例のコンテナーがどのような構造になっているかを、次に示します。

このコンテナーの構造に伴って、変更する可能性のある要素を次に示しておきます。

要素名	説明
PointerOverBorder	マウス・ポインターが入った時に表示する枠線
FocusVisual	フォーカスが入った時に表示する枠線
SelectionBackground	選択された時に表示する背景色
SelectedBorder	選択された時に表示する枠線
SelectedCheckMarkOuter	選択された時に表示するチェックマークと枠線

説明した手順を利用することで、標準で提供しているコントロールのスタイルをカスタマイズすることに応用することができます。今回は、アイテム・コンテナー(アイテムが表示される領域)ですが、個々のアイテムをカスタマイズするのであれば「生成されたアイテムの編集」を行えば良いわけです。