如何在堆栈面板中正确定位元素？

Question

让我们说，我有一个看起来像这样的课程：

public class Item
{
    public string Name { get; set; }
    public List<Item> SubItems { get; set; }
}

我想以这样一种方式显示这些项目的列表，即顶层项目是水平排列的，它们的子元素垂直排列在它们下面：

Item1      Item2        Item3      Item4
           SubItem2.1
           SubItem2.2

我试图使用ListView来实现这一目标，而我的XAML看起来像这样：

<ListView x:Name="ItemsList">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" VerticalAlignment="Top">
                <TextBlock Text="{Binding Name}" Background="#FF8686FF" Width="25" Height="25"/>
                <ListView ItemsSource="{Binding SubItems}" BorderBrush="{x:Null}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

但是，我的列表并不完全符合我的要求：

如您所见，这些物品垂直对齐其封闭堆叠面板的中心（反过来占据了所有可用空间）。如何将元素正确对齐到顶部？或者也许有更好的方法来实现我想要的不同容器？

Answer 1

您必须设置容器样式：

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="VerticalContentAlignment" Value="Top" />
    </Style>
</ListView.ItemContainerStyle>