wpf - 将 CollectionViewSource 与 TabControl 一起使用

Question

我正在尝试仅使用 XAML 代码对 ObservableCollection 的项目进行分组和显示。它使用简单的 CollectionViewSource 和 ListBox[1] 效果很好。

实际上，我更愿意在 tabcontrol 中显示组的内容。 Google 将我带到了以下 social.msdn 文章，该文章提供了一种解决方法，使用后面的代码将组显示为 TabControl:

https://social.msdn.microsoft.com/Forums/vstudio/en-US/e073f275-0826-4fca-b9da-e310ccf1713e/wpf-grouping?forum=wpf

但是，由于我使用的是 MVVM 并且必须仅依赖 xaml，所以我无法让它工作。实际上，CollectionViewSource 填充了组(TabControl 显示正确的 tabItemHeaders)，但是单击任何这些 TabItems 都会卡住应用程序。这是我尝试过的:

    <StackPanel x:Key="ModulSelectInputParameterView">
    <StackPanel.Resources>
        <CollectionViewSource x:Key="cvs" x:Name="collectionViewSource" Source="{Binding ReferencedLmtItem.ModulInputParameterCollection }">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </StackPanel.Resources>

    <Grid >
        <TabControl ItemsSource="{Binding Source={StaticResource cvs}, Path=Groups, Mode=OneWay}" DataContext="{Binding Source={StaticResource cvs}, Mode=OneWay}">
            <!-- First Level -->
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding Items}">
                         Second Level 
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Expander Header="{Binding Name}">
                                    <ListBox ItemsSource="{Binding Items}">
                                         The Item of the Collection 
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="{Binding Key}"/>
                                                    <TextBlock Text=" - "/>
                                                    <TextBlock Text="{Binding Value.Comment}"/>
                                                </StackPanel>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                </Expander>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>

</StackPanel>

[1]:xaml 的这种和平确实按预期工作，但使用包装面板来显示组内容:

<StackPanel x:Key="ModulSelectInputParameterView">
    <StackPanel.Resources>
        <CollectionViewSource x:Key="cvs" x:Name="collectionViewSource" Source="{Binding ReferencedLmtItem.ModulInputParameterCollection }">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </StackPanel.Resources>

    <ListBox ItemsSource="{Binding Source={StaticResource cvs}}" VerticalContentAlignment="Top" ItemContainerStyle="{StaticResource ModulSelectInputParameterListBoxItemContainerStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Border BorderBrush="DarkGray" BorderThickness="2" Margin="2">
                            <TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Path=Name}" HorizontalAlignment="Center" MinWidth="100"/>
                        </Border>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" Margin="2"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Border BorderThickness="2" BorderBrush="DarkGray">
                                        <StackPanel>
                                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
                                            <ItemsPresenter Margin="2,0,2,2" />
                                        </StackPanel>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>

        </ListBox.GroupStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Vertical" VerticalAlignment="Top"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

    </ListBox>
</StackPanel>

Answer 1

我认为您的代码绑定(bind)有问题应该可以工作。
要在两个 ListBox 中获取相同的项目，请尝试将第二个 ListBox Itemssource 绑定(bind)到第一个 ListBox Itemssource，如下所示:

<ListBox ItemsSource="{Binding Items}" Name="ListBox">

                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Expander Header="{Binding Key}">
                                                <ListBox ItemsSource="{Binding ItemsSource, ElementName=ListBox}">

                                                    <ListBox.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal">
                                                                <TextBlock Text="{Binding Key}"/>
                                                                <TextBlock Text=" - "/>
                                                                <TextBlock Text="{Binding Value}"/>
                                                            </StackPanel>
                                                        </DataTemplate>
                                                    </ListBox.ItemTemplate>
                                                </ListBox>
                                            </Expander>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>