将 HierarcicalDataTemplates 与 TreeViewItem 控件模板结合使用

Question

我在弄清楚如何模板化以下 TreeView 项目布局时遇到一些困难：

我有几个项目，SearchList ，其中包含 Search 的集合，其中包含 DataSet 的集合（有点像，但这不是重点）。我遇到的困难是按照我想要的方式设置每个节点级别的样式。我正在使用 MVVM，并且 TreeViews ItemsSource 属性设置为 SearchListViewModels 的 ObservableCollection，而该集合又包含我的对象一直到对象树。

我可以成功设置 SearchList HierarchicalDataTemplate 的样式以正确显示它们。我困惑的地方是 SearchTerm 节点样式。我希望数据集在 SearchTerm 内容区域右侧的包装面板或统一网格（我尚未决定）中表示。我已经修改了 TreeViewItem 控件模板以按照我认为的方式运行），但是如果我在搜索 HierarchicalDataTemplate 的 ItemContainerStyle 属性中设置它，它不会执行任何操作。显示的只是搜索的内容。

我的更改后的 TreeViewItem 模板

<Style TargetType="{x:Type TreeViewItem}" x:Key="AlteredTreeViewItem">
    <Setter Property="HorizontalContentAlignment"
        Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"
                            MinWidth="19" />
                        <ColumnDefinition Width="0.414*" />
                        <ColumnDefinition Width="0.586*"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="Bd" HorizontalAlignment="Stretch"
                        Grid.Column="1" Grid.ColumnSpan="1" Background="#7F058956">
                        <ContentPresenter x:Name="PART_Header" Margin="10,0" />
                    </Border>
                    <WrapPanel x:Name="ItemsHost"
                        Grid.Column="2" IsItemsHost="True"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的搜索分层数据模板

    <HierarchicalDataTemplate DataType="{x:Type local:SearchViewModel}"  ItemsSource="{Binding MySearch.Custodians}" ItemContainerStyle="{StaticResource AlteredTreeViewItem}">
        <TextBlock Text="{Binding MySearch.SearchName}" Foreground="Black" FontFamily="Arial" FontSize="16"/>
    </HierarchicalDataTemplate>

当然可以使用不同的样式并且使子项布局不同吗？如何才能实现这一目标？

Answer 1

看来你已经非常接近你所追求的了。我尝试根据您发布的代码重新创建您的场景，并注意到它的一些问题（这当然是基于我对您发布的代码的解释）

• 您缺少 ContentSource= ContentPresenter 的“Header” 部分
• 我认为您在错误的 HierarchicalDataTemplate 级别应用了 ItemContainerStyle。应该在父级上指定它，以便影响子级（在您的情况下为 SearchListViewModel）。
• TreeViewItem 的默认 Template 以 Auto 大小的 ColumnDefinition 布局 ContentPresenter，因此除非您也修改父项的 ItemContainerStyle，否则 WrapPanel 将不会成功换行。 我在下面的示例中将其更改为 UniformGrid

通过上面的更改和其他一些内容，我得到了一个看起来像这样的结果，希望与您的结果非常接近 之后

在

，我在此处上传了示例解决方案：https://www.dropbox.com/s/4v2t8imikkagueb/TreeViewAltered.zip？ dl=0

这是它的 Xaml 代码（代码太多，无法全部发布..）

<Window.Resources>
    <!-- DataSet-->
    <HierarchicalDataTemplate DataType="{x:Type data:DataSet}">
        <Border BorderThickness="3"
                BorderBrush="Gray"
                Background="Green">
            <TextBlock Text="{Binding Path=Tables[0].TableName}"
                       Margin="5"/>
        </Border>
    </HierarchicalDataTemplate>

    <!-- SearchViewModel -->
    <HierarchicalDataTemplate DataType="{x:Type viewModel:SearchViewModel}"
                              ItemsSource="{Binding DataSets}">
        <TextBlock Text="{Binding DisplayName}"
                   Foreground="Black"
                   FontFamily="Arial"
                   FontSize="16"/>
    </HierarchicalDataTemplate>

    <!-- SearchListViewModel -->
    <HierarchicalDataTemplate DataType="{x:Type viewModel:SearchListViewModel}"
                              ItemsSource="{Binding SearchList}">
        <HierarchicalDataTemplate.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="19" />
                                    <ColumnDefinition Width="0.414*" />
                                    <ColumnDefinition Width="0.586*"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="Bd"
                                        HorizontalAlignment="Stretch" 
                                        Grid.Column="1"
                                        Grid.ColumnSpan="1"
                                        Background="#7F058956">
                                    <ContentPresenter x:Name="PART_Header"
                                                      ContentSource="Header"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                                </Border>
                                <UniformGrid x:Name="ItemsHost"
                                             Grid.Column="2"
                                             Columns="3"
                                             IsItemsHost="True"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </HierarchicalDataTemplate.ItemContainerStyle>
        <TextBlock Text="{Binding DisplayName}"
                   FontSize="20"/>
    </HierarchicalDataTemplate>
