Introduction

忘備録。

デフォルトのアイコンはかなりダサいし、小さくて視認性も良くない。

Before

サンプルソースは、GitHub に置きました。

How to change?

ずばりな答えがここに。

Style でカスタマイズできるが、かなり長い。
なお下記は Font Awesome を使っている。
使い方は 開発メモ その303 WPF で Font Awesome を使う を参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<UserControl x:Class="Demo.Views.Modules.MainModule"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:modules="clr-namespace:Demo.DesignTimes.Modules"
             xmlns:mvvm="http://prismlibrary.com/"
             xmlns:viewModels="clr-namespace:Demo.ViewModels"
             d:DataContext="{d:DesignInstance modules:MainModuleViewModel,
                                              IsDesignTimeCreatable=True}"
             d:DesignHeight="450"
             d:DesignWidth="800"
             mvvm:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <FontFamily x:Key="FontAwesomeSolid">pack://application:,,,/Fonts/#Font Awesome 6 Free Solid</FontFamily>
            <Style x:Key="TreeViewItemFocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ExpandCollapseToggleStyle"
                   TargetType="{x:Type ToggleButton}">
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Width" Value="30" />
                <Setter Property="Height" Value="30" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <TextBlock x:Name="ExpandPath"
                                       Padding="5,0,5,5"
                                       FontFamily="{StaticResource FontAwesomeSolid}"
                                       FontSize="20"
                                       Text="&#xf138;" />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ExpandPath" Property="Text" Value="&#xf13a;" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="TreeViewItemStyle"
                   TargetType="{x:Type TreeViewItem}">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="Padding" Value="1,0,0,0" />
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" />
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"
                                                      MinWidth="19" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <ToggleButton x:Name="Expander"
                                              ClickMode="Press"
                                              IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                              Style="{StaticResource ExpandCollapseToggleStyle}" />
                                <Border x:Name="Bd"
                                        Grid.Column="1"
                                        Padding="{TemplateBinding Padding}"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        SnapsToDevicePixels="true">
                                    <ContentPresenter x:Name="PART_Header"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      ContentSource="Header"
                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Border>
                                <ItemsPresenter x:Name="ItemsHost"
                                                Grid.Row="1"
                                                Grid.Column="1"
                                                Grid.ColumnSpan="2" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsExpanded" Value="false">
                                    <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
                                </Trigger>
                                <Trigger Property="HasItems" Value="false">
                                    <Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true" />
                                        <Condition Property="IsSelectionActive" Value="false" />
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                </MultiTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
                        <Setter Property="ItemsPanel">
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel />
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <TreeView HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              ItemContainerStyle="{StaticResource TreeViewItemStyle}"
              ItemsSource="{Binding Items}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type viewModels:ListViewItemViewModel}"
                                      ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Text}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</UserControl>

ExpandCollapseToggleStyle を改造する。
<ControlTemplate TargetType="{x:Type ToggleButton}"> の周りが肝。
ToggleButton の IsChecked の状態に応じて、展開ボタンの表示をトリガーで変更している。

After

Source Code

https://github.com/takuya-takeuchi/Demo/tree/master/WPF/16_CustomizeExpandIconForTreeView