title: Keeping WPF GroupItems together in ItemsControl
body: <p>I'm trying to group a collection view by "region" (there will always be 5), and what I'd like to achieve is to keep all 5 GroupItems stacked vertically while only showing 7 <strong>Groups</strong> in my ItemsControl per row.</p>
  
  <p>Example of groups, where each item has a date and 3 values, grouped by 5 regions: AS, CE, KC, NA and LAM:</p>
  
  <p><a href="https://i.stack.imgur.com/zvokB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvokB.png" alt="enter image description here"></a></p>
  
  <p>The following keeps my GroupItems stacked how I want them, but since the ItemsPanel is a DockPanel, they just continue to the right for as many items as there are:</p>
  
  <pre><code>&lt;ItemsControl Grid.Row="1"
            ItemsSource="{Binding DataContext.DailyBuildPlansCollectionView, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"&gt;
  &lt;ItemsControl.ItemsPanel&gt;
      &lt;ItemsPanelTemplate&gt;
          &lt;DockPanel HorizontalAlignment="Left"/&gt;
      &lt;/ItemsPanelTemplate&gt;
  &lt;/ItemsControl.ItemsPanel&gt;
  &lt;ItemsControl.Template&gt;
      &lt;ControlTemplate TargetType="ItemsControl"&gt;
          &lt;!-- Scrollviewer to let me scroll through the data --&gt;
          &lt;ScrollViewer HorizontalScrollBarVisibility="Auto"&gt;
              &lt;ItemsPresenter/&gt;
          &lt;/ScrollViewer&gt;
      &lt;/ControlTemplate&gt;
  &lt;/ItemsControl.Template&gt;
  &lt;ItemsControl.ItemTemplate&gt;
      &lt;!-- Template for each individual build plan --&gt;
      &lt;DataTemplate&gt;
          &lt;Border BorderBrush="DarkSlateGray"
                  BorderThickness="1"&gt;
              &lt;Grid Width="127"&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition/&gt;
                      &lt;RowDefinition/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="35"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;!-- Date across top --&gt;
                  &lt;Border Background="AntiqueWhite"
                          Grid.Row="0"
                          Grid.Column="1"
                          Grid.ColumnSpan="3"/&gt;
                  &lt;TextBlock Grid.Row="0"
                             Grid.Column="1"
                             Grid.ColumnSpan="3"
                             Text="{Binding Day, StringFormat=MMM dd yy}"
                             Margin="2"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             TextAlignment="Center"
                             FontWeight="Bold"/&gt;
  
                  &lt;!-- Region along side --&gt;
                  &lt;Border Background="AntiqueWhite"
                          Grid.Row="0"
                          Grid.Column="0"
                          Grid.RowSpan="2"/&gt;
                  &lt;TextBlock Grid.Row="0" 
                             Grid.Column="0"
                             Grid.RowSpan="2"
                             Text="{Binding Region}"
                             Margin="2"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             TextAlignment="Center"
                             FontWeight="Bold"/&gt;
  
                  &lt;TextBox Grid.Column="1"
                           Grid.Row="1"
                           Text="{Binding Build, Mode=TwoWay}"
                           Margin="2"
                           TextAlignment="Center"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"/&gt;
                  &lt;TextBlock Grid.Column="2"
                             Grid.Row="1"
                             Text="{Binding Sales}"
                             Margin="2"
                             TextAlignment="Center"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"/&gt;
                  &lt;TextBlock Grid.Column="3"
                             Grid.Row="1"
                             Text="{Binding Inventory}"
                             Margin="2"
                             TextAlignment="Center"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"/&gt;
              &lt;/Grid&gt;
          &lt;/Border&gt;
      &lt;/DataTemplate&gt;
  &lt;/ItemsControl.ItemTemplate&gt;
  &lt;!-- Group Styles - Will be grouped by region --&gt;
  &lt;ItemsControl.GroupStyle&gt;
      &lt;GroupStyle&gt;
          &lt;GroupStyle.ContainerStyle&gt;
              &lt;Style TargetType="{x:Type GroupItem}"&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="{x:Type GroupItem}"&gt;
                              &lt;StackPanel Orientation="Vertical"&gt;
                                  &lt;ItemsPresenter/&gt;
                              &lt;/StackPanel&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/GroupStyle.ContainerStyle&gt;
      &lt;/GroupStyle&gt;
  &lt;/ItemsControl.GroupStyle&gt;
  </code></pre>
  
  <p></p>
  
  <p>Result:
  <a href="https://i.stack.imgur.com/y2dm5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2dm5.png" alt="enter image description here"></a></p>
  
  <p>I assumed I could get around this by changing my ItemsPanelTemplate from a DockPanel to a UniformGrid with 7 columns, but this breaks up my groups:
  <a href="https://i.stack.imgur.com/yHmyQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yHmyQ.png" alt="enter image description here"></a></p>
  
  <p>The end result I'd like to achieve would look like this (crossed out the dates to be less confusing, they would continue on as normal):</p>
  
  <p><a href="https://i.stack.imgur.com/Cqzr5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cqzr5.png" alt="enter image description here"></a></p>
  
  <p>Any ideas on how I can achieve this?</p>