我正在尝试按“区域”对集合视图进行分组(总会有5个),我想要实现的是保持所有5个GroupItem垂直堆叠,同时只显示7个组在我的ItemsControl中每行。
组的示例,其中每个项目都有一个日期和3个值,按5个区域分组:AS,CE,KC,NA和LAM:
以下内容保持我的GroupItems堆叠我想要的方式,但由于ItemsPanel是一个DockPanel,它们只是继续向右移动所有项目:
<ItemsControl Grid.Row="1"
ItemsSource="{Binding DataContext.DailyBuildPlansCollectionView, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Left"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<!-- Scrollviewer to let me scroll through the data -->
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<!-- Template for each individual build plan -->
<DataTemplate>
<Border BorderBrush="DarkSlateGray"
BorderThickness="1">
<Grid Width="127">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Date across top -->
<Border Background="AntiqueWhite"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="3"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="3"
Text="{Binding Day, StringFormat=MMM dd yy}"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextAlignment="Center"
FontWeight="Bold"/>
<!-- Region along side -->
<Border Background="AntiqueWhite"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"/>
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
Text="{Binding Region}"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextAlignment="Center"
FontWeight="Bold"/>
<TextBox Grid.Column="1"
Grid.Row="1"
Text="{Binding Build, Mode=TwoWay}"
Margin="2"
TextAlignment="Center"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<TextBlock Grid.Column="2"
Grid.Row="1"
Text="{Binding Sales}"
Margin="2"
TextAlignment="Center"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<TextBlock Grid.Column="3"
Grid.Row="1"
Text="{Binding Inventory}"
Margin="2"
TextAlignment="Center"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- Group Styles - Will be grouped by region -->
<ItemsControl.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<StackPanel Orientation="Vertical">
<ItemsPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ItemsControl.GroupStyle>
我认为我可以通过将ItemsPanelTemplate从DockPanel更改为包含7列的UniformGrid来解决这个问题,但这会破坏我的组:
我想要实现的最终结果看起来像这样(划掉日期以免混淆,它们将继续正常):
关于如何实现这一目标的任何想法?