Configuración de desencadenantes de vista de árbol de WPF para mostrar diferentes imágenes en expandir

Question

Tengo una vista de árbol wpf que muestra nodos de varios tipos con las imágenes correspondientes, como las imágenes de carpeta. Inicialmente, el árbol y sus nodos con imágenes correspondientes se muestran como se esperaba. Sin embargo, cuando se expande un nodo, se espera que la imagen del nodo expandido se cambie a una imagen expandida. Estoy tratando de usar disparadores HierarchicalDataTemplate para configurar esto.

¿Deberían configurarse los activadores de forma diferente?

El árbol se ve algo como:

(Folder Image) Solutions (SolutionsViewModel) 
--(Solution Image) Solution 1 (Solution) 
--(Solution Image) Solution 2 (Solution) 
(Folder Image) Conventions (ConventionsViewModel) 

el XAML de los principales nodos de la vista de árbol (el tema está vacío):

<UserControl.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="../Theme.xaml" /> 
     </ResourceDictionary.MergedDictionaries> 

     <HierarchicalDataTemplate DataType="{x:Type vm:SolutionsViewModel}" ItemsSource="{Binding Items}"> 
      <StackPanel Orientation="Horizontal"> 
       <Image x:Name="nodeImg" Width="16" Height="16" Source="pack://siteOfOrigin:,,,/Resources/FolderClosed.bmp"/> 
       <TextBlock Margin="5,0,0,0" Text="{Binding Name}" /> 
      </StackPanel> 
      <HierarchicalDataTemplate.Triggers> 
       <DataTrigger Binding="{Binding IsExpanded}" Value="True"> 
        <Setter TargetName="nodeImg" Property="Source" Value="pack://siteOfOrigin:,,,/Resources//FolderOpen.bmp"/> 
       </DataTrigger> 
      </HierarchicalDataTemplate.Triggers> 
     </HierarchicalDataTemplate> 

     <HierarchicalDataTemplate DataType="{x:Type sol:Solution}" ItemsSource="{Binding Items}"> 
      <StackPanel Orientation="Horizontal"> 
       <Image x:Name="treeImg" Width="16" Height="16" Source="pack://siteOfOrigin:,,,/Resources/SolutionClosed.bmp"/> 
       <TextBlock Margin="5,0,0,0" Text="{Binding Name}" /> 
      </StackPanel> 
      <HierarchicalDataTemplate.Triggers> 
       <DataTrigger Binding="{Binding IsExpanded}" Value="True"> 
        <Setter TargetName="treeImg" Property="Source" Value="pack://siteOfOrigin:,,,/Resources//SolutionOpen.bmp"/> 
       </DataTrigger> 
      </HierarchicalDataTemplate.Triggers> 
     </HierarchicalDataTemplate> 

     <HierarchicalDataTemplate DataType="{x:Type vm:ConventionsViewModel}" ItemsSource="{Binding Items}"> 
      <StackPanel Orientation="Horizontal"> 
       <Image x:Name="nodeImg" Width="16" Height="16" Source="pack://siteOfOrigin:,,,/Resources/FolderClosed.bmp"/> 
       <TextBlock Margin="5,0,0,0" Text="{Binding Name}" /> 
      </StackPanel> 
      <HierarchicalDataTemplate.Triggers> 
       <DataTrigger Binding="{Binding IsExpanded}" Value="True"> 
        <Setter TargetName="nodeImg" Property="Source" Value="pack://siteOfOrigin:,,,/Resources//FolderOpen.bmp"/> 
       </DataTrigger> 
      </HierarchicalDataTemplate.Triggers> 
     </HierarchicalDataTemplate> 
    </ResourceDictionary> 
</UserControl.Resources> 
<UserControl.DataContext> 
    <ObjectDataProvider 
    ObjectType="{x:Type vm:TreeViewModel}" 
    MethodName="CreateDefaultTree" 
    /> 
</UserControl.DataContext> 
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> 
    <Grid> 
     <TreeView Name="solutionsModel" ItemsSource="{Binding Items}"> 
      <TreeView.ItemContainerStyle> 
       <Style TargetType="{x:Type TreeViewItem}"> 
        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> 
        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> 
        <Setter Property="FontWeight" Value="Normal" /> 
        <Style.Triggers> 
         <Trigger Property="IsSelected" Value="True"> 
          <Setter Property="FontWeight" Value="Bold" /> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </TreeView.ItemContainerStyle> 
     </TreeView> 
    </Grid> 
</ScrollViewer> 

Answer 1

This question podría ser relevante.

Como en mi respuesta a la pregunta que vinculaba, me gustaría hacer el disparo en la imagen a través del enlace RelativeSource, puede refactorizarlo en un estilo para que no tenga todo ese código redundante.

Posiblemente podría trabajar con DynamicResources para proporcionar las dos imágenes a cada control de imagen, o podría subclasificar Image o crear un UserControl que proporcione propiedades.

---

El método DynamicResource:

<TreeView.Resources> 
    <Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}"> 
     <Setter Property="Source" Value="{DynamicResource Icon_Closed}"/> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True"> 
       <Setter Property="Source" Value="{DynamicResource Icon_Open}"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
</TreeView.Resources> 

<!-- Example usage --> 
<HierarchicalDataTemplate DataType="{x:Type obj:Employee}"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Style="{StaticResource ExpandingImageStyle}"> 
      <Image.Resources> 
       <BitmapImage x:Key="Icon_Closed" UriSource="Images/FolderClosed.ico"/> 
       <BitmapImage x:Key="Icon_Open" UriSource="Images/FolderOpen.ico"/> 
      </Image.Resources> 
     </Image> 
     <TextBlock Text="{Binding Name}"/> 
    </StackPanel> 
</HierarchicalDataTemplate> 

Answer 2

Para completar, la configuración original con el HierarchicalDataTemplate desencadena sólo necesitaba utilizar un RelativeSource de unión (como se indica por la respuesta de HB), tales como :

<HierarchicalDataTemplate DataType="{x:Type svm:SolutionsViewModel}" ItemsSource="{Binding Items, Mode=OneWay}"> 
    <StackPanel Style="{StaticResource TreeViewItemStackPanelStyle}"> 
     <Image x:Name="nodeImg" Style="{StaticResource IconImageStyleSmall}" Source="{StaticResource Icon_FolderClosed}" /> 
     <TextBlock Style="{StaticResource TreeViewItemTextStyle}" /> 
    </StackPanel> 
    <HierarchicalDataTemplate.Triggers> 
     <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True"> 
      <Setter TargetName="nodeImg" Property="Source" Value="{Binding Source={StaticResource Icon_FolderOpen}, Mode=OneTime}"/> 
     </DataTrigger> 
    </HierarchicalDataTemplate.Triggers> 
</HierarchicalDataTemplate> 

A continuación se muestra una imagen de ejemplo con imágenes diferentes en expandirse en el TreeView: