TreeViewの選択行背景色を変更したい（WPF）

Sponsored Link

Windows Formsでは・・・

Windows FormsでTreeViewの選択行背景色を変更するのは若干手間がかかりましたが、WPFではかなり簡単にできるようになりましたね。

それを一応以下にまとめました。ただ簡単なのでそんなに書くこともないのですが。。。

Windows Forms版はこちら

Sponsored Link

デフォルトはやっぱりブルー

XAMLにサンプルのTreeViewを組み込んで表示してみました。

やっぱりデフォルトのままだと選択行背景色は「ブルー」ですね。

Sponsored Link

色を変えてみましょう。

<TreeView Grid.Row="0"
      x:Name="MyTreeView"
      Margin="5"
      Background="White"
      BorderBrush="#CCCCCC"
      BorderThickness="1">

    <TreeView.Resources>
        <!--アクティブな状態（そのコントロールを操作している時）の「選択背景色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
        <!--アクティブな状態の「選択されている文字の色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
        <!--非アクティブな状態（他のウィンドウやボタンを触っている時）の「選択背景色」-->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFE0E0E0" />
        <!--非アクティブな状態の「選択されている文字の色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="Black" />
    </TreeView.Resources>

</TreeView>

対象のTreeView内「TreeView.Resources」の中で「HighlightBrushKey」などのプロパティで色を設定するだけ。

詳しくはコメントで記載しておりますが、「アクティブになった選択行背景色」及び「文字色」、「非アクティブになった背景色」及び「文字色」をそれぞれセットするのみです。

上のサンプルでは「TreeView単位」で設定しておりますが、仮にそのページ内に複数のTreeViewがあって、すべて同じ色設定としたい場合には、Window.Resources配下で設定するよう変更するだけです。

<Window.Resources>
    <!--アクティブな状態（そのコントロールを操作している時）の「選択背景色」を指定-->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
    <!--アクティブな状態の「選択されている文字の色」を指定-->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
    <!--非アクティブな状態（他のウィンドウやボタンを触っている時）の「選択背景色」-->
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFE0E0E0" />
    <!--非アクティブな状態の「選択されている文字の色」を指定-->
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="Black" />
</Window.Resources>

ただし、Window.Resourcesで指定した場合にはTreeView以外にも同様の適用が行われます。

WPFのコントロール（DataGrid、TreeView、ListBox、ComboBoxなど）は「選択されている時は SystemColors.HighlightBrushKey を使う」という仕様となっているため。

そのため「TreeViewのみ変えたい」などという場合には、該当のオブジェクト配下のみで設定する形となるかと。

Sponsored Link

ちょっとオマケ。昔のTreeView外観にしたい。

昔のTreeView「＋」「－」をクリックすることで展開する表示にしたい、という場合。

<TreeView.Resources>
    <ResourceDictionary>
        <!-- ↓　ここ！ -->
        <!--外部のデザイン定義ファイル（辞書）をここに混ぜ合わせる-->
        <ResourceDictionary.MergedDictionaries>
            <!--Windowsのクラシックな見た目（昔ながらのデザイン）を定義したファイルを読み込み-->
            <ResourceDictionary Source="/PresentationFramework.Classic;component/themes/classic.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <!--アクティブな状態（そのコントロールを操作している時）の「選択背景色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
        <!--アクティブな状態の「選択されている文字の色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
        <!--非アクティブな状態（他のウィンドウやボタンを触っている時）の「選択背景色」-->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFE0E0E0" />
        <!--非アクティブな状態の「選択されている文字の色」を指定-->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="Black" />
    </ResourceDictionary>
</TreeView.Resources>

TreeView.Resourcesで

「/PresentationFramework.Classic;component/themes/classic.xaml 」を適用。

ただ、「＋」「－」配下のTreeを点線（ツリーライン）でつないで表示、ということまで対応する場合には、外部ライブラリなどを使用しないと対応できない？模様。

以上です。