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

This question可能是相关的。

正如我在回答问题时回答的那样，我会通过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：

中展开不同图片的示例图片

Tree view with images

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

2 个答案: