c# - 使用 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 property来得到你想要的。 .此属性设置一个模板，该模板创建用于布置项目的面板。但是 GridViewItem has two templates , 当GridView的 ItemsPanel是一个 ItemsWrapGrid (默认)或 ItemsStackPanel , GridViewItem使用使用 GridViewItemPresenter 的模板而不是 UIElement树以提高网格性能。在使用此模板时，设置 GroupStyle.Panel属性不会影响 GridView .我们需要 GridViewItem通过设置 GridView 使用它的第二个模板的 ItemsPanel给其他人Panel .由于您的组垂直对齐，我们可以设置 GridView的 ItemsPanel到:

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

然后我们可以设置GroupStyle.Panel左Margin实现你的目标。但请注意:

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.

所以我们不能使用WrapGrid在这里，我们可以使用 StackPanel但这些项目将排列成一行。要将项目排列成多行，我们需要 Panel喜欢WrapPanel在 WPF 中。我们可以定制也可以使用第三方WrapPanel就像 WinRTXamlToolkit 中的一样 。使用 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>

下面是我在自己这边测试时的输出: