How do I change an image of a node in a WPF treevi

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 is if a treenode is expanded, the image source changes to Images/vsfolder_open.png...

What would be the easiest way to do that?

Thanks in advance!

Answer 1

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

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