Add Badge to Tabs

[dean-toolhound]

This issue is two-fold.

1. It would be nice to have a badge available on a tab item where you can set properties like BadgeText, BadgeTextColor, BadgeBackgroundColor and BadgeIsVisible.

2. I have tried to create the same using the TabItem.HeaderTemplate with something like this.

<material:TabItem.HeaderTemplate>
     <DataTemplate>
         <Grid RowDefinitions="Auto" Opacity="0.5">
             <toolkit:AvatarView Text="0"
                                 FontSize="Small" HeightRequest="30" WidthRequest="30"
                                 FontAttributes="Bold"
                                 CornerRadius="10" HorizontalOptions="End" VerticalOptions="Start" BackgroundColor="Tomato"/>
             <Button Text="{Binding Title}" 
                     Command="{Binding Command}"
                     HorizontalOptions="Center" VerticalOptions="Center" StyleClass="TextButton"
                     CornerRadius="0" TextColor="{AppThemeBinding Light={StaticResource OnBackground}, Dark={StaticResource OnBackgroundDark}}"/>
     </DataTemplate>
 </material:TabItem.HeaderTemplate>

I have a viewmodel on my page and when I compile the code I get an error message that Command is not in my viewmodel. I have tried referencing the TabView context and the TabItem context but neither works.

Command="{Binding Path=BindingContext.Command, Source={x:Reference Tabs}}"

I can compile but clicking the tab does nothing.

I don't believe this is an issue with the tabview but do you have any suggestions?

Thanks.

[dean-toolhound]

An update after playing further with this. If I click outside the button on the tab, it does change tabs. If I click directly on the button nothing happens.

[dean-toolhound]

I got it to work with the following.

Command="{Binding Source={RelativeSource AncestorType={x:Type material:TabItem}}, Path=Command}"

Still looking to see badges as part of TabView.

Thanks.

[dean-toolhound]

I have created a control than can be used in the TabItem data template that allows images, color selections and badges. I have attached it here if anyone can use it. It can probably be improved upon but it does the job for me.

TabItemWithBadge.txt

Here is how it is used:

                <material:TabItem.HeaderTemplate>
                    <DataTemplate>
                        <controls:TabItemWithBadge Title="{Binding Source={RelativeSource AncestorType={x:Type material:TabItem}}, Path=Title}"
                                                   Command="{Binding Source={RelativeSource AncestorType={x:Type material:TabItem}}, Path=Command}"
                                                   IsSelected="{Binding Source={RelativeSource AncestorType={x:Type material:TabItem}}, Path=IsSelected}"
                                                   ImageSource="{FontImageSource FontFamily=FASolid, Glyph={x:Static fonts:Solid.CartShopping}}"

                                                   TextColor="{StaticResource Black}"
                                                   BackgroundColor="{StaticResource Gray100}"
                                                   SelectedTextColor="{StaticResource Primary}"
                                                   SelectedBackgroundColor="{StaticResource Primary}"

                                                   IsBadgeVisible="True"
                                                   BadgeText="{Binding MyBadgeText}"
                                                   BadgeTextColor="White"  
                                                   BadgeBackgroundColor="Tomato"/>

                    </DataTemplate>
                </material:TabItem.HeaderTemplate>

Thanks for the great library.