Fatal编程技术网
  • csharp/
  • C# 带WrapGrid的Uwp分组GridView

C# 带WrapGrid的Uwp分组GridView

c# xaml gridview uwp

C# 带WrapGrid的Uwp分组GridView,c#,xaml,gridview,uwp,windows-store,C#,Xaml,Gridview,Uwp,Windows Store,我正在开发一个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 | D

我正在开发一个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>
你可以通过设置来获得你想要的。此属性设置一个模板，用于创建用于布置项目的面板。但是，当GridView的ItemsPanel是默认的ItemsRapGrid或ItemsStackPanel时，GridViewItem使用使用GridViewItemPresenter而不是UIElement树的模板来提高网格性能。使用此模板时，设置GroupStyle.Panel属性不会影响GridView。我们需要GridViewItem通过将GridView的ItemsPanel设置为其他面板来使用其第二个模板。由于您的组垂直对齐，我们可以将GridView的ItemsPanel设置为：

完整的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>
以下是我在我身边测试时的输出：

通过设置，您可以得到想要的。此属性设置一个模板，用于创建用于布置项目的面板。但是，当GridView的ItemsPanel是默认的ItemsRapGrid或ItemsStackPanel时，GridViewItem使用使用GridViewItemPresenter而不是UIElement树的模板来提高网格性能。使用此模板时，设置GroupStyle.Panel属性不会影响GridView。我们需要GridViewItem通过将GridView的ItemsPanel设置为其他面板来使用其第二个模板。由于您的组垂直对齐，我们可以将GridView的ItemsPanel设置为：

完整的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>
以下是我在我身边测试时的输出：

谢谢你的回答，也谢谢你为我花时间，你解决了我的问题！然而，我有大量的数据，这个解决方案非常慢，我发现SemanticZoom也不起作用。你有什么想法吗？我只能想象点击这个复选框会有多困难：谢谢你的回答并为我花时间，你解决了我的问题！然而，我有大量的数据，这个解决方案非常慢，我发现SemanticZoom也不起作用。你有什么想法吗？我只能想象点击这个复选框会有多困难： 
<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>