格式化TreeView的层次结构数据模板

Question

我正在尝试在XAML中创建TreeView，它运行良好。1( 我有一个班级，里面有一个名字和一个儿童列表

<TreeView x:Name="TreeViewOffset"  ItemsSource="{Binding OffsetsCollection}" VM:TreeViewHelper.SelectedItem="{Binding MyCollection, Mode=TwoWay}"   Margin="19,32,59,33" AutomationProperties.IsColumnHeader="True">
<TreeViewContainer>Some Properties</TreeViewContainer>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type VM:ParentViewModel}"  ItemsSource="{Binding Children}">                           
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Reference" 
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Ref"/>
<RowDefinition SharedSizeGroup="Value"/>                               
</Grid.RowDefinitions>
<TextBlock  Grid.Column="0"  Text="{Binding MyName}" Margin="10, 10, 10,10 "/>                            
</Grid>                           
</HierarchicalDataTemplate>

<DataTemplate DataType="{x:Type VM:ChildrenViewModel}">
<Grid >
<Grid.ColumnDefinitions>
<!--Placeholders for two columns of ToggleButton-->
<ColumnDefinition SharedSizeGroup="RefName"/>                                   
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Name"/>
<RowDefinition SharedSizeGroup="Value"/>                               
</Grid.RowDefinitions>
<TextBlock Text="{Binding ChildrenValue}" Grid.Column="1" Margin="25, 0,0, 0" />
</Grid>
</DataTemplate>                  

</TreeView.Resources>

2( 我想通过添加另一个文本框(包含在ParentViewModel中(来改进显示，但这次是在children的末尾

它应该完全像：

Parent : Name
Children1 Value
Children2 Value
Children3 Value
Children4 Value
Value

而这就是问题所在，如何改进XAML来显示价值？

我已尝试在下插入

<TextBlock  Grid.Column="0"  Text="{Binding MyName}" Margin="10, 10, 10,10 "/> 

这个

<TextBlock  Grid.Column="0" Grid.Row="1"   Text="{Binding Value}" Margin="10, 10, 10,10 "/>   

但它不起作用。这都是关于格式的问题，但我不够专业。你能帮我吗？

Answer 1

您需要为TreeView设置ItemContainerStyle

一个好的起点应该是像这个

<Style x:Key="myTreeViewItemContainerStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="14" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
Grid.Row="0"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource myExpandCollapseToggleStyle}" />
<Border
x:Name="PART_Border"
Grid.Row="0"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter
x:Name="PART_Header"
Margin="0,2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<!--  Use the same colors for a selected item, whether the TreeView is focussed or not  -->
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

您可以通过设置其样式将其应用于TreeView

<Style TargetType="{x:Type TreeView}">
<Setter Property="ItemContainerStyle" Value="{StaticResource myTreeViewItemContainerStyle}" />
</Style>

根据您的需求，您需要在ItemsPresenter之后添加另一个控件，然后将其绑定到要显示的属性。