title: Grouping GridView in Windows 8 Metro App
body: <p>Can someone give me some hints how to accomplish the grouping
  within a GridView for Metro Apps as shown in the Screenshot below. </p>
  
  <p><img src="https://i.stack.imgur.com/4gzq2.png" alt="zoomed out image"></p>
  
  <p>This Screenshot is from the <a href="http://msdn.microsoft.com/de-de/library/windows/apps/hh465319" rel="nofollow noreferrer">Developer Resources for Windows Metro Apps</a>, 
  but unfortunately there is no description how to accomplish it.</p>
  
  <p>I have the following code snippet:</p>
  
  <p>Xaml:</p>
  
  <pre><code>    ...
  
      &lt;Page.Resources&gt;
          &lt;CollectionViewSource x:Name="cvs" IsSourceGrouped="true"/&gt;
      &lt;/Page.Resources&gt;
  
      &lt;Grid Background="{StaticResource DefaultBackground}"&gt;
  
          &lt;GridView x:Name="DefaultGridView" ItemsSource="{Binding Source={StaticResource cvs}}"&gt;
              &lt;GridView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;StackPanel Orientation="Horizontal"&gt;
                          &lt;Rectangle Fill="{Binding}" Width="100" Height="100" Margin="0 0 5 0"/&gt;
                      &lt;/StackPanel&gt;
                  &lt;/DataTemplate&gt;
              &lt;/GridView.ItemTemplate&gt;
  
              &lt;GridView.GroupStyle&gt;
                  &lt;GroupStyle&gt;
  
                      &lt;GroupStyle.HeaderTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" /&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/GroupStyle.HeaderTemplate&gt;
  
                      &lt;GroupStyle.Panel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" /&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/GroupStyle.Panel&gt;
  
                  &lt;/GroupStyle&gt;
              &lt;/GridView.GroupStyle&gt;
  
  
              &lt;GridView.ItemsPanel&gt;
                  &lt;ItemsPanelTemplate&gt;
                     &lt;StackPanel Orientation="Vertical" /&gt;
                  &lt;/ItemsPanelTemplate&gt;
              &lt;/GridView.ItemsPanel&gt;
  
  
          &lt;/GridView&gt;
  
      &lt;/Grid&gt;
  
  ...
  </code></pre>
  
  <p>C#:</p>
  
  <p>In the Code-Behind I do the following in the OnNavigateTo Method:</p>
  
  <pre><code>        List&lt;string&gt; strList = new List&lt;string&gt;() { 
          "Red", "Red", "Red", "Red", "Red", "Red", 
          "Green", "Green","Green","Green","Green",
          "Blue","Blue","Blue","Blue" };
  
      var groupedList = from s in strList
                        group s by s into g
                        orderby g.Key
                        select g;
  
  
      cvs.Source = groupedList;
  </code></pre>
  
  <p>No matter what I do, I am not able to group the Items in a continues list like in the
  Screenshot. The Code results in separate lists grouped side by side.</p>