GridView does not space groups properly

Question

I have a Grid View displaying data in groups. I get the data displayed with this characteristics: each group receives the same amount of horizontal space, determined by the largest group.

To clarify, my biggest data group shows an array of 3 rows x 4 columns of items. Each column is 300 pixels, which allocate 1200 pixels for the group. The other groups are only have one item. But instead of the width of this group to be 300 pixels, the system allocates 1200 pixels. 300 pixels to contain the item, and 900 pixels of just empty space.

Any explanation why this happens?

Answer 1

I had the same problem with grouping. I added a StackPanel with horizontal orientation as ItemsPanel.

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

Answer 2

Are you using a dataTemplateSelector? Because I had the same problem while using a dataTemplateSelector. What I have done is using a VariableSizedWrapGrid which allows you to have different items size in a Grid. It works well with GroupedList. You can follow those links which explain everything :

http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

Here is an example sample : https://skydrive.live.com/?cid=3a5ca8204ec61147&id=3A5CA8204EC61147!35841

Answer 3

I am having the same issue:

The first group width determines the width of all other groups.

<GridView
                x:Name="resultsGridView"
                AutomationProperties.AutomationId="ResultsGridView"
                AutomationProperties.Name="Search Results"
                TabIndex="1"
                Grid.Row="1"
                Margin="0,-238,0,0"
                Padding="110,240,110,46"
                SelectionMode="None"
                IsSwipeEnabled="false"
                ItemClick="resultsGridView_ItemClick_1"
                IsItemClickEnabled="True"
                ItemsSource="{Binding Source={StaticResource resultsViewSource}}"
                ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}">

                <GridView.ItemContainerStyle>
                    <Style TargetType="Control">
                        <Setter Property="Height" Value="150"/>
                        <Setter Property="Margin" Value="0,0,38,8"/>
                   </Style>
                </GridView.ItemContainerStyle>

                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="1,0,0,6">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <!--<Button
                                AutomationProperties.Name="Group Title"                                    
                                Style="{StaticResource TextPrimaryButtonStyle}" >-->
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>-->
                                    </StackPanel>
                                    <!--</Button>Click="Header_Click"-->
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>