在WPF .NET 6中正确展示ObservableGroupedCollection的方法

问题场景 #

基于.NET 6的WPF项目，使用Microsoft CommunityToolkit.Mvvm包的ObservableGroupedCollection<TKey, TElement>实现分组列表，严格遵循MVVM模式。迁移UWP示例代码到WPF后发现：

• 手动遍历ObservableGroupedCollection能看到完整的分组及所有条目：

• 但ListView仅显示每组的第一个元素：

核心原因 #

WPF与UWP的分组实现逻辑存在差异：UWP可直接将ObservableGroupedCollection绑定到ListView的ItemsSource，但WPF必须通过CollectionViewSource并启用分组标识，才能正确解析分组结构。直接绑定会导致WPF无法识别分组内的多个子元素，仅渲染每组的第一项。

解决步骤 #

1. 确保ViewModel的集合定义正确 #

ViewModel需继承ObservableObject（CommunityToolkit.Mvvm提供），并正确初始化ObservableGroupedCollection：

using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Collections;

public class MainViewModel : ObservableObject
{
    // 分组集合，Key为分组标识，TElement为你的数据Model
    public ObservableGroupedCollection<string, YourModel> GroupedData { get; } = new();

    public MainViewModel()
    {
        // 填充测试数据（示例）
        GroupedData.Add(new Grouping<string, YourModel>("A", new List<YourModel>
        {
            new YourModel { Name = "a_0" },
            new YourModel { Name = "a_1" },
            new YourModel { Name = "a_2" }
        }));
        GroupedData.Add(new Grouping<string, YourModel>("B", new List<YourModel>
        {
            new YourModel { Name = "b_0" }
        }));
        // 其他分组数据...
    }
}

2. 在XAML中配置CollectionViewSource #

在Window/UserControl的Resources中定义CollectionViewSource，开启分组识别：

<Window.Resources>
    <CollectionViewSource 
        x:Key="GroupedDataView" 
        Source="{Binding GroupedData}" 
        IsSourceGrouped="True"/>
</Window.Resources>

3. 绑定ListView并配置分组样式 #

将ListView的ItemsSource绑定到上述CollectionViewSource，同时设置GroupStyle显示分组头，ItemTemplate渲染每个条目：

<ListView ItemsSource="{Binding Source={StaticResource GroupedDataView}}">
    <!-- 分组头部样式 -->
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock 
                        Text="{Binding Key}" 
                        FontWeight="Bold" 
                        FontSize="14" 
                        Margin="0,5,0,2"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
    
    <!-- 列表条目模板 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" Margin="20,0,0,0"/>
            <!-- 替换为你的Model属性绑定 -->
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

验证要点 #

• 确认ViewModel已正确设置为View的DataContext：

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>

• 检查CollectionViewSource的IsSourceGrouped属性是否设为True，这是WPF识别分组的关键。

内容的提问来源于stack exchange，提问作者ge.go