使用WrapGrid的Uwp Grouped 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.我们需要GridViewItem通过将GridView's' 设置ItemsPanel为其他模板来使用它的第二个模板Panel.当你的组垂直排列的,我们可以设置GridViewS" ItemsPanel到:

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

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

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

所以我们不能WrapGrid在这里使用,我们可以使用一个StackPanel但项目将被安排成一行.要将项目排列成多行,我们需要在WPF中使用Panel类似WrapPanel的内容.我们可以自定义它或使用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>

以下是我在我身边测试时的输出: