0

I'm trying to make a badge hold a counter of the item in a shopping cart the list of item in the shopping cart is defined as a static list I tried to define an access method on the AppShellViewModel and bind the count to the access method but no luck I've been trying for like 4-6 hours if you have any hint I would appreciate it here is all the tool I'm using

Package for the badge: https://github.com/galadril/Xam.Shell.Badge Xamarin form MVVM .Net 6

AppShell.xaml

<Shell
    x:Class="Project_Intra_Maurice.AppShell"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:badge="clr-namespace:Xam.Shell.Badge;assembly=Xam.Shell.Badge"
    xmlns:local="clr-namespace:Project_Intra_Maurice.Views"
    xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
    xmlns:viewModel="clr-namespace:Project_Intra_Maurice.ViewModels"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    Title="Project_Intra_Maurice">

    <TabBar>
        <Tab Title="Accueil" Icon="home.ico">
            <ShellContent ContentTemplate="{DataTemplate local:AccueilPage}" />
        </Tab>

        <Tab Title="Magasiner" Icon="store.ico">
            <ShellContent Title="Telephone" ContentTemplate="{DataTemplate local:TelephoneDevicePage}" />
            <ShellContent Title="Tabelette" ContentTemplate="{DataTemplate local:TabletteDevicePage}" />
            <ShellContent Title="Montre Intelligente" ContentTemplate="{DataTemplate local:MontreIntelligentePage}" />
        </Tab>

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

    </TabBar>
</Shell>

AppShell Code behind

public partial class AppShell : Shell
    {

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(AccueilPage), typeof(AccueilPage));
            Routing.RegisterRoute(nameof(TelephoneDevicePage), typeof(TelephoneDevicePage));
            Routing.RegisterRoute(nameof(TabletteDevicePage), typeof(TabletteDevicePage));
            Routing.RegisterRoute(nameof(MontreIntelligentePage), typeof(MontreIntelligentePage));
            Routing.RegisterRoute(nameof(PanierPage), typeof(PanierPage));

            this.BindingContext = new AppShellViewModel();
        }
    }

AppShellViewModel

    internal class AppShellViewModel : BaseViewModel
    {
        private int counter = App.panier.CountPanier();
        public int Counter
        {
            set { counter = value; OnPropertyChanged(); }
            get { return counter; }
        }
    }

Panier class, which contain the method that is used to get the count

    public class Panier : BaseViewModel
    {
        private ObservableCollection<SmartDevice> content;
        public Panier()
        {
            this.content = new ObservableCollection<SmartDevice>();
        }
        public ObservableCollection<SmartDevice> GetContent() { return content; }

        public void AddProduct(SmartDevice product)
        {
            this.content.Add(product);
        }
        public void RemoveProduct(int id)
        {
            SmartDevice product = this.content.FirstOrDefault(p => p.Id == id);
            this.content.Remove(product);
        }
        public int CountPanier()
        {
            return this.content.Count;
        }

    }

What is have so far

Here is what I have so far

What I'm trying to achieve

Here is what I'm trying to achieve

Maurice Filiatreault Hebert
  • 23
  • 4
  • 1
    if you hardcode a value for `Counter` does it display? – Jason Jul 08 '22 at 10:51
  • Yes it does that how I got the second screenshot – Maurice Filiatreault Hebert Jul 08 '22 at 12:08
  • there is nothing in your `Panier` class that will update `Counter` in `AppShellViewModel` – Jason Jul 08 '22 at 12:29
  • I thought that since the list was a observable collection and that I use On PropertyChanged in the AppShellViewModal property that it would update the counter seem like I'm missing something – Maurice Filiatreault Hebert Jul 08 '22 at 12:33
  • that's not how an ObservableCollection works - and regardless these are two different objects in two different classes that have nothing linking them together. There are a lot of ways you could fix this, the simplest might be to use `MessagingCenter` to send a message to `AppShellViewModal` whenever the count is modified – Jason Jul 08 '22 at 12:36
  • I guess I would use them on the add and remove method to notify that the list as been updated? I've never used them before I'm gonna go read about them on the docs thanks! – Maurice Filiatreault Hebert Jul 08 '22 at 12:39

0 Answers0