眠るシーラカンスと水底のプログラマー

　GridViewの選択状態時などにアイテムの右上にチェックマークがついた状態があります。

　上記画像の右側のアイテムのような選択状態の表示や色を変える方法を紹介します。

　選択状態以外にもマウスがオーバーした場合、クリックされた時などの状態に関する変更はテンプレートではできません。

　では、どのようにするかといいますと、スタイルを変更します。

　スタイルの変更はBlendで行うと便利です。

　Blendの「オブジェクトとタイムライン」ウィンドウ上のGridView(今回はitemGridViewというx:Nameプロパティを持つ)上で右クリック。

　「追加のテンプレートの編集」→「生成されたアイテムコンテナーの編集(ItemContainerStyle)」→「コピーして編集」を選びます。

　下記画像のように階層を降りて「SelectedBorder」と「SelectedCheckMarkOuter」の中身を編集します。

　「SelectedBorder」のStroke時のカラーを、

「SelectedBorder」はその下の階層の「SelectedEarmark」というPathの色を変更します。

　これで色の変更ができましたが、マウスオーバーすると元の色で表示されてしまいます。

　そちらを修正する場合は「状態」タグから「PointerOver」状態を選択して、上記「SelectedBorder」と「SelectedCheckMarkOuter」を編集しましょう。

　テンプレートの編集とスタイルの編集はBlendとかXAMLに慣れていないと難しいところですよね。

Tweet