WPF TreeView DataTemplate Triggers

Question

I'm developing a WPF application with C#.

I've added a TreeView in a window with DataTemplate. But I need some style triggers for this DataTemplates like MouseOver, IsFocused etc.

Can you help me with that? Thank you for helping.

<TreeView 
   x:Name="twLayer" 
   Background="{x:Null}" 
   HorizontalContentAlignment="Stretch" 
   VerticalContentAlignment="Top" 
   Padding="0" 
   SnapsToDevicePixels="True" 
   ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
   ScrollViewer.VerticalScrollBarVisibility="Auto" 
   BorderThickness="0" 
   Cursor="Hand">
   <TreeView.Resources>
      <HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}">
         <Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353"  BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
            <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
               <Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True">
                  <Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
                     <Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" />
                  </Border>
               </Border>
               <TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </HierarchicalDataTemplate>
      <DataTemplate DataType="{x:Type loc:ChannelItem}">
         <Border Width="250" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
            <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
               <Border BorderThickness="1" BorderBrush="Black" VerticalAlignment="Center" SnapsToDevicePixels="True">
                  <Border BorderThickness="1" BorderBrush="White" SnapsToDevicePixels="True">
                     <Grid Width="16" Height="16" Background="{Binding Path=ChannelColor}" SnapsToDevicePixels="True"/>
                  </Border>
               </Border>
               <TextBlock Margin="5,3,0,0" Text="{Binding Path=Name}" Foreground="White" FontFamily="Calibri" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </DataTemplate>
      <DataTemplate DataType="{x:Type loc:EffectItem}">
         <Border Width="250" Height="18" BorderBrush="#FF383838" Background="#FF535353"  BorderThickness="1,0,1,1" Padding="2"  OverridesDefaultStyle="True">
            <StackPanel Orientation="Horizontal"  SnapsToDevicePixels="True">
               <Image Width="10" Height="10" VerticalAlignment="Center"  HorizontalAlignment="Left" Source="icons/iconFX.png" SnapsToDevicePixels="True"/>
               <TextBlock  Margin="6,0,0,0" Text="{Binding Path=Name}" Foreground="White" FontSize="10" FontFamily="Calibri" SnapsToDevicePixels="True"/>
            </StackPanel>
         </Border>
      </DataTemplate>
   </TreeView.Resources>
</TreeView>

Answer 1

you can use the VisualState like

<VisualStateManager.VisualStateGroups>
   <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlNormalColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
 </VisualStateManager.VisualStateGroups>

Answer 2

You can add your Trigger s into the TriggersCollection of a Style like this:

<HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}">
    <Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353"  BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
        <StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
            <Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True">
                <Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
                    <Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" />
                </Border>
            </Border>
            <TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/>
        </StackPanel>
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" Value="LightGreen" />
                    </Trigger>
                    <Trigger Property="IsFocused" Value="False">
                        <Setter Property="BorderBrush" Value="Gray" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
    </Border>
</HierarchicalDataTemplate>

You can do something similar on the root Border element in your other DataTemplate too. You can find out more from the Trigger Class page on MSDN.