c# - Uwp Grouped GridView with WrapGrid

Question

I'm developing an UWP app and I'm trying to align horizontally my items in each gridview groups

I have this :

GROUP 1

Data 1 | Data 2 | Data 3

Data 1 | Data 2 | Data 3

Data 1 | Data 2 | Data 3

GROUP 2

Data 1 | Data 2 | Data 3

Data 1 | Data 2 | Data 3

and I want this :

GROUP 1

______________________________Data 1 | Data 2 | Data 3

______________________________Data 1 | Data 2 | Data 3

______________________________Data 1 | Data 2 | Data 3

GROUP 2

______________________________Data 1 | Data 2 | Data 3

______________________________Data 1 | Data 2 | Data 3

I order to align my items I use a WrapGrid. I also tried with a non grouped gridview and my code works fine.

<GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource GroupBycodeFamille}}" ItemTemplate="{StaticResource DataTempateCatalogue}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="viewModels:GroupInfoList">
<TextBlock Text="{x:Bind Key}" Style="{ThemeResource TitleTextBlockStyle}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

Answer 1

You can get what you want by setting GroupStyle.Panel property. This property sets a template that creates the panel used to lay out the items. But GridViewItem has two templates, when the GridView's ItemsPanel is an ItemsWrapGrid (the default) or ItemsStackPanel, GridViewItem uses the template which uses a GridViewItemPresenter instead of a UIElement tree to improve grid performance. And while using this template, setting GroupStyle.Panel property won't affect the GridView. We need GridViewItem use its second template by setting GridView's ItemsPanel to some other Panel. As your group is aligned vertically, we can set GridView's ItemsPanel to:

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel HorizontalAlignment="Center" Orientation="Vertical" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

Then we can set GroupStyle.Panel with a left Margin to achieve your goal. But please note that:

The root element of the template declared for the ItemsPanelTemplate in the GroupStyle.Panel property cannot be a virtualizing panel. Virtualizing panels are defined as any type that derives from VirtualizingPanel, for example the VirtualizingStackPanel class.

So we can't use WrapGrid here, we can use a StackPanel but the items will be arranged into a single line. To arrange items into multi lines, we need a Panel like WrapPanel in WPF. We can customize it or use a third party WrapPanel like what in WinRTXamlToolkit. Using WinRTXamlToolkit for example:

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel Margin="200,0,0,0" Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GroupStyle.Panel>

The complete XAML code may like:

<GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource GroupBycodeFamille}}" ItemTemplate="{StaticResource DataTempateCatalogue}">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate x:DataType="viewModels:GroupInfoList">
                    <TextBlock Text="{x:Bind Key}" Style="{ThemeResource TitleTextBlockStyle}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Margin="200,0,0,0" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel HorizontalAlignment="Center" Orientation="Vertical" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

Following is the output when I tested in my side: