Update the Counter in Badge, Xamarin Forms app

Question

I'm using this Plugin.Badge to display cart items count on tabbed view in Xamarin Forms app.

here is my tabbed page xaml code 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>

below is the Code behind in 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;
         }
     }
 }

In one of the tabbedpage children you can see, the badge is set like plugin:TabBadge.BadgeText= ""{Binding Counter}"

But is not working.

I want to set the value of the badge counter to the value of variable in the code behind page MainPage.xaml.cs

for that what all changes to be done in the code. Please help me on this.

Answer 1

This will not work. You are creating local variable and not even setting binding context.

First of all I recommend to create ViewModel for example:

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; }
    }

}

Then in your MainPage create binding context to viewmodel

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