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

时间：2011-11-02 21:45:53

标签： wpf treeview hierarchicaldatatemplate itemspanel

美好的一天，

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

我有几个项目，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>

当然，其他人的作品都有不同的风格，并且儿童用品的布局不同。任何人都有这样做的经验可以帮助我吗？

2 个答案:

答案 0 :(得分：5)

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

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

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

enter image description here

我在此处上传了示例解决方案：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>

答案 1 :(得分：3)

我在很久以前尝试创建类似界面时学到的一点是，使用ListBox而不是TreeView 更好 。

为什么呢？

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

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

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

    ToggleButton

    您能看到定义标题和可扩展正文的容易程度。如果您确实需要嵌套数据，请在视图模型中添加Level属性（您使用MVVM不是吗？！）然后创建一个返回保证金的<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> （即IValueConverter）缩进缩进。

    希望这会有所帮助，如果您有其他问题，请随时提出。

相关问题
最新问题