title: XAML grouped GridView/Semantic Zoom not displaying all children?
body: <p>I'm attempting to use the <a href="http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e" rel="nofollow noreferrer">XAML C# Grouped GridView sample</a> to make my SemanticZoom work in a XAML C# Windows 8 app. The problem is, for some reason it's displaying the correct header (the category, in this case), but it's not showing all the items under the header (it's only showing one for each, when I have up to 6 items in some of them).</p>
  
  <p>Here's the SemanticZoom's XAML code (note that I left out the ZoomedOutView for brevity, and since it's working perfectly):</p>
  
  <pre><code>&lt;SemanticZoom x:Name="boardZoom" Height="626" Margin="10,132,10,0" VerticalAlignment="Top"&gt;
      &lt;SemanticZoom.ZoomedInView&gt;
          &lt;GridView IsSwipeEnabled="True" x:Name="ItemsGridView" Tapped="Tapped" ItemsSource="{Binding Source={StaticResource cvs2}}" SelectionChanged="selChanged"&gt;
              &lt;GridView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;StackPanel Orientation="Horizontal" Margin="10,10,0,0" 
                      HorizontalAlignment="Left" VerticalAlignment="Stretch"&gt;
                          &lt;Image Source="{Binding Thumbnail}"&gt;&lt;/Image&gt;                                
                         &lt;TextBlock Text="{Binding Title}" TextWrapping="Wrap" Width="500"
                              FontFamily="Global User Interface" FontSize="40" VerticalAlignment="Top" /&gt;                                
                          &lt;TextBlock Text="{Binding pinNumber}" x:Name="PinNum" Visibility="Collapsed"&gt;&lt;/TextBlock&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="White" Margin="5" FontSize="20" FontFamily="Segoe UI Light" /&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/GroupStyle.HeaderTemplate&gt;
                      &lt;GroupStyle.ContainerStyle&gt;
                          &lt;Style TargetType="GroupItem"&gt;
                              &lt;Setter Property="Template"&gt;
                                  &lt;Setter.Value&gt;
                                      &lt;ControlTemplate TargetType="GroupItem"&gt;
                                          &lt;StackPanel Orientation="Vertical"&gt;
                                              &lt;ContentPresenter Content="{TemplateBinding Content}" /&gt;
                                              &lt;ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" /&gt;
                                          &lt;/StackPanel&gt;
                                      &lt;/ControlTemplate&gt;
                                  &lt;/Setter.Value&gt;
                              &lt;/Setter&gt;
                          &lt;/Style&gt;
                      &lt;/GroupStyle.ContainerStyle&gt;
                      &lt;GroupStyle.Panel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="5" /&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/GroupStyle.Panel&gt;
                  &lt;/GroupStyle&gt;
              &lt;/GridView.GroupStyle&gt;
              &lt;GridView.ItemsPanel&gt;
                  &lt;ItemsPanelTemplate&gt;
                      &lt;WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" /&gt;
                  &lt;/ItemsPanelTemplate&gt;
              &lt;/GridView.ItemsPanel&gt;
          &lt;/GridView&gt;
      &lt;/SemanticZoom.ZoomedInView&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the Refresh() C# function that's called when the app is started up:</p>
  
  <pre><code>System.Collections.ObjectModel.ObservableCollection&lt;SemanticZoomed&gt; finalSource = new System.Collections.ObjectModel.ObservableCollection&lt;SemanticZoomed&gt;();
  public async Task&lt;bool&gt; Refresh()
  {
      var Pins = await pinTable.ReadAsync(); //pinTable is an Azure Mobile Services table
      List&lt;string&gt; categoriesMixed = new List&lt;string&gt;();
      if (Pins.ToArray().Length &lt; 1)
      {
          //adds a new "Welcome" pin to the table, taken out for brevity
      }
      foreach (pin nowPin in Pins)
      {
          SemanticZoomed toAdd = new SemanticZoomed();
          toAdd.Category = nowPin.category;
          toAdd.pinNumber = nowPin.Id.ToString();
          toAdd.Title = nowPin.name;
          categoriesMixed.Add(nowPin.category);
          finalSource.Add(toAdd);
      }
  
      List&lt;GroupPinList&lt;object&gt;&gt; groups = new List&lt;GroupPinList&lt;object&gt;&gt;();
  
      var query = from nowPin in finalSource
          orderby ((SemanticZoomed)nowPin).Category
                  group nowPin by ((SemanticZoomed)nowPin).Category into g
                  select new { GroupName = g.Key, Items = g };
      foreach (var g in query)
      {
          GroupPinList&lt;object&gt; info = new GroupPinList&lt;object&gt;();
          info.Key = g.GroupName;
          foreach (var item in g.Items)
          {
             info.Add(item);
          }
          groups.Add(info);
      }
      cvs2.Source = groups;
      (boardZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;
      return true;
  }
  </code></pre>
  
  <p>And here are a few screenshots of what the groups variable looks like, and what the resulting SemanticZoom shows:</p>
  
  <p>the groups variable:</p>
  
  <p><img src="https://i.stack.imgur.com/tAx02.png" alt="the groups variable"></p>
  
  <p>the "Welcome" category in the groups variable (it correctly shows its 6 items, and also the error "Cannot fetch the value of field 'imgSrc' because information about the containing class is unavailable" next to imgSrc, which disappears in cvs2 below):</p>
  
  <p><img src="https://i.stack.imgur.com/ewhIP.png" alt="the welcome category"></p>
  
  <p>cvs2 (it shows the 6 different items under the Welcome category):</p>
  
  <p><img src="https://i.stack.imgur.com/XdaJG.png" alt="cvs2"></p>
  
  <p>and finally, what it ends up displaying:</p>
  
  <p><img src="https://i.stack.imgur.com/l6SL1.png" alt="end result"></p>
  
  <p>I'm at a loss as to where those other pins in the Welcome category went. Is there something in the XAML code that I'm missing? Any help would be much appreciated :)</p>