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:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…