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

Question

我正在使用此 Plugin.Badge 在 Xamarin Forms 应用的选项卡式视图中显示购物车项目数量。

这是我的标签页 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>

下面是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;
         }
     }
 }

在您可以看到的一个 tabbedpage children 中，徽章设置如下 plugin:TabBadge.BadgeText= ""{绑定计数器}"

但是不工作。

我想将徽章计数器的值设置为代码隐藏页面中的变量值 MainPage.xaml.cs

为此，所有要在代码中完成的更改。请帮我解决这个问题。

Answer 1

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

首先我建议创建 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; }
    }

}

然后在您的 MainPage 中创建到视图模型的绑定上下文

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

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

Update the Counter in Badge, Xamarin Forms app

xaml

xamarin

xamarin.forms

xamarin-forms-4