Отформатируйте иерархическую таблицу данных для TreeView

Question

Я пытаюсь сделать TreeView в XAML, и он работает хорошо. 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), но на этот раз в конце дочерних элементов

Это должно быть в точности как:

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

Вам нужно установить ItemContainerStyle для TreeView

Хорошей отправной точкой было бы что-то вроде этого

<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, который вы затем привязываете к свойству, которое хотите отобразить.