设置WPF树视图触发器以在展开时显示不同的图像

Question

我有一个wpf树视图,显示各种类型的节点和相应的图像,如文件夹图像.最初,树及其具有相应图像的节点按预期显示.但是,当扩展节点时,期望扩展节点的图像应交换为扩展图像.我正在尝试使用HierarchicalDataTemplate触发器进行设置.

触发器应该设置不同吗？

树看起来像:

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

树视图中主节点的xaml(主题为空):

<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

这个问题可能是相关的.

在我对问题的回答中,我将通过RelativeSource绑定在图像中进行触发,您可以将其重构为一种样式,这样您就不会拥有所有冗余代码.

可能你可以使用DynamicResources为每个Image-control提供两个图像,或者你可以子类Image或创建一个提供属性的UserControl.

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

为了完整性,使用HierarchicalDataTemplate触发器的原始设置只需要使用RelativeSource绑定(如HB的答案所示),例如:

<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>

下面是一个示例图像,其中包含不同的图像TreeView: