使用 ObservableGroupedCollection 时，Grouped CollectionView 标题文本不起作用

Question

我需要一个分组集合视图，我想将其绑定到 ObservableGroupedCollection，因为我想要更新数据并且我的更新要反映在 UI 中。为了做到这一点，我改编了此处找到的示例
https://github.com/jfversluis/MauiCollectionViewGroupingSample但是我遇到了集合视图标题未渲染数据的问题。

为了演示我的问题，我创建了一个 .net 8 maui 应用程序并引用了 nuget 包 CommunityToolkit.Mvvm 版本 8.2.2。

这是我的视图模型

using CommunityToolkit.Mvvm.Collections;
using CommunityToolkit.Mvvm.ComponentModel;

namespace TestGroupedCollectionView;

public partial class PageViewModel: ObservableObject
{
    public ObservableGroupedCollection<AnimalGroup, Animal> Animals { get; set; } = [];


    public PageViewModel()
    {

        var bearGroup = new AnimalGroup
        {
            GroupName = "Bears"
        };

        var bears = new List<Animal>
        {
            new Animal
            {
                Name = "American Black Bear"    
            },
            new Animal
            {
                Name = "Asian Black Bear"     
            }
        };

        Animals.Add(new ObservableGroup<AnimalGroup, Animal>(bearGroup, bears));

        var monkeys = new List<Animal>
        {
            new Animal
            {
                Name = "Baboon"             
            },
            new Animal
            {
                Name = "Capuchin Monkey",             
            },
            new Animal
            {
                Name = "Blue Monkey"            
            },
        };

        var monkeyGroup = new AnimalGroup
        {
            GroupName = "Monkeys"
        };

        Animals.Add(new ObservableGroup<AnimalGroup, Animal>(monkeyGroup, monkeys));  
    }
}

这是动物类

public class Animal
{
    public string Name { get; set; } = "";
}

这里是动物组课

public class AnimalGroup 
{
    public string GroupName { get; set; } = "";
}

这是我页面背后的代码

namespace TestGroupedCollectionView;
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new PageViewModel();
    }  
}

这是我的 xaml 代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodeldto="clr-namespace:TestGroupedCollectionView" 
             x:Class="TestGroupedCollectionView.MainPage">

    <CollectionView ItemsSource="{Binding Animals}" IsGrouped="True">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Label FontSize="18" FontAttributes="Bold" BackgroundColor="Gray" Text="{Binding GroupName}" />
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <VerticalStackLayout>
                    <Label
                       Text="{Binding Name}"/>        
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

</ContentPage>

我已经在模拟器（即 Android Studio Pixel 5）上运行代码，您得到的输出是：

美国黑熊
亚洲黑熊

狒狒
卷尾猴
蓝猴

换句话说，组标题模板正在呈现，但名称文本留空。我想要得到的是以下输出：
熊
美国黑熊
亚洲黑熊
猴子
狒狒
卷尾猴
蓝猴

如您所见，其中包括 2 个标头：熊和猴子。

我尝试添加这样的数据类型

<DataTemplate x:DataType="viewmodeldto:AnimalGroup">
                <Label FontSize="18" FontAttributes="Bold" BackgroundColor="Gray" Text="{Binding GroupName}" />
</DataTemplate>

但这没有什么区别。

Answer 1

既然您已经改编了 Gerald Versluis 的示例，您可能会发现一些差异。

在 CollectionView 中显示分组数据，可以参考官方文档 在 CollectionView 中显示分组数据。

只需对 AnimalGroup 进行一些更改，

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }
}

在你的 viewModel 中，使用

ObservableCollection

    public ObservableCollection<AnimalGroup> Animals { get; set; } = new ObservableCollection<AnimalGroup>();
    public PageViewModel()
    {
        Animals.Add(new AnimalGroup("Bears", new List<Animal>
            {
                new Animal
                {
                    Name = "American Black Bear",
                },
                new Animal
                {
                    Name = "Asian Black Bear",
                }

            }));

希望有帮助！