C# MAUI中点击分组头部按钮向指定Category添加Item无响应问题

我在C# MAUI的分组数据场景中，尝试点击分类（CategoryGroup）头部的按钮，向该分类下添加新的Item，但按钮点击完全没有响应。以下是相关代码，请求解决：

类定义 #

public class CategoryGroup : ObservableCollection<Item>
{
    public string Name { get; private set; }

    public CategoryGroup(string name, ObservableCollection<Item> items) : base(items)
    {
        Name = name;
    }
}

public class Item
{
    public string Name { get; set; }
    public int Quantity { get; set; }
    public bool IsChecked { get; set; }
    public string Id { get; set; }
}

集合定义 #

public ObservableCollection<CategoryGroup> Items { get; set; } = new ObservableCollection<CategoryGroup>();

尝试的添加方法 #

private async void AddNewItem(System.Object sender, System.EventArgs e)
{
    Button button = (Button)sender;
    string categoryName = (string)button.CommandParameter;
    CategoryGroup category = Items.FirstOrDefault(c => c.Name == categoryName);
    if (category != null)
    {
        string name = await App.Current.MainPage.DisplayPromptAsync(
            "Add Item", "Enter the name of the item");
        category.Add(new Item { Name = name, Quantity = 1, IsChecked = false, Id = "1" });
    //id设为1仅作测试用
    }
}

XAML代码 #

<ScrollView>
    <CollectionView IsGrouped="true" ItemsSource="{Binding Items}">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Label Text="{Binding Name}"
                     FontSize="18"
                     FontAttributes="Bold"
                     Grid.Column="0"/>
                    <!-- 这里的按钮 -->
                    <Button Text="Add Item ➕" Margin="5" Grid.Column="1" Clicked="AddNewItem" CommandParameter="{Binding CategoryName}"/>
                </Grid>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ItemView:ItemView Name="{Binding Name}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ScrollView>

解决方案 #

1. 修复CommandParameter的绑定错误 #

GroupHeaderTemplate的绑定上下文是CategoryGroup实例，该类的属性名为Name，而非CategoryName。按钮的CommandParameter绑定写错了，需要修改为：

<Button Text="Add Item ➕" Margin="5" Grid.Column="1" Clicked="AddNewItem" CommandParameter="{Binding Name}"/>

2. 确认BindingContext设置正确 #

确保页面的BindingContext已经正确配置，比如在页面构造函数中添加：

public YourPageName()
{
    InitializeComponent();
    BindingContext = this; // 如果Items定义在页面代码后台中
    // 若使用ViewModel，则设置为对应ViewModel实例
}

3. 验证Item添加后的UI更新 #

由于CategoryGroup继承自ObservableCollection<Item>，添加新Item时CollectionView应该自动刷新UI。如果新Item仍不显示，检查ItemView控件的绑定逻辑，确保Name属性能正确映射到控件上。

内容的提问来源于stack exchange，提问作者Łukasz Strama