格式化TreeView的HierachicalDatatemplate

时间:2018-11-02 13:58:38

标签: wpf treeview hierarchicaldatatemplate

我正在尝试在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中)来改善显示效果,但这一次是在孩子的末尾

应该完全一样:

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 "/>   

但是它不起作用。这是所有有关格式化的问题,但我不够熟练。你能帮我吗?

1 个答案:

答案 0 :(得分:0)

您需要为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之后添加另一个控件,然后将其绑定到要显示的属性。