In meiner XAML sind zwei DataTemplates definiert, die jeweils für ein separates ItemsControl-Panel verwendet werden.

Das Haupt-ItemsControl listet Foo-Objekte auf, die in einem ObservableCollection-Objekt gespeichert sind.

Das Foo-Objekt selbst verfügt über einen eigenen Satz von Elementen, die als ObservableCollection-Objekt gespeichert sind.

Ich habe versucht, die XAML so zu definieren, dass jedes der ObservableCollection Foo-Elemente mit seinem Namen in einer Kopfzeile angezeigt wird (Das erste ItemsControl). Aus diesem Grund sollte die Liste in jedem Foo-Element selbst horizontal (mit dem zweiten ItemsControl) mit einem verwandten Feld direkt darunter angezeigt werden. Wenn genügend Elemente vorhanden sind, sollten sie bei Bedarf in die nächste Zeile umgebrochen werden.

So steht die Benutzeroberfläche aktuell:

So möchte ich, dass die Benutzeroberfläche tatsächlich angezeigt wird:

Mein Markup (Schaltflächensteuerelemente sind für einen anderen Aspekt der Benutzeroberfläche bestimmt):

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <ItemsControl x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" />
        </ScrollViewer>
        <StackPanel Grid.Column="1" Background="DarkGray">
            <Button Click="OnLoad">_Load</Button>
            <Button Click="OnSave">_Save</Button>
            <Button Click="OnAdd">_Add</Button>
            <Button Click="OnDelete">_Delete</Button>
        </StackPanel>
    </Grid>

DataTemplate zur Auflistung von Foo-Artikeln:

<DataTemplate x:Key="GameTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" />
                <ItemsControl x:Name="imageContent" 
                              ItemsSource="{Binding FileList}" 
                              ItemTemplate="{StaticResource GameImagesTemplate}" 
                              Grid.Row="1" />
            </Grid>
        </DataTemplate>

DataTemplate zum Auflisten von Elementen in jedem Foo-Element:

<DataTemplate x:Key="GameImagesTemplate">
            <WrapPanel Orientation="Horizontal">
                <StackPanel Orientation="Vertical" >
                    <Image Source="{Binding FileInfo.FullName}" 
                       Margin="8,8,8,8" 
                       Height="70" 
                       Width="70" />
                    <Label Content="{Binding Name}" />
                </StackPanel>
            </WrapPanel>
        </DataTemplate>

Ich bin ziemlich neu in WPF, daher habe ich das Gefühl, dass es ein Problem ist, das durch die Verwendung der Steuerelemente verursacht wird.

Welche WPF-Änderungen müsste ich vornehmen, um die gewünschte Benutzeroberfläche zu generieren?