Question

My TreeView正在使用HierarchicalDataTemplate来显示数据。 TreeViewItem跨越多行，并显示扩展器togglebutton在中间垂直对齐。

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

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 line\nRoot node 2nd line\nRoot node 3rd line");
        dt.Rows.Add(2, null, "2nd root node 1st line\n2nd root node next line");
        dt.Rows.Add(3, 1, "One\nOne\nOne");
        dt.Rows.Add(4, 1, "Two\nTwo\nTwo");
        dt.Rows.Add(5, 2, "Three\nThree\nThree");
        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

将它放入HierarchicalDataTemplates应该将切换按钮内的字形移动到顶部，但仍然会给你一个大的可点击区域

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

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

更改TreeView扩展器togglebutton的垂直对齐方式

1 个答案: