Xamarin.Forms Shell购物车Badge计数绑定不更新问题求助

核心问题原因 #

你的绑定无法生效、计数不实时更新有3个直接原因：

1. XAML语法问题：你把注释写在了Tab的属性声明中间，会干扰XAML解析器对绑定属性的识别。
2. 计数只读取一次：Counter属性仅在AppShellViewModel初始化时调用了一次CountPanier()，后续购物车增删商品时没有重新读取最新值，也没有触发属性变更通知。
3. 缺少变更监听：购物车商品集合的增删操作没有和Badge计数做联动，集合变了之后没有任何逻辑通知UI刷新。

修复步骤 #

1. 修正AppShell.xaml的语法问题 #

把插在属性中间的注释移走，修正后的购物车Tab代码如下：

<Tab
    Title="Panier"
    Icon="cart.ico"
    badge:Badge.BackgroundColor="Red"
    badge:Badge.TextColor="Black"
    badge:Badge.Text="{Binding Counter}"
    x:DataType="viewModel:AppShellViewModel">
    <ShellContent ContentTemplate="{DataTemplate local:PanierPage}" />
</Tab>

你可以先把badge:Badge.Text改成固定值比如"3"测试插件是否正常渲染，如果固定值能显示红色徽章，说明插件本身配置没问题。

2. 改造Panier购物车类 #

给商品集合加变更监听，把计数改成可通知的属性，替代原来的单次调用方法：

public class Panier : BaseViewModel
{
    private ObservableCollection<SmartDevice> content;
    public Panier()
    {
        content = new ObservableCollection<SmartDevice>();
        // 监听集合增删操作，每次变更就触发计数属性通知
        content.CollectionChanged += (sender, args) => 
        {
            OnPropertyChanged(nameof(CartCount));
        };
    }

    public ObservableCollection<SmartDevice> GetContent() => content;

    public void AddProduct(SmartDevice product)
    {
        content.Add(product);
    }

    public void RemoveProduct(int id)
    {
        SmartDevice product = content.FirstOrDefault(p => p.Id == id);
        if (product != null)
        {
            content.Remove(product);
        }
    }

    // 实时返回购物车商品总数，支持属性变更通知
    public int CartCount => content.Count;
}

3. 改造AppShellViewModel #

监听全局购物车实例的计数变更，同步更新绑定用的Counter属性：

internal class AppShellViewModel : BaseViewModel
{
    private int _counter;
    public int Counter
    {
        get => _counter;
        set 
        { 
            _counter = value; 
            OnPropertyChanged(); 
        }
    }

    public AppShellViewModel()
    {
        // 初始化加载首次计数
        Counter = App.panier.CartCount;
        // 订阅购物车计数变更事件，实时同步值
        App.panier.PropertyChanged += (sender, e) =>
        {
            if (e.PropertyName == nameof(Panier.CartCount))
            {
                Counter = App.panier.CartCount;
            }
        };
    }
}

注意事项 #

• 必须保证App.panier是全局唯一的静态实例，所有页面的增删操作都操作这同一个实例，不要在页面中重新new Panier()，否则会因为实例不一致导致监听失效。
• 如果你的BaseViewModel没有正确实现INotifyPropertyChanged接口，先确认基类的OnPropertyChanged()方法可以正常触发属性变更通知。
• 当计数为0时，可以主动把Badge.Text设为空字符串，隐藏空徽章，和你期望的交互效果一致。

内容的提问来源于stack exchange，提问作者Maurice Filiatreault Hebert