Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
597 views
in Technique[技术] by (71.8m points)

c# - Uwp Grouped GridView with WrapGrid

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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: enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...