带WrapGrid的Uwp分组GridView

Question

我正在开发UWP应用，并且试图在每个gridview组中水平对齐我的项目

我有这个 ：

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

我想要这个：

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

我使用WrapGrid对齐项目。 我也尝试使用非分组的gridview，我的代码工作正常。

<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

您可以通过设置GroupStyle.Panel属性来获得所需的内容。 此属性设置一个模板，该模板创建用于布置项目的面板。 但GridViewItem有两个模板 ，当GridView的ItemsPanel是ItemsWrapGrid （默认值）或ItemsStackPanel ， GridViewItem使用它使用模板GridViewItemPresenter代替的UIElement树，以提高电网的性能。 并且在使用此模板时，设置GroupStyle.Panel属性不会影响GridView 。 通过将GridView的ItemsPanel设置为其他Panel我们需要GridViewItem使用其第二个模板。 当您的组垂直对齐时，我们可以将GridView的ItemsPanel设置为：

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

然后，我们可以设置GroupStyle.Panel用左Margin ，以实现自己的目标。 但请注意：

在GroupStyle.Panel属性声明为ItemsPanelTemplate模板的根元素不能是虚拟化面板 。 虚拟化面板定义为从VirtualizingPanel派生的任何类型，例如VirtualizingStackPanel类。

所以我们不能在这里使用WrapGrid ，可以使用StackPanel但是将这些项目安排在一行中。 为了将项目WrapPanel多行，我们需要一个WPF中的WrapPanel类的Panel 。 我们可以自定义它，也可以使用WinRTXamlToolkit中的第三方WrapPanel 。 例如，使用WinRTXamlToolkit：

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

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

完整的XAML代码可能像：

<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>

以下是当我在一边测试时的输出：