title: WPF TreeViewItem styling
body: <p>I am writing some code that maintains a heirarchy of objects, and am using a WPF TreeView both to display a visual representation of the heirarchy and to allow CRUD operations on the objects. </p>
  
  <p>In my treeview I create buttons that fire off the CRUD commands, however to reduce visual clutter I would only like the buttons for a particular item to be visible when the user moves the mouse over that item in the tree. What I would like to do is connect the IsMouseOver property of the treeviewitem to the visibility of the dockpanel containing the buttons. Is this possible? as I have searched fruitlessly and found nothing...</p>
  
  <pre><code>&lt;HierarchicalDataTemplate x:Key="treeViewTemplate" 
                            ItemsSource="{Binding Children}"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition/&gt;
                  &lt;ColumnDefinition/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;TextBlock Grid.Column="0" Text="{Binding Name}"/&gt;                
              &lt;DockPanel Grid.Column="1"&gt;
                  &lt;Button DockPanel.Dock="Right" Content="..."/&gt;
                  &lt;Button DockPanel.Dock="Right" Content="+"/&gt;
                  &lt;Button DockPanel.Dock="Right" Content="x"/&gt;
              &lt;/DockPanel&gt;
          &lt;/Grid&gt;
   &lt;/HierarchicalDataTemplate&gt;`
  </code></pre>
  
  <p>I tried the following DataTrigger aproach, but it doesn't do anything... (?)</p>
  
  <pre><code>&lt;HierarchicalDataTemplate x:Key="treeViewTemplate" ItemsSource="{Binding Children}"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition/&gt;
                  &lt;ColumnDefinition/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;TextBlock Grid.Column="0" Text="{Binding Name}"/&gt;                
              &lt;DockPanel Grid.Column="1"&gt;
                  &lt;DockPanel.Style&gt;
                      &lt;Style TargetType="{x:Type DockPanel}"&gt;
                          &lt;Setter Property="Visibility" Value="Collapsed"/&gt;
                          &lt;Style.Triggers&gt;
                             &lt;DataTrigger Binding="{Binding IsMouseOver,
                                          RelativeSource={RelativeSource AncestorType=TreeViewItem}}"
                                          Value="True"&gt;
                                  &lt;Setter Property="Visibility" Value="Visible"/&gt;
                             &lt;/DataTrigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/DockPanel.Style&gt;
                  &lt;Button DockPanel.Dock="Right" Content="..."/&gt;
                  &lt;Button DockPanel.Dock="Right" Content="+"/&gt;
                  &lt;Button DockPanel.Dock="Right" Content="x"/&gt;
              &lt;/DockPanel&gt;
          &lt;/Grid&gt;
      &lt;/HierarchicalDataTemplate&gt;
  </code></pre>
  
  <p>Finally, after much blundering around and yet more searching, I have a tree view that does what I want it to. Haven't had chance to make it purdy, but here's the mark-up:</p>
  
  <pre><code>&lt;Window x:Class="WPFTest.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WPFTest"
  Title="Window1" Height="300" Width="300"&gt;
  &lt;Window.Resources&gt;
      &lt;!-- Data Template for TreeViewItems --&gt;
      &lt;BooleanToVisibilityConverter x:Key="boolToVis"/&gt;
  
      &lt;HierarchicalDataTemplate x:Key="treeViewTemplate" ItemsSource="{Binding Children}"&gt;
          &lt;Grid HorizontalAlignment="Stretch"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition/&gt;
                  &lt;ColumnDefinition/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;TextBlock Grid.Column="0" Text="{Binding Name}" HorizontalAlignment="Left" Height="25" Margin="5" VerticalAlignment="Center"/&gt;                
          &lt;/Grid&gt;
      &lt;/HierarchicalDataTemplate&gt;
  
      &lt;!-- Style for the TreeViewItems --&gt;
      &lt;SolidColorBrush x:Key="GlyphBrush" Color="#444" /&gt;
      &lt;Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton"&gt;
          &lt;Setter Property="Focusable" Value="False"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="ToggleButton"&gt;
                      &lt;Grid
        Width="15"
        Height="13"
        Background="Transparent"&gt;
                          &lt;Path x:Name="ExpandPath"
          HorizontalAlignment="Left" 
          VerticalAlignment="Center" 
          Margin="1,1,1,1"
          Fill="{StaticResource GlyphBrush}"
          Data="M 4 0 L 8 4 L 4 8 Z"/&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsChecked"
             Value="True"&gt;
                              &lt;Setter Property="Data"
              TargetName="ExpandPath"
              Value="M 0 4 L 8 4 L 4 8 Z"/&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="TreeViewItemFocusVisual"&gt;
          &lt;Setter Property="Control.Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate&gt;
                      &lt;Border&gt;
                          &lt;Rectangle Margin="0,0,0,0" StrokeThickness="5" Stroke="Black" StrokeDashArray="1 2" Opacity="0"/&gt;
                      &lt;/Border&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="treeViewItemStyle"
   TargetType="{x:Type TreeViewItem}"&gt;
          &lt;Setter Property="Background"
    Value="Transparent"/&gt;
          &lt;Setter Property="HorizontalContentAlignment"
    Value="{Binding Path=HorizontalContentAlignment,
            RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
          &lt;Setter Property="VerticalContentAlignment"
    Value="{Binding Path=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="*"/&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}"
                              IsChecked="{Binding Path=IsExpanded,
                              RelativeSource={RelativeSource TemplatedParent}}"
                              ClickMode="Press"/&gt;
                          &lt;Grid Name="PART_ItemGrid" Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent"&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="*"/&gt;
                                  &lt;ColumnDefinition Width="Auto"/&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;ContentPresenter Grid.Column="0" x:Name="PART_Header"
                                  ContentSource="Header"
                                  HorizontalAlignment="Stretch"/&gt;
                              &lt;DockPanel Grid.Column="1" x:Name="PART_DockPanel" Visibility="Hidden"&gt;
                                  &lt;Button Content="..." DockPanel.Dock="Right"
                                          Visibility="{Binding Path=DataContext.CanEdit,
                                          Converter={StaticResource boolToVis},
                                          RelativeSource={RelativeSource TemplatedParent}}"/&gt;
                                  &lt;Button Content="+" DockPanel.Dock="Right"
                                          Visibility="{Binding Path=DataContext.CanAddChild,
                                          Converter={StaticResource boolToVis},
                                          RelativeSource={RelativeSource TemplatedParent}}"/&gt;
                                  &lt;Button Content="x" DockPanel.Dock="Right"
                                          Visibility="{Binding Path=DataContext.CanDelete,
                                          Converter={StaticResource boolToVis},
                                          RelativeSource={RelativeSource TemplatedParent}}"/&gt;
                              &lt;/DockPanel&gt;
                          &lt;/Grid&gt;                          
                          &lt;ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger SourceName="PART_ItemGrid" Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter TargetName="PART_DockPanel" Property="Visibility" Value="Visible"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsExpanded" Value="false"&gt;
                              &lt;Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="HasItems" Value="false"&gt;
                              &lt;Setter TargetName="Expander" Property="Visibility" Value="Hidden"/&gt;
                          &lt;/Trigger&gt;
                          &lt;MultiTrigger&gt;
                              &lt;MultiTrigger.Conditions&gt;
                                  &lt;Condition Property="HasHeader" Value="false"/&gt;
                                  &lt;Condition Property="Width" Value="Auto"/&gt;
                              &lt;/MultiTrigger.Conditions&gt;
                              &lt;Setter TargetName="PART_Header" Property="MinWidth" Value="75"/&gt;
                          &lt;/MultiTrigger&gt;
                          &lt;MultiTrigger&gt;
                              &lt;MultiTrigger.Conditions&gt;
                                  &lt;Condition Property="HasHeader" Value="false"/&gt;
                                  &lt;Condition Property="Height" Value="Auto"/&gt;
                              &lt;/MultiTrigger.Conditions&gt;
                              &lt;Setter TargetName="PART_Header" Property="MinHeight" Value="19"/&gt;
                          &lt;/MultiTrigger&gt;
                          &lt;!--&lt;Trigger Property="IsSelected" Value="true"&gt;
                              &lt;Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/&gt;
                              &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/&gt;
                          &lt;/Trigger&gt;--&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="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&gt;
  &lt;/Window.Resources&gt;
  
  &lt;!-- Navigation Tree --&gt;
  &lt;Grid&gt;
      &lt;TreeView ItemsSource="{Binding FirstGeneration}" ItemTemplate="{StaticResource treeViewTemplate}" HorizontalAlignment="Stretch"
                ItemContainerStyle="{StaticResource treeViewItemStyle}"/&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Thanks,
  Chris</p>