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

Question

美好的一天,

我在确定如何模板化以下TreeView项目布局时遇到了一些困难:

我有几个项目,SearchList,其中包含一个Search集合,其中包含DataSet的集合(排序,但不在此处).我遇到的困难是按照我想要的方式设置每个节点级别.我正在使用MVVM,并且TreeViews ItemsSource属性被设置为SearchListViewModels的ObservableCollection,后者又在对象树中一直包含我的对象.

我可以成功设置SearchList HierarchicalDataTemplate的样式以正确显示它们.我挂起的地方是SearchTerm节点样式.我希望DataSets在SearchTerm内容区域右侧的包装面板或统一网格(我还没有决定)中表示.我已经修改了一个TreeViewItem控件模板,以此方式表现,但是如果我在Search HierarchicalDataTemplate的ItemContainerStyle属性中设置它,它什么都不做.显示的所有内容都是搜索的内容.

我的Altered 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="Header"部分ContentPresenter
• 我认为你正在应用ItemContainerStyle错误的HierarchicalDataTemplate水平.它应该在父项上指定,以便影响子项(在您的情况下SearchListViewModel).
• 默认Template为TreeViewItem勾画出ContentPresenter在Auto尺寸ColumnDefinition,因此WrapPanel将不会成功地换,除非你修改ItemContainerStyle父也.我UniformGrid在下面的示例中将其更改为a

随着上面和其他一些事情的变化,我得到了一个看起来像这样的结果,希望它非常接近你所追求的

我在这里上传了示例解决方案: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>