我正在开发一个UWP应用程序，我试图在每个gridview组中对齐我的项目。
我有这个：
第1组 数据1 |数据2 |数据3 数据1 |数据2 |数据3 数据1 |数据2 |数据3 组2 数据1 |数据2 |数据3 数据1 |数据2 |数据3我想要：
第1组 ______________________________数据1 |数据2 |数据3 ______________________________数据1 |数据2 |数据3 ______________________________数据1 |数据2 |数据3 第2组 ______________________________数据1 |数据2 |数据3 ______________________________数据1 |数据2 |数据3我为了对齐我的项目我使用WrapGrid。 我也试过用非分组的gridview，我的代码工作正常。
< GridView Grid.Column = 0ItemsSource ={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> 您能帮我吗？提前致谢 解决方案
您可以通过设置
I'm developing an UWP app and I'm trying to align horizontaly 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 3and 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 3I 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>Could you please help me ?
Thanks in advance
解决方案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:
更多推荐
Uwp使用WrapGrid分组GridView
发布评论