WPF: Custom +- in TreeView

Question

It's possible to change the built-in collapse-expand icons of TreeView control (+-) to my own icons?

Thanks in advance!

Answer 1

Unfortunately, you will need to retemplate the TreeViewItem to achieve that. This default style may help get you started. Note the paths that will need to be substituted for your images.

<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="19"/>
  <Setter Property="Height" Value="13"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Border Width="19" Height="13" Background="Transparent">
          <Border SnapsToDevicePixels="true" Width="9" Height="9"
                  BorderBrush="#FF7898B5" BorderThickness="1" CornerRadius="1">
            <Border.Background>
              <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                <GradientStop Color="White" Offset=".2"/>
                <GradientStop Color="#FFC0B7A6" Offset="1"/>
              </LinearGradientBrush>
            </Border.Background>
            <Path x:Name="ExpandPath"
                  Margin="1,1,1,1"
                  Fill="Black"
                  Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/>
          </Border>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="True">
            <Setter Property="Data" TargetName="ExpandPath"
                    Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}">
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="HorizontalContentAlignment"
          Value="{Binding Path=HorizontalContentAlignment,
              RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
  <Setter Property="VerticalContentAlignment"
          Value="{Binding Path=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="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TreeViewItem}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19" Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <ToggleButton x:Name="Expander"
                        Style="{StaticResource ExpandCollapseToggleStyle}"
                        ClickMode="Press"
                        IsChecked="{Binding Path=IsExpanded,
                            RelativeSource={RelativeSource TemplatedParent}}"/>
          <Border Grid.Column="1" x:Name="Bd"
                  SnapsToDevicePixels="true"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">
            <ContentPresenter x:Name="PART_Header"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              ContentSource="Header"/>
          </Border>
          <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsExpanded" Value="false">
            <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
          </Trigger>
          <Trigger Property="HasItems" Value="false">
            <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
          </Trigger>
          <Trigger Property="IsSelected" Value="true">
            <Setter Property="Background" TargetName="Bd"
                    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 Property="Background" TargetName="Bd"
                    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>

Answer 2

Thank you very much, Kent! Here is the solution for my case:

<Style x:Key="styleTreeViewExpandCollapse" TargetType="{x:Type ToggleButton}">
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Image x:Name="image" Source="images/img1.ico" />
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="image" Property="Source" Value="images/img2.ico" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="styleTreeView" TargetType="{x:Type TreeViewItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TreeViewItem}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19" Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <ToggleButton Grid.Column="0" x:Name="Expander"
                        Style="{StaticResource styleTreeViewExpandCollapse}"
                        IsChecked="{Binding Path=IsExpanded,
                            RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press"
                        Width="16" Height="16"/>
          <ContentPresenter Grid.Column="1" x:Name="PART_Header"
                            ContentSource="Header"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
          <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>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader" Value="false"/>
              <Condition Property="Width" Value="Auto"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader" Value="false"/>
              <Condition Property="Height" Value="Auto"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Icons img1.ico and img2.ico are an arrows.