Xaml 更新Badge、Xamarin Forms应用程序中的计数器

我用它来显示Xamarin表单应用程序中选项卡视图上的购物车项目数

这是我的标签页xaml代码MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
            xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
            SelectedTabColor="{StaticResource HighlightText}"  BarBackgroundColor="{StaticResource HighlightBg}" UnselectedTabColor="Gray" 
            xmlns:views="clr-namespace:Projectname.Views" x:Class="Projectname.Views.MainPage" >
   <TabbedPage.Children>
        <NavigationPage Title="Home" IconImageSource="home.png">
                  <x:Arguments>
                <views:HomePage />
            </x:Arguments>
        </NavigationPage>

         <NavigationPage Title="Search" IconImageSource="search.png">
            
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
         
         <NavigationPage Title="Cart" IconImageSource="cart.png" 
             plugin:TabBadge.BadgeText= "{Binding Counter}"  
             plugin:TabBadge.BadgeColor="Red"
              plugin:TabBadge.BadgeTextColor="White"   plugin:TabBadge.BadgePosition="PositionTopRight" >
           
            <x:Arguments>
              
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>


        <NavigationPage Title="Account" IconImageSource="account.png">
            
            <x:Arguments>
                <views:AccountPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

在您可以看到的一个选项卡页子项中，徽章的设置如下 插件：TabBadge.BadgeText=“{Binding Counter}”

但不起作用。

我想在代码隐藏页面MainPage.xaml.cs

using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Essentials;
using Plugin.Badge.Abstractions;
using System.Collections.ObjectModel;

//using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;


namespace Projectname.Views
{
    
    [DesignTimeVisible(false)]

    public partial class MainPage : TabbedPage
    {
        int Counter;
        public MainPage()
        {
            InitializeComponent();
            Counter = 2;
         }
     }
 }

---

为此，需要在代码中完成所有更改。请在这方面帮助我。

这将不起作用。您正在创建局部变量，甚至没有设置绑定上下文

首先，我建议创建ViewModel，例如：

public class MainPageViewModel : INotifyPropertyChanged
{
    private int counter = 0;
    public MainPageViewModel()
    {
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public int Counter
    {
        set { counter = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Counter))); }
        get { return counter; }
    }

}

然后在主页中创建到viewmodel的绑定上下文

public partial class MainPage : TabbedPage
{
    private MainPageViewModel viewModel;
    public MainPage()
    {
        InitializeComponent();
        viewModel = new MainPageViewModel();
        BindingContext = viewModel;
        viewModel.Counter = 2;
     }
 }

---

您好，您需要在子页面中绑定值，而不仅仅是在

MainPage

中。您可以查看。我不知道为什么这在MainPage中不起作用，可能是这个NugetPackage的问题。谢谢@adlorem，我正在尝试实现您的代码