title: WPF - Setting different ToggleButton image for each TreeViewItem root node with styles
body: <p>I am new to using styles, resources and templates in WPF.  What I need to do is override the ToggleButton +/- in the TreeView to be an image, with a different image for each TreeViewItem root Node.  For Instance, I would want an image of a car for the "Car" node, and an image of an airplane for the "Plane" node.  I have a colorful and a grayscale image of each (for expanded/collapsed).</p>
  
  <p>I've found styles to override the treeview and get the image set for the toggle button, but I am not sure the best way to style each item differently.  </p>
  
  <p>the style code for an item is quite long, so I'm pretty sure there's a better way than copy/pasting the full style just to change the source property.</p>
  
  <p>Could someone please point me in the right direction on the best way to do this?</p>
  
  <p>Thank you.</p>
  
  <p>Here's the style I've been playing with, which was copied from a different post and altered for my images.</p>
  
  <pre><code>    &lt;Style x:Key="TreeViewItemFocusVisual"&gt;
      &lt;Setter Property="Control.Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate&gt;
                  &lt;Rectangle/&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"&gt;
      &lt;Setter Property="Focusable" Value="False"/&gt;
      &lt;Setter Property="Width" Value="16"/&gt;
      &lt;Setter Property="Height" Value="16"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ToggleButton}"&gt;
                  &lt;Border Width="16" Height="16" Background="Transparent"&gt;
                      &lt;Border Width="16" Height="16" SnapsToDevicePixels="true" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" BorderThickness="1"&gt;
                          &lt;Image x:Name="ExpandImg" Width="16" Height="16" Source="/MyApp;component/Images/Icons/Grayscale/car.ico" /&gt;
                      &lt;/Border&gt;
                  &lt;/Border&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsChecked" Value="True"&gt;
                          &lt;Setter Property="Source" TargetName="ExpandImg" Value="/MyApp;component/Images/Icons/Color/car.ico"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}"&gt;
      &lt;Setter Property="Background" Value="Transparent"/&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
      &lt;Setter Property="Padding" Value="1,0,0,0"/&gt;
      &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
      &lt;Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type TreeViewItem}"&gt;
                  &lt;Grid&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition MinWidth="19" Width="Auto"/&gt;
                          &lt;ColumnDefinition Width="Auto"/&gt;
                          &lt;ColumnDefinition Width="*"/&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="Auto"/&gt;
                          &lt;RowDefinition/&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/&gt;
                      &lt;Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"&gt;
                          &lt;ContentPresenter x:Name="PART_Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/&gt;
                      &lt;/Border&gt;
                      &lt;ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsExpanded" Value="false"&gt;
                          &lt;Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="HasItems" Value="false"&gt;
                          &lt;Setter Property="Visibility" TargetName="Expander" Value="Hidden"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsSelected" Value="true"&gt;
                          &lt;Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/&gt;
                          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;MultiTrigger&gt;
                          &lt;MultiTrigger.Conditions&gt;
                              &lt;Condition Property="IsSelected" Value="true"/&gt;
                              &lt;Condition Property="IsSelectionActive" Value="false"/&gt;
                          &lt;/MultiTrigger.Conditions&gt;
                          &lt;Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/&gt;
                          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
                      &lt;/MultiTrigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true"&gt;
              &lt;Setter Property="ItemsPanel"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ItemsPanelTemplate&gt;
                          &lt;VirtualizingStackPanel/&gt;
                      &lt;/ItemsPanelTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>