更改树视图扩展器切换按钮的垂直对齐方式

Question

My TreeView 正在使用 HierarchicalDataTemplate 来显示数据。 TreeViewItem 跨越多条线，并在中间显示展开器切换按钮垂直对齐。

如何强制扩展器切换按钮垂直对齐顶部？

XAML 代码：

<Window x:Class="TreeView.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<TreeView ItemsSource="{Binding Tables[Data]}">
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="TreeViewItem.IsExpanded" Value="True"/>
            <Style.Resources>
                <Style TargetType="{x:Type Path}">
                    <Setter Property="VerticalAlignment" Value="Top"/>
                </Style>
            </Style.Resources>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Structure}">
            <HierarchicalDataTemplate.ItemContainerStyle>
                <Style TargetType="TreeViewItem">
                    <Style.Resources>
                        <Style TargetType="{x:Type Path}">
                            <Setter Property="VerticalAlignment" Value="Top"/>
                        </Style>
                    </Style.Resources>
                </Style>
            </HierarchicalDataTemplate.ItemContainerStyle>
            <TextBlock Text="{Binding Text}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>    

C# 代码：

        public MainWindow()
    {
        InitializeComponent();
        DataTable dt = new DataTable("Data");
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("ParentId", typeof(int));
        dt.Columns.Add("Text");
        dt.Rows.Add(1, null, "Root node 1st linenRoot node 2nd linenRoot node 3rd line");
        dt.Rows.Add(2, null, "2nd root node 1st linen2nd root node next line");
        dt.Rows.Add(3, 1, "OnenOnenOne");
        dt.Rows.Add(4, 1, "TwonTwonTwo");
        dt.Rows.Add(5, 2, "ThreenThreenThree");
        dt.Rows.Add(6, 2, "Four");
        dt.Rows.Add(7, 3, "Five");
        dt.Rows.Add(8, 3, "Six");
        dt.Rows.Add(9, 4, "Seven");
        DataSet ds = new DataSet();
        ds.Tables.Add(dt);
        ds.Relations.Add("Structure", dt.Columns["Id"], dt.Columns["ParentId"]);
        dt.DefaultView.RowFilter = "ParentId IS NULL";
        DataContext = ds;
    }

Answer 1

将其放入您的分层数据模板中应该将切换按钮内的字形移动到顶部，但仍会为您提供一个大的可点击区域

这将为第一级扩展器设置样式

<TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
        <Setter Property="TreeViewItem.IsExpanded" Value="True"/>
        <Style.Resources>
            <Style TargetType="{x:Type Path}">
                <Setter Property="VerticalAlignment" Value="Top"/>
            </Style>
        </Style.Resources>
    </Style>
</TreeView.ItemContainerStyle>

这将为任何后续级别设置样式

        <HierarchicalDataTemplate.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Style.Resources>
                    <Style TargetType="{x:Type Path}">
                        <Setter Property="VerticalAlignment" Value="Top"/>
                    </Style>
                </Style.Resources>
            </Style>
        </HierarchicalDataTemplate.ItemContainerStyle>