How to change node image in WPF tree view when node is expanded or compensated?

Question

My Xaml looks like this:

<TreeView Name="mainTree" ItemsSource="{Binding Folders}">
  <TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
      <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
      <Style.Triggers>
        <!-- ??? -->
      </Style.Triggers>
    </Style>
    <HierarchicalDataTemplate DataType="{x:Type local:FolderNode}" ItemsSource="{Binding Children}" >
      <StackPanel Orientation="Horizontal" Name="myPanel">
        <Image x:Name="treeImg" Width="16" Height="16" Source="Images/vsfolder_closed.png"/>
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
      <HierarchicalDataTemplate.Triggers>
        <!-- ??? -->
      </HierarchicalDataTemplate.Triggers>
    </HierarchicalDataTemplate>
  </TreeView.Resources>
</TreeView>

Now, what I would like if the treenode extension is expanded, the image source will change to Images / vsfolder_open.png ...

What would be the easiest way to do this?

Thanks in advance!

Answer 1

Add a DataTrigger to the HierarchicalDataTemplate. Since you have a two-way binding to Property IsExpanded in the ViewModel, you can bind to it and use TargetName because of the name pointer in the DataTemplate.

<HierarchicalDataTemplate.Triggers>
    <DataTrigger Binding="{Binding IsExpanded}" Value="True">
        <Setter TargetName="treeImg"
                Property="Source"
                Value="Images/vsfolder_open.png"/>
    </DataTrigger>
</HierarchicalDataTemplate.Triggers>