Forum› Xamarin.Forms
Badges to Tab Bar
Steve1000
Member ✭✭✭
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));
}
}
}
Tagged:
0
Answers
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
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.
Okey @Steve1000 , you can have a check whith GenericBadgeTab.xaml .The sample defines it in
NavigationPage.TitleViewand 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>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?
@Steve1000 Okey , I will check the sample whether works first . If good news will update here .
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?
Hi @Steve1000 I mean binging data in Children Page , not in
TabbedPage.xaml.As follow
ContentPage.Xamlof 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 :