Mam dwa DataTemplates zdefiniowane w moim XAML, każdy używany do oddzielnego panelu ItemsControl.

Główny ItemsControl wyświetla obiekty Foo przechowywane w obiekcie ObservableCollection.

Sam obiekt Foo ma swój własny zestaw elementów przechowywanych w ramach obiektu ObservableCollection.

Próbowałem zdefiniować XAML w taki sposób, aby każdy element ObservableCollection Foo był wyświetlany z nazwą w nagłówku (pierwszy ItemsControl). Od tego miejsca lista w każdym elemencie Foo powinna być wyświetlana poziomo (przy użyciu drugiego ItemsControl) z odpowiednim polem bezpośrednio poniżej. Jeśli jest wystarczająco dużo przedmiotów, powinny zawinąć się do następnej linii, jeśli to konieczne.

Tak właśnie wygląda interfejs użytkownika:

W ten sposób chcę, aby interfejs użytkownika rzeczywiście się pojawiał:

Mój znacznik (przyciski sterujące są dla innego aspektu interfejsu użytkownika):

<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 do wyświetlania elementów Foo:

<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 do wyświetlania pozycji w każdym elemencie Foo:

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

Jestem dość nowy w WPF, więc mam wrażenie, że jest to problem spowodowany przez to, w jaki sposób korzystam z kontrolek.

Jakie zmiany WPF musiałbym wprowadzić, aby wygenerować interfejs użytkownika, który chciałbym?