WPF ListBox ItemsContainersStyle拉伸项目

Question

我正在使用C＃.Net 4.7.2和WPF 4.5.2

我想生成一个包含多列的视图。每列包含一个数字行。一列与另一列的确切行数可以不同。

这是一个例子：

为了达到图片中显示的效果，我尝试了这个xaml

<UserControl x:Class="MyNamespace.MyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920">


    <ListBox ItemsSource="{Binding Groups}" HorizontalAlignment="Left" VerticalContentAlignment="Top" Padding="0">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>
            <DataTemplate>

                <Grid HorizontalAlignment="Stretch">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"    />
                        <RowDefinition Height="Auto"    />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"  />
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding GroupHeader}" HorizontalAlignment="Stretch" />


                    <ListBox Grid.Row="2" ItemsSource="{Binding RowElements}"                              
                             HorizontalAlignment="Stretch"
                             BorderThickness="0"                              
                             Margin="0">

                        <ListBox.ItemContainerStyle>

                            <Style TargetType="{x:Type ListBoxItem}">

                                <Setter Property="HorizontalAlignment"      Value="Stretch" />
                                <Setter Property="Margin"                   Value="0"       />

                            </Style>

                        </ListBox.ItemContainerStyle>

                        <ListBox.ItemTemplate>
                            <DataTemplate>


                                <Grid HorizontalAlignment="Stretch">

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"    />
                                        <ColumnDefinition Width="*"       />
                                    </Grid.ColumnDefinitions>



                                    <TextBox    Grid.Column="0" Text="{Binding RowHeader}"                                                   
                                                IsReadOnly="True"                                                    
                                                TextAlignment="Left"
                                                HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
                                                VerticalAlignment="Stretch"  VerticalContentAlignment="Center" />

                                    <TextBox    Grid.Column="1" Text="{Binding RowValue}"                                                    
                                                TextAlignment="Left"
                                                HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
                                                VerticalAlignment="Stretch"  VerticalContentAlignment="Center"/>

                                </Grid>

                            </DataTemplate>
                        </ListBox.ItemTemplate>

                    </ListBox>


                </Grid>


            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

</UserControl>

与此视图模型一起（简化）

using System.Collections.ObjectModel;
using System.Windows.Controls;

namespace MyNamespace
{

    public class Group
    {
        public string GroupHeader { get; set; }

        public ObservableCollection<RowElement> RowElements { get; set; }


    }


    public class RowElement
    {
        public string RowHeader { get; set; }

        public double RowValue { get; set; }
    }



    public partial class MyView : UserControl
    {



        public MyView()
        {
            InitializeComponent();

            Groups = new ObservableCollection<Group>();            
            Group group;


            group = new Group() { GroupHeader = "GroupHeader 1", RowElements = new ObservableCollection<RowElement>() };
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 1" , RowValue = 5d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 2" , RowValue = 3.2d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 3" , RowValue = 1.9d } );
            Groups.Add( group );

            group = new Group() { GroupHeader = "GroupHeader 2" , RowElements = new ObservableCollection<RowElement>() };
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 1" , RowValue = 4d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 2" , RowValue = 9d } );            
            Groups.Add( group );

            group = new Group() { GroupHeader = "GroupHeader 3" , RowElements = new ObservableCollection<RowElement>() };
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 1" , RowValue = 4.32d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 2" , RowValue = 7.98d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 3" , RowValue = 2.36d } );
            group.RowElements.Add( new RowElement() { RowHeader = "RowHeader 4" , RowValue = 12d } );
            Groups.Add( group );
        }


        public ObservableCollection<Group> Groups { get; set; }

    }
}

如您在图片中看到的，顶级ListBox中的LixtBoxItems应该完全拉长。不管我在做什么，都将按照实际需要的大小而不是一致的大小来呈现元素。

我在做什么错了？