Wpf 将HierarcialDataTemplates与TreeViewItem控件模板结合使用

Wpf 将HierarcialDataTemplates与TreeViewItem控件模板结合使用,wpf,treeview,hierarchicaldatatemplate,itemspanel,Wpf,Treeview,Hierarchicaldatatemplate,Itemspanel,我很难确定如何为以下TreeView项目布局设置模板: 我有几个项目,SearchList,它包含一个搜索集合,它包含一个数据集集合(有点像,但这不是重点)。我遇到的困难是按照我想要的方式设置每个节点级别的样式。我使用的是MVVM,TreeViews ItemsSource属性被设置为SearchListViewModels的ObservableCollection,它依次包含对象树中的所有对象 我可以成功设置SearchList HierarchycalDataTemplate的样式以正确显

我很难确定如何为以下TreeView项目布局设置模板:

我有几个项目,SearchList,它包含一个搜索集合,它包含一个数据集集合(有点像,但这不是重点)。我遇到的困难是按照我想要的方式设置每个节点级别的样式。我使用的是MVVM,TreeViews ItemsSource属性被设置为SearchListViewModels的ObservableCollection,它依次包含对象树中的所有对象

我可以成功设置SearchList HierarchycalDataTemplate的样式以正确显示它们。我挂断的地方是SearchTerm节点样式。我希望数据集在SearchTerm内容区域右侧的包装面板或统一网格(我还没有决定)中表示。我已经修改了一个TreeViewItem控件模板,使其按我认为的方式运行),但是如果我在Search HierarchycalDataTemplate的ItemContainerStyle属性中设置它,它将什么也不做。显示的只是搜索的内容

我修改过的TreeViewItem模板

我的搜索分层数据模板


当然,有可能既有不同的风格,又有不同的子项布局?这是如何实现的?

看来你已经非常接近你的目标了。我试图根据您发布的代码重新创建您的场景,并注意到其中存在一些问题(当然,这些问题是基于我对您发布的代码的解释)

  • 您缺少
    ContentSource=“Header”
    内容演示器的
    ContentSource=“Header”部分
  • 我认为您在错误的
    HierarchycalDataTemplate
    级别应用了
    ItemContainerStyle
    。应该在父级上指定它,以便影响子级(在您的情况下,
    SearchListViewModel
  • treevieItem
    的默认
    模板在
    Auto
    sized
    ColumnDefinition
    中设置
    ContentPresenter
    ,因此
    WrapPanel
    不会成功包装,除非您也修改父项的
    ItemContainerStyle
    。在下面的示例中,我将其更改为
    UniformGrid
随着上面的变化和其他一些事情,我得到了一个结果,看起来像这样,希望这是非常接近你所追求的

我在这里上传了示例解决方案:

下面是它的Xaml代码(太多的代码无法全部发布)


很久以前我在尝试创建类似的界面时学到的一点是,使用
列表框比使用
树视图更好

为什么?

  • 如果您只有一个级别的扩展(从示例中可以看出),那么您将对布局有更多的控制,因为您只有一个
    DataTemplate
    来设置样式

  • 自定义
    列表框
    比自定义
    树视图
    容易得多,因为您不必关心
    GridViewColumnHeader
    GridViewColumnPresenters

  • 要获取扩展部分(这就是您最初选择
    树视图的原因),只需使用定义了两行的
    网格
    ,并在绑定到
    切换按钮
    IsChecked
    属性的第二行中使用
    扩展器
    。查看我从日志查看器中提取的示例

    
    

    您可以看到定义标题和可扩展主体是多么容易吗。如果您确实需要嵌套数据,请在视图模型中添加一个级别属性(您使用的是MVVM,不是吗?!),然后创建一个
    IValueConverter
    ,它返回一个边距(即
    厚度
    )来伪造缩进。

    看起来很棒!明天早上我要去看一看。谢谢感谢Meleak提供了一个很好的解决方案。它像广告宣传的那样起作用,向我展示了我的错误做法。只需稍微增加一点样式,我现在就有了一种令人赏心悦目的方法,可以在更紧凑的空间中可视化大型数据层次结构。享受额外的代表@CodeWarrior:当然,很高兴我能:)@CodeWarrior:你在寻找任何额外的信息来奖励赏金吗?只是检查一下,因为你之前的评论表明你计划奖励它,明天就要结束了:)我道歉。我以为把它标记为答案会奖励赏金,但事实并非如此。都做完了。谢谢你的回答。是的,我本来希望能够使用TreeView,因为我期待很快会有一个在相当长的时间内布局项目的要求
    <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>
    
    <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>