Forum Xamarin.Forms

Badges to Tab Bar

Steve1000Steve1000 Member ✭✭✭

Hi any suggestions for how to add badges to the tab bar in Xamarin Forms?

i've upgraded to the latest visual studio for Mac (8.6.2 build 6) as well.

I've tried using xamarin-forms-tab-badge - however I can't get the binding to work. it works ok when setting the text directly in XAML, but not with using data binding.

Also i have no way to programatically set the plugin:TabBadgePage.BadgeText attribute from CodeBehind - is that possible to do?

Here is the code i have at the moment - I want to add the badge with count to MyMatchesPage:

MainTabPage.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"
        x:Class="MyApp.MainTabPage"
        xmlns:profile="clr-namespace:MyApp.Views.Profile" xmlns:search="clr-namespace:MyApp.Views.Search"
        xmlns:matches="clr-namespace:MyApp.Views.Matches" xmlns:about="clr-namespace:MyApp.Views.About"
        xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions" 

        xmlns:viewmodels="clr-namespace:MyApp.ViewModels"
        >
    <TabbedPage.BindingContext>
      <viewmodels:MainTabPageViewModel/>
    </TabbedPage.BindingContext>

    <TabbedPage.Children>

        <NavigationPage Title="Schedule" IconImageSource="icons/profile.png">
            <x:Arguments>
                    <profile:TheProfilePage x:Name="theProfilePage"/>
            </x:Arguments>
        </NavigationPage>


        <search:SearchPage      Title="Search"      IconImageSource="icons/search.png"      x:Name="theSearchPage"/>

        <matches:MyMatchesPage  Title="Matches"     IconImageSource="icons/chat.png"        x:Name="theMatchesPage" plugin:TabBadge.BadgeText="{Binding Count}" />

        <about:AboutPage        Title="About"       IconImageSource ="icons/settings.png"   x:Name="theAboutPage"/>

    </TabbedPage.Children>
</TabbedPage>

MainTabPageViewModel:

using System;
using System.ComponentModel;

namespace MyApp.ViewModels
{
    public class MainTabPageViewModel : INotifyPropertyChanged
    {
        public MainTabPageViewModel()
        {
            this.CountValue = 3;
        }


        private int _count;

        public string Count => _count <= 0 ? string.Empty : _count.ToString();

        public int CountValue
        {
            get => _count;
            set
            {
                if (_count == value)
                    return;    

                _count = value;
                RaisePropertyChanged(nameof(CountValue));
                RaisePropertyChanged(nameof(Count));
            }
        }





        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void RaisePropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

    }
}

Answers

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai

    Hi @Steve1000 , do you mind using this https://github.com/xabre/xamarin-forms-tab-badge to achieve that ?

  • Steve1000Steve1000 Member ✭✭✭

    @JuniorJiang said:
    Hi @Steve1000 , do you mind using this https://github.com/xabre/xamarin-forms-tab-badge to achieve that ?

    Hi - yes that is what i was using - but the data binding doesn't seem to work.

    if i put

        <matches:MyMatchesPage  Title="Matches"     IconImageSource="icons/chat.png"        x:Name="theMatchesPage" plugin:TabBadge.BadgeText="5" />
    

    then the badge shows correctly.

    if I put

        <matches:MyMatchesPage  Title="Matches"     IconImageSource="icons/chat.png"        x:Name="theMatchesPage" plugin:TabBadge.BadgeText="{Binding Count}" />
    

    then it doesn't work - even though Count is set as 3 in the view model constructor.

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai
    edited June 2020

    Okey @Steve1000 , you can have a check whith GenericBadgeTab.xaml .The sample defines it in NavigationPage.TitleView and this make the Badge count work actually .

    <NavigationPage.TitleView>
        <StackLayout HorizontalOptions="Center"
                     Orientation="Horizontal">
            <Label Text="Custom View"
                   FontSize="16"
                   TextColor="Black"
                   FontAttributes="Bold"
                   VerticalTextAlignment="Center" />
            <Image Source="tabicon.png"
                   VerticalOptions="Center"
                   WidthRequest="16"
                   HeightRequest="16" />
            <views:Badge Grid.Row="0"
                         VerticalOptions="Center"
                         BadgeText="{Binding Count}"
                         BadgeFontAttributes="{Binding FontAttributes}"
                         BadgeFontSize="{Binding FontSize}"
                         BackgroundColor="{Binding BadgeColor}"
                         BadgeTextColor="{Binding BadgeTextColor}" />
        </StackLayout>
    </NavigationPage.TitleView>
    
  • Steve1000Steve1000 Member ✭✭✭

    No that doesn't seem to work - and it looks like that is for the top bar navigation title bar, rather than the tabs at the bottom?

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai

    @Steve1000 Okey , I will check the sample whether works first . If good news will update here .

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai
    edited June 2020

    Hi @Steve1000 , I have tested it . Maybe it's an issue .

    If binding data in Tabbed page , badge will not shows .

    However , if binding data in Children Page , it will show .

    I think you can contact to author of this Nuget Page to report this issue :-)

  • Steve1000Steve1000 Member ✭✭✭

    @JuniorJiang said:
    Hi @Steve1000 , I have tested it . Maybe it's an issue .

    If binding data in Tabbed page , badge will not shows .

    However , if binding data in Children Page , it will show .

    I think you can contact to author of this Nuget Page to report this issue :-)

    Ok thanks! pls could you post the code-snippet for where you see it is working?

  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai
    edited June 2020

    Hi @Steve1000 I mean binging data in Children Page , not in TabbedPage.xaml.

    As follow ContentPage.Xaml of Children Page :

    <NavigationPage.TitleView>
        <StackLayout>
            <Label Text="Custom View"
                   FontSize="16"
                   TextColor="Black"
                   FontAttributes="Bold"
                   VerticalTextAlignment="Center" />
            <Image Source="tabicon.png"
                   VerticalOptions="Center"
                   WidthRequest="16"
                   HeightRequest="16" />
            <views:Badge Grid.Row="0"
                         VerticalOptions="Center"
                         BadgeText="{Binding Count}" />
        </StackLayout>
    </NavigationPage.TitleView>
    

    Then in ChildrenPage Binding with model , it will show :

    The screenshot :

Sign In or Register to comment.