How to update badge counter in Parent tab page xamarin forms

Question

I have a App that uses tabbed pages, In the xaml of the Parent tab page I populate all my other tab pages, I have a viewmodel that binds to the Parent tab page and viewmodels for each of the other Tab pages. I have a badge on one of the tabs that has a counter which shows how many messages there are. I am having trouble updating the counter.

So I have a call to retrieve the amount of unread messages from the database which is populating into the counter on app load. When i Navigate to view the message it updates the database of that the message has been read , I then navigate back to the tabbed page with a popasync , I then pull to refresh which executes the call to get amount of messages read but it not updating the the counter, if i put a break point on the GetCounter method i see it is updating the counter with the right amount but not changing in on the badge.

Hope that makes sense.

If anyone can help i will be very grateful.

Master Tab Page:

<NavigationPage Title="Message" Icon="email.png"  plugin:TabBadge.BadgeText="{Binding counter}" 
             plugin:TabBadge.BadgeColor="Red"
             plugin:TabBadge.BadgePosition="PositionTopRight"
             plugin:TabBadge.BadgeTextColor="Green">
    <x:Arguments>
        <local:MessagePage  BindingContext="{Binding messages}" />
    </x:Arguments>
</NavigationPage>



public partial class MasterTabPage : TabbedPage
{
    Master_PageViewModel vm;
    public MasterTabPage ()
    {
        InitializeComponent ();
        this.BindingContext = vm = new Master_PageViewModel(Navigation);
    }
}

Master Tab Page ViewModel:

 public class Master_PageViewModel : INotifyPropertyChanged
{
    INavigation Navigation;
    private int _counter;
    public int counter
    {
        get => _counter;
        set
        {
            _counter = value;
            OnPropertyChanged(nameof(counter));

        }
    }
    public MessagePageViewModel messages { get; set; }
    public Master_PageViewModel(INavigation navigation)
    {
        Navigation = navigation;
        messages = new MessagePageViewModel(Navigation);
        Init();
        counter = 0;
    }
    public async void Init()
    {
        await GetCounter();
    }
    public async Task GetCounter()
    {
        try
        {
            using (HttpClient client = new HttpClient())
            {
                List<MessageModel> msg = new List<MessageModel>();

                using (HttpResponseMessage response = await client.GetAsync("http://localhost:53665/api/GetMessagesCount/Id=" + 2 + "/" ))
                {
                    if (response.IsSuccessStatusCode)
                    {
                        using (HttpContent content = response.Content)
                        {
                            var textresponse = await content.ReadAsStringAsync();
                            var json = JsonConvert.DeserializeObject<List<MessageModel>>(textresponse);
                            foreach (var i in json)
                            {
                                msg.Add(new MessageModel
                                {
                                    msgCounter = i.msgCounter,
                                });
                            }
                            counter = msg[0].msgCounter;
                        }
                    }
                    else
                    {

                    }
                }
            }
        }
        catch (Exception)
        {

        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

Message Tab ViewModel:

public class MessagePageViewModel : BaseViewModel
{

    public ICommand MessageDetailsCommand { get; set; }
    INavigation Navigation;

    private ObservableCollection<MessageModel> _messagesList;
    public ObservableCollection<MessageModel> MessagesList
    {
        get { return _messagesList; }
        set
        {
            if (_messagesList != value)
            {
                _messagesList = value;
            }
        }
    }

    public ICommand ReloadCommand { get; set; }
    public ICommand RefreshCommand
    {
        get
        {
            return new Command(async () =>
            {
                await GetMessages();
                Master_PageViewModel vm = new Master_PageViewModel(Navigation,multiMediaPickerService);
                await vm.GetCounter();
            });
        }
    }

    bool _isBusy;
    public bool IsBusy
    {
        get { return _isBusy; }
        set
        {
            _isBusy = value;

        }
    }
    public MessagePageViewModel(INavigation navigation)
    {


        ReloadCommand = new Command(async () => await ReloadPage());

        Navigation = navigation;
        MessageDetailsCommand = new Command(async (object obj) => await MessageDetails(obj));
        Initialize();

    }

    private async void Initialize()
    {

        await GetMessages();

    }

    private async Task ReloadPage()
    {
        await GetMessages();
    }


    public async Task GetMessages()
    {
        List<MessageModel> msg = new List<MessageModel>
           .........
        MessagesList = new ObservableCollection<MessageModel>(msg);

    }

    private async Task MessageDetails(object obj)
    {
        var item = (obj as MessageModel);

        await Navigation.PushAsync(new MessageDetailsPage(....));
    }

    }
    }
}

score 2 · Accepted Answer · answered Jun 07 '19 at 02:29

This is because you created a new instance of Master_PageViewModel in your RefreshCommand. It is not the parent tabbed page's binding context so the tab's badge won't be updated even though the GetCounter has been triggered.

You have to pass the parent tabbed view model to your MessagePageViewModel like:

public Master_PageViewModel(INavigation navigation)
{
    Navigation = navigation;
    messages = new MessagePageViewModel(Navigation, this);
    Init();
    counter = 0;
}

And change your message page view model's constructor:

Master_PageViewModel parentViewModel
public MessagePageViewModel(INavigation navigation, Master_PageViewModel viewModel)
{
    ReloadCommand = new Command(async () => await ReloadPage());

    Navigation = navigation;
    parentViewModel = viewModel;

    // ...
}

At last, trigger the method in your refresh command:

public ICommand RefreshCommand
{
    get
    {
        return new Command(async () =>
        {
            await GetMessages();
            await parentViewModel.GetCounter();
        });
    }
}

Moreover, I noticed that your MessagePageViewModel used the parent tabbed view model's navigation. I don't think this is a good approach as it has its own NavigationPage so that it should utilize its own navigation instead of the parent's.

Thank you very much Land Lu, appreciate you taking time out to help me with my problem. — Anthony Horter, Jun 07 '19 at 05:58

How to update badge counter in Parent tab page xamarin forms

1 Answers1

Linked