Question

我正在尝试使用XAML代码对ObservableCollection的项进行分组和显示。使用简单的CollectionViewSource和ListBox [1]可以很好地工作。

实际上，我更喜欢在tabcontrol中显示组的内容。谷歌带我到下面的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），但单击任何这些TabItem冻结应用程序。这是我尝试过的：

    <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

感谢Joh帮助了相应的DataBinding。然而，原因完全不同，下面给出了快速而肮脏的解决方案[1]：

基本上，我错过了上面提到的选项卡控件嵌套在我主窗口的外部选项卡控件中。我不确定以下描述是否完全正确[1]，但在我看来原因如下：

外部TabControl使用样式显示其内容。此内容适用于包含上述可观察集合的ViewModel，而该集合又应该是CollectionViewSource的ItemsSource，它将内部tabControl与组一起提供。
由于我仅在外部TabControl.Resources中定义了此样式，并且错过了为内部选项卡Control定义单独的样式，内部tabcontrol继承外部样式并尝试使用相同的内容显示其数据。
此内容又是另一个内部tabControl，它调用另一个内部tabControl，依此类推。

[1]在inenr tabControl.Resources中定义一个空样式解决了这个问题：

<TabControl.Resources>
                <Style TargetType="TabItem">

                </Style>
            </TabControl.Resources>

如果有人能够确认这个想法，或者在嵌套控件中提供一些与共享样式的众所周知问题的链接，我会很高兴。

Answer 2

I think there's something wrong with your binding your code should work. To get the same items in both ListBoxes try to bind the second ListBox Itemssource to the first ListBox Itemssource like this :

<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>

将CollectionViewSource与TabControl一起使用

2 个答案: