Databases
StackOverflow2013
Postsdbo
POHow to create variable sized group panels to fit the items in Windows 8 XAML
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
    primarykey
    data
    text
    <p>The problem I'm having is the grouped grid view sizes all of its groups to the size of the <strong>first</strong> group as in the screenshot below:</p> <p><img src="https://i.stack.imgur.com/1veK6.png" alt="enter image description here"></p> <p>I need the groups to have different widths to accomodate their children. In this case the second group should be wider and the third group should be narrower.</p> <p>The code for the test app I wrote is as below:</p> <p><strong>XAML (MainPage.xaml)</strong></p> <pre><code>&lt;Page x:Class="GroupingBugTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:GroupingBugTest" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"&gt; &lt;Page.Resources&gt; &lt;CollectionViewSource x:Name="GroupedCollectionViewSource" IsSourceGrouped="True" /&gt; &lt;/Page.Resources&gt; &lt;Grid Margin="100" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"&gt; &lt;GridView x:Name="GroupingGridView" ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}" SelectionMode="None"&gt; &lt;GridView.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;VariableSizedWrapGrid Margin="20" Background="MidnightBlue" Orientation="Horizontal" /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GridView.ItemsPanel&gt; &lt;GridView.GroupStyle&gt; &lt;GroupStyle&gt; &lt;GroupStyle.HeaderTemplate&gt; &lt;DataTemplate&gt; &lt;TextBlock FontSize="24" Foreground="White" Text="{Binding Key}" /&gt; &lt;/DataTemplate&gt; &lt;/GroupStyle.HeaderTemplate&gt; &lt;GroupStyle.Panel&gt; &lt;ItemsPanelTemplate&gt; &lt;VariableSizedWrapGrid Margin="20" Background="CornflowerBlue" Orientation="Horizontal" /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GroupStyle.Panel&gt; &lt;/GroupStyle&gt; &lt;/GridView.GroupStyle&gt; &lt;/GridView&gt; &lt;/Grid&gt; </code></pre> <p></p> <p><strong>Code behind (MainPage.xaml.cs)</strong></p> <pre><code>using System.Collections.Generic; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace GroupingBugTest { /// &lt;summary&gt; /// An empty page that can be used on its own or navigated to within a Frame. /// &lt;/summary&gt; public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } /// &lt;summary&gt; /// Invoked when this page is about to be displayed in a Frame. /// &lt;/summary&gt; /// &lt;param name="e"&gt;Event data that describes how this page was reached. The Parameter /// property is typically used to configure the page.&lt;/param&gt; protected override void OnNavigatedTo(NavigationEventArgs e) { PopulateGroupedCollectionViewSource(); } private void PopulateGroupedCollectionViewSource() { List&lt;GroupInfoList&lt;string&gt;&gt; groupedCollection = new List&lt;GroupInfoList&lt;string&gt;&gt;(); var firstGroup = new GroupInfoList&lt;string&gt;() { Key = "FIRST GROUP (5 items)" }; var secondGroup = new GroupInfoList&lt;string&gt;() { Key = "SECOND GROUP (10 items)" }; var thirdGroup = new GroupInfoList&lt;string&gt;() { Key = "THIRD GROUP (2 items)" }; for (int i = 1; i &lt;= 10; i++) { if (i &lt;= 5) //add 5 items to first group { firstGroup.Add(i.ToString()); } secondGroup.Add(i.ToString()); //add 10 items to second group if (i &lt;= 2) //add 2 items to third group { thirdGroup.Add(i.ToString()); } } groupedCollection.Add(firstGroup); groupedCollection.Add(secondGroup); groupedCollection.Add(thirdGroup); GroupedCollectionViewSource.Source = groupedCollection; } } //Taken from Microsoft Windows 8 code samples public class GroupInfoList&lt;T&gt; : List&lt;object&gt; { public object Key { get; set; } public new IEnumerator&lt;object&gt; GetEnumerator() { return (System.Collections.Generic.IEnumerator&lt;object&gt;)base.GetEnumerator(); } } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdcdroid
    1. USdcdroid
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
      1. USdcdroid
      1. VTFavorite
    2. VO
      singulars
      1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
      1. This table or related slice is empty.
      1. VTUpMod
    1. COFirst of all, don't use `List`, use `ObservableCollection`. This way, the `CollectionViewSource` will respond to the changes in the `Collection`. Second, your `GridView.ItemsPanel` should not be a `VariableSizedWrapGrid`, but likely some kind of `StackPanel`, such as a `VirtualizingStackPanel`.
      singulars
      1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
      1. USNate Diamond
    2. COChanging the VariableSizedWrapGrid to a VirtualizingStackPanel throws an exception with this message: "Use a non-virtualizing panel for GroupStyle.Panel" So I didn't change that. Then I changed the List to ObservableCollection but the result is the same. Any other ideas?
      singulars
      1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
      1. USdcdroid
    3. COUsing a normal non-virtualizing StackPanel also didn't change anything.
      singulars
      1. POHow to create variable sized group panels to fit the items in Windows 8 XAML
      1. USdcdroid
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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