.NET MAUI中如何实现CollectionView按人名首字母分组？

要实现按姓名首字母分组展示，你需要先把原始的Person集合处理成分组结构，再配置CollectionView的分组模板，具体步骤如下：

1. 创建分组模型类 #

首先定义一个承载分组信息的类，它需要包含组名（首字母）和该组下的Person集合：

public class GroupedPerson : ObservableCollection<Person>
{
    public string GroupName { get; set; }

    public GroupedPerson(string groupName, IEnumerable<Person> persons) : base(persons)
    {
        GroupName = groupName;
    }
}

2. 在ViewModel中处理分组逻辑 #

在ViewModel里添加分组后的集合属性，加载完SQLite数据后，将原始ObservableRangeCollection<Person>转换成分组结构：

// ViewModel中的分组集合属性
public ObservableCollection<GroupedPerson> GroupedPersons { get; set; } = new ObservableCollection<GroupedPerson>();

// 加载数据并执行分组的方法示例
private void LoadAndGroupPersons()
{
    // 这里是从SQLite加载原始Person数据的逻辑
    // var rawPersons = _sqliteRepo.GetAllPersons();
    // Persons = new ObservableRangeCollection<Person>(rawPersons);

    // 处理分组：过滤无效姓名，按首字母大写分组并排序
    var groupedData = Persons
        .Where(p => !string.IsNullOrWhiteSpace(p.Name) && p.Name.Length > 0)
        .GroupBy(p => char.ToUpper(p.Name[0]))
        .Select(g => new GroupedPerson(g.Key.ToString(), g))
        .OrderBy(g => g.GroupName);

    // 更新分组集合
    GroupedPersons.Clear();
    foreach (var group in groupedData)
    {
        GroupedPersons.Add(group);
    }

    // 可选：给无姓名的项添加默认组
    var noNameItems = Persons.Where(p => string.IsNullOrWhiteSpace(p.Name) || p.Name.Length == 0);
    if (noNameItems.Any())
    {
        GroupedPersons.Add(new GroupedPerson("#", noNameItems));
    }
}

3. 修改XAML中的CollectionView配置 #

将CollectionView的ItemsSource绑定到分组后的集合，开启IsGrouped并定义组头模板：

<CollectionView ItemsSource="{Binding GroupedPersons}" IsGrouped="True">
    <!-- 组头模板：显示分组首字母 -->
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Frame BackgroundColor="#f5f5f5" Padding="8,4" Margin="0,3">
                <Label Text="{Binding GroupName}" FontSize="16" FontAttributes="Bold" TextColor="#2d2d2d"/>
            </Frame>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>

    <!-- 原有Person项模板，保持你之前的实现即可 -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="12" Margin="0,2">
                <Label Text="{Binding Name}" FontSize="14"/>
                <!-- 其他Person属性的绑定内容 -->
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

注意事项 #

• 确保ViewModel实现了INotifyPropertyChanged接口，保证分组集合的变更能同步到UI。
• 如果原始Person集合会动态更新（新增、删除项），需要在集合变更后重新执行分组逻辑，或者订阅ObservableRangeCollection的CollectionChanged事件自动触发分组。

内容的提问来源于stack exchange，提问作者OXO