Databases
StackOverflow2013
Postsdbo
POGrouping GridView in Windows 8 Metro App
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGrouping GridView in Windows 8 Metro App
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload