我正在开发一个UWP应用,我试图在每个网格视图组中水平对齐我的项目
我有这个:
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>
答案 0 :(得分:6)
您可以通过设置GroupStyle.Panel
property来获得所需内容。此属性设置一个模板,用于创建用于布置项目的面板。但GridViewItem
has two templates,当GridView
ItemsPanel
为ItemsWrapGrid
(默认)或ItemsStackPanel
时,GridViewItem
使用模板它使用GridViewItemPresenter
而不是UIElement
树来提高网格性能。在使用此模板时,设置GroupStyle.Panel
属性不会影响GridView
。我们需要GridViewItem
使用其第二个模板,将GridView
&#39; s ItemsPanel
设置为其他Panel
。由于您的论坛是垂直对齐的,我们可以将GridView
&#39; s ItemsPanel
设置为:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Center" Orientation="Vertical" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
然后我们可以设置GroupStyle.Panel
左Margin
来实现您的目标。但请注意:
为 GroupStyle.Panel 属性中的 ItemsPanelTemplate 声明的模板的根元素不能是虚拟化面板。虚拟化面板定义为派生自
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>