WPF: Custom +- in TreeView WPF: Custom +- in TreeView wpf wpf

WPF: Custom +- in TreeView


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>


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.