Changing vertical alignment of TreeView expander togglebutton

Question

My TreeView is using HierarchicalDataTemplate to display the data. The TreeViewItem spans multiple lines and shows the expander togglebutton to be vertical-aligned in the middle.

How can I force the expander toggle button to be vertical-aligned top?

XAML code:

<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# Code:

        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

Putting this into your HierarchicalDataTemplates should move the glyph inside the toggle button to the top but still give you a large clickable area

This will set the style for the first level of expanders

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

This will set the style for any subsequent levels

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