Alignment of ListBox items

Question

I am trying to set the alignment of the contents in the ListBox below. I have wrapped the ListBox inside a ScrollViewer to make it scroll horizontally.

Each element of the Listbox is a Stackpanel and I am trying to align each one to the Top and to set the width to auto for each.

Right now, the stackpanels are centered vertically and the width of each one is the same and is represented by the width of the largest panel.

I have put HorizontalContentAlignment="Left" and VerticalContentAlignment="Top", as I have read in similar posts but it does not change anything.

<ScrollViewer Grid.Row="1"   VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"  >
                <ListBox ItemsSource="{Binding Termene}" SelectedItem="{Binding SelectedTermenCondica}"  HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Rows="1"   />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate >
                        <DataTemplate >
                            <StackPanel Margin="2"  >
                                <StackPanel.Resources>
                                    <CollectionViewSource Source="{Binding Dosare}" x:Key="dosareView"  IsLiveSortingRequested="True" >
                                        <CollectionViewSource.SortDescriptions>
                                            <scm:SortDescription PropertyName="Ora" />
                                        </CollectionViewSource.SortDescriptions>
                                    </CollectionViewSource>
                                    <Style x:Key="NoFocusColumStyle" TargetType="{x:Type DataGridCell}">
                                        <Setter Property="IsHitTestVisible" Value="False"/>
                                    </Style>
                                </StackPanel.Resources>
                                <TextBlock Text="{Binding NumeComplet, StringFormat='Complet {0}'}" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Top"></TextBlock>
                                <TextBlock Text="{Binding TermenCB, StringFormat='Termen: {0}'}" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Top"></TextBlock>
                                <DataGrid IsSynchronizedWithCurrentItem="True" CellStyle="{StaticResource NoFocusColumStyle}" IsReadOnly="True" ItemsSource="{Binding Source={StaticResource dosareView}}" Style="{StaticResource DGRapaorte}" AutoGenerateColumns="False" >

                                    <DataGrid.Columns>
                                        <DataGridTextColumn  Header="Nr. dosar" Binding="{Binding NumarDosar}"/>
                                        <DataGridTextColumn CanUserSort="True" SortDirection="Ascending" SortMemberPath="Ora"  Header="Ora" Binding="{Binding Ora, StringFormat={}{0:HH:mm}}" />
                                        <DataGridTextColumn Header="Obiect" Binding="{Binding Obiect}"/>
                                    </DataGrid.Columns>
                                </DataGrid>
                               </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </ScrollViewer>

Later edit: I have added some data (three items in Termene to show you how it looks. I have blurred them out, but you can see the issue. Here is how it looks right now:

Scrolled further:

Now, here is how I would like it to look like:

As you can see, the height and width of every item is set with the width and height of the largest item.

Answer 1

Replace the Uniformgrid part with this:

<ItemsPanelTemplate>
    <StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>

Source: https://stackoverflow.com/a/3565590/4394435

This example worked for me:

<Window x:Class="WpfMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfMVVM"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="500">
    <ListBox ItemsSource="{Binding Items}" VerticalContentAlignment="Top">
        <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="2">
                    <TextBlock Text="test" HorizontalAlignment="Center" FontWeight="Bold" />
                    <TextBlock Text="blub" HorizontalAlignment="Center" FontWeight="Bold" />
                    <DataGrid IsSynchronizedWithCurrentItem="True" IsReadOnly="True"
                              ItemsSource="{Binding DataGridItems}" AutoGenerateColumns="False">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Nr. dosar" Binding="{Binding Text}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

with this viewModel

public class DataViewModel
{
    public DataViewModel()
    {

    }

    public List<Item> Items { get; set; } = new List<Item>()
    {
        new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "a"} }},
        new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "aaaaaaaaaaa"} }},
        new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaa"} }},
        new Item(){DataGridItems = new List<DataGridItem>()
        {
            new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
            new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
            new DataGridItem() { Text = "aaa"},
            new DataGridItem() { Text = "aaaaaaaaaa"}
        }}
    };
}

public class Item
{
    public List<DataGridItem> DataGridItems { get; set; }
}

public class DataGridItem
{
    public string Text { get; set; }
}