在ItemsControl中将WPF GroupItem保持在一起

时间:2015-10-29 16:51:13

标签: c# wpf mvvm

我正在尝试按“区域”对集合视图进行分组(总会有5个),我想要实现的是保持所有5个GroupItem垂直堆叠,同时只显示7个在我的ItemsControl中每行。

组的示例,其中每个项目都有一个日期和3个值,按5个区域分组:AS,CE,KC,NA和LAM:

enter image description here

以下内容保持我的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>

结果: enter image description here

我认为我可以通过将ItemsPanelTemplate从DockPanel更改为包含7列的UniformGrid来解决这个问题,但这会破坏我的组: enter image description here

我想要实现的最终结果看起来像这样(划掉日期以免混淆,它们将继续正常):

enter image description here

关于如何实现这一目标的任何想法?

0 个答案:

没有答案