title: Horizontal orientated WrapPanel within ItemsControl lists vertically
body: <p>I have two DataTemplates defined within my XAML, each used for a seperate ItemsControl panel.</p>
  
  <p>The main ItemsControl lists Foo objects stored within an ObservableCollection object.</p>
  
  <p>The Foo object itself has its own set of items stored within as an ObservableCollection object.</p>
  
  <p>I tried to define the XAML in a way that allows for each of the ObservableCollection Foo items to be displayed with its name in a header (The first ItemsControl). From this the list within each Foo item itself should be displayed horizontally (Using the second ItemsControl) with a related field directly below. If enough items are present then they should wrap to the next line where necessary.</p>
  
  <p>This is how the UI currently stands:</p>
  
  <p><img src="https://i.stack.imgur.com/8IYs8.jpg" alt="Incorrect UI"></p>
  
  <p>This is how I wish the UI to actually appear:</p>
  
  <p><img src="https://i.stack.imgur.com/OtEOa.jpg" alt="Correct UI"></p>
  
  <p>My Markup (Button controls are for another aspect of the UI) :</p>
  
  <pre><code>&lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*"/&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"&gt;
              &lt;ItemsControl x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" /&gt;
          &lt;/ScrollViewer&gt;
          &lt;StackPanel Grid.Column="1" Background="DarkGray"&gt;
              &lt;Button Click="OnLoad"&gt;_Load&lt;/Button&gt;
              &lt;Button Click="OnSave"&gt;_Save&lt;/Button&gt;
              &lt;Button Click="OnAdd"&gt;_Add&lt;/Button&gt;
              &lt;Button Click="OnDelete"&gt;_Delete&lt;/Button&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>DataTemplate for listing Foo items:</p>
  
  <pre><code>&lt;DataTemplate x:Key="GameTemplate"&gt;
              &lt;Grid&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="30" /&gt;
                      &lt;RowDefinition Height="*" /&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" /&gt;
                  &lt;ItemsControl x:Name="imageContent" 
                                ItemsSource="{Binding FileList}" 
                                ItemTemplate="{StaticResource GameImagesTemplate}" 
                                Grid.Row="1" /&gt;
              &lt;/Grid&gt;
          &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>DataTemplate for listing items within each Foo item:</p>
  
  <pre><code>&lt;DataTemplate x:Key="GameImagesTemplate"&gt;
              &lt;WrapPanel Orientation="Horizontal"&gt;
                  &lt;StackPanel Orientation="Vertical" &gt;
                      &lt;Image Source="{Binding FileInfo.FullName}" 
                         Margin="8,8,8,8" 
                         Height="70" 
                         Width="70" /&gt;
                      &lt;Label Content="{Binding Name}" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/WrapPanel&gt;
          &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>I'm fairly new to WPF so I have a feeling it's an issue caused by how I am using the controls.</p>
  
  <p>What WPF changes would I need to make in order to generate the UI I would like?</p>