</Window.Resources>
<Grid>
    <TreeView ItemsSource="{Binding SearchListViewModels}" />
</Grid>

Answer 2

很久以前，我在尝试创建类似界面时了解到，使用ListBox比TreeView更好 /代码>。

为什么？

1. 如果您只有一级扩展（如示例中所示），您将对布局有更多控制，因为您有一个 DataTemplate 来设置样式。

2. 自定义 ListBox 比 TreeView 容易得多，因为您不必关心 GridViewColumnHeader 和 GridViewColumnPresenters 等等

要获得扩展部分（这就是您最初选择 TreeView 的原因），只需使用定义了两行的 Grid 和一个 Expander > 在第二行绑定到ToggleButton 的 IsChecked 属性。请参阅我从日志查看器中提取的示例。

<DataTemplate>
    <Grid Margin="0,0,0,3" Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30" SharedSizeGroup="SSG_TimeIcon"/>
            <ColumnDefinition Width="120" SharedSizeGroup="SSG_Time"/>
            <ColumnDefinition Width="30" SharedSizeGroup="SSG_LevelIcon"/>
            <ColumnDefinition Width="70" SharedSizeGroup="SSG_Level"/>
            <ColumnDefinition Width="*" SharedSizeGroup="SSG_Message"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- ProgramTime -->
        <Rectangle Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" Width="16" Height="16" VerticalAlignme="Top"  HorizoalAlignme="Stretch" Fill="{StaticResource Icon_Timer}"/>
        <TextBlock Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" VerticalAlignme="Top" HorizoalAlignme="Stretch" Text="{Binding Path=TimeStamp, Converter={StaticResource ObjectToStringConverter}}" ToolTip="{Binding Path=ProgramTime}"/>
        <!-- Level -->
        <Rectangle Grid.Column="2" Grid.Row="0" Margin="10,0,0,0" Width="16" Height="16" VerticalAlignme="Top" HorizoalAlignme="Stretch" Fill="{Binding Path=Level, Converter={StaticResource MappingConverterNinjaLogLevelEnumToBrushResource}}"/>
        <TextBlock Grid.Column="3" Grid.Row="0" Margin="5,0,0,0" Text="{Binding Path=LevelFriendlyName}" VerticalAlignme="Top" HorizoalAlignme="Stretch"/>
        <!-- Message -->
        <StackPanel Grid.Column="4" Grid.Row="0" Margin="10,0,0,0" Orieation="Horizoal" >
            <TextBlock Margin="0,0,0,0" Text="{Binding Path=LogMessage}" TextWrapping="Wrap" VerticalAlignme="Top"  HorizoalAlignme="Stretch"/>
            <ToggleButton x:Name="ExpandExceptiooggleButton" VerticalAlignme="Top" Margin="5,0,0,0" IsChecked="False" 
                          Coe="Show Details" Tag="Hide Details" Style="{StaticResource TextButtonStyle}"
                          Foreground="{StaticResource BlueBrush}" Background="{StaticResource RedBrush}"
                          Visibility="{Binding Path=HasException, Converter={StaticResource BoolToVisibilityConverter}}" />
        </StackPanel>
        <Expander IsExpanded="{Binding Path=IsChecked, ElemeName=ExpandExceptiooggleButton}" Style="{StaticResource CoeExpanderStyle}" 
                  Margin="10,0,0,0" Grid.Column="4" Grid.Row="1">
            <Border BorderBrush="{StaticResource DarkGreyBrush}" BorderThickness="1,0,0,0">                                
                <TextBlock Text="{Binding Path=Exception}" Margin="5,0,0,0"/>
            </Border>
        </Expander>
    </Grid>
</DataTemplate>

您能看到定义标头和可扩展主体是多么容易吗？如果您确实需要嵌套数据，请在您的视图模型中添加 Level 属性（您正在使用 MVVM，不是吗？！），然后创建一个返回 Margin 的 IValueConverter （即 厚度）来伪造缩进。