Xamarin Community Toolkit TabView badge does not work with ControlTemplate

Question

I am using the Xamarin Community Toolkit TabView with a ControlTemplate in the TabViewItem, it works well. I tried adding a Badge to the TabViewItem and nothing happens. When I remove the ControlTemplate the Badge works perfectly. As a sanity test, I pulled the XCT sample code and tried adding a control template to a working TabView badge example and got the same results, no badge.

I am hoping that I am just missing something simple, but I have a feeling that the ControlTemplate and Badge are not compatible...

Does anyone have any examples of and XCT TabViewItem using a ControlTemplate and a badge?

Here is the sample xaml from the CustomTabsPage.xaml in the XCT Samples. I modified it by adding a Badge to the first tab, but it does not show the badge.

<pages:BasePage>    
    <pages:BasePage.Resources>
        <ResourceDictionary>
            <ControlTemplate
                x:Key="TabItemTemplate">
                <Grid
                    RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image
                        Grid.Row="0"
                        VerticalOptions="Center"
                        HorizontalOptions="Center"
                        WidthRequest="24"
                        HeightRequest="24"
                        Margin="6"
                        Source="{TemplateBinding CurrentIcon}" />
                    <Label
                        Grid.Row="1"
                        HorizontalOptions="Center"
                        FontSize="{TemplateBinding FontSize}"
                        Text="Test"
                        TextColor="{TemplateBinding CurrentTextColor}" />
                </Grid>
            </ControlTemplate>

            <ControlTemplate
                x:Key="FabTabItemTemplate">
                <Grid>
                    <ImageButton
                        InputTransparent="True"
                        Source="{TemplateBinding CurrentIcon}"
                        Padding="10"
                        HorizontalOptions="Center"
                        BackgroundColor="#FF0000"
                        HeightRequest="60"
                        WidthRequest="60"
                        Margin="6">
                        <ImageButton.CornerRadius>
                            <OnPlatform x:TypeArguments="x:Int32">
                                <On Platform="iOS" Value="30"/>
                                <On Platform="Android" Value="60"/>
                                <On Platform="UWP" Value="36"/>
                            </OnPlatform>
                        </ImageButton.CornerRadius>
                        <ImageButton.IsVisible>
                            <OnPlatform x:TypeArguments="x:Boolean">
                                <On Platform="Android, iOS, UWP">True</On>
                                <On Platform="macOS">False</On>
                            </OnPlatform>
                        </ImageButton.IsVisible>
                    </ImageButton>
                    <BoxView
                        InputTransparent="True"
                        HorizontalOptions="Center"
                        CornerRadius="30"
                        BackgroundColor="#FF0000"
                        HeightRequest="60"
                        WidthRequest="60"
                        Margin="6">
                        <BoxView.IsVisible>
                            <OnPlatform x:TypeArguments="x:Boolean">
                                <On Platform="Android, iOS, UWP">False</On>
                                <On Platform="macOS">True</On>
                            </OnPlatform>
                        </BoxView.IsVisible>
                    </BoxView>
                </Grid>
            </ControlTemplate>

            <Style
                x:Key="TabItemStyle"
                TargetType="xct:TabViewItem">
                <Setter
                    Property="FontSize"
                    Value="12" />
                <Setter
                    Property="TextColor"
                    Value="#979797" />
                <Setter
                    Property="TextColorSelected"
                    Value="#FF0000" />
            </Style>

            <Style
                x:Key="CustomTabStyle"
                TargetType="xct:TabView">
                <Setter
                    Property="IsTabTransitionEnabled"
                    Value="True" />
                <Setter
                    Property="TabStripHeight"
                    Value="48" />
                <Setter
                    Property="TabContentBackgroundColor"
                    Value="#484848" />
                <Setter
                    Property="TabStripPlacement"
                    Value="Bottom" />
            </Style>

        </ResourceDictionary>
    </pages:BasePage.Resources>
    <pages:BasePage.Content>
        <Grid>
            <xct:TabView 
                Style="{StaticResource CustomTabStyle}">
                <xct:TabView.TabStripBackgroundView>
                    <BoxView
                        Color="#484848"
                        CornerRadius="36, 36, 0, 0"/>
                </xct:TabView.TabStripBackgroundView>
                <xct:TabViewItem
                    Text="Tab 1"  
                    Icon="triangle.png"
                    ControlTemplate="{StaticResource TabItemTemplate}"
                    BadgeText="Test"
                    BadgeBackgroundColor="Pink"
                    BadgeBackgroundColorSelected="Red"
                    BadgeTextColor="White"
                    Style="{StaticResource TabItemStyle}">
                    <Grid 
                        BackgroundColor="LawnGreen">
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>
                <xct:TabViewItem
                    Text="Tab 2"   
                    Icon="circle.png"
                    ControlTemplate="{StaticResource FabTabItemTemplate}"
                    Style="{StaticResource TabItemStyle}"
                    TabTapped="OnFabTabTapped" />
                <xct:TabViewItem
                    Text="Tab 3"  
                    Icon="square.png"
                    ControlTemplate="{StaticResource TabItemTemplate}"
                    Style="{StaticResource TabItemStyle}">
                    <Grid
                        BackgroundColor="LightCoral">
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent3" />
                    </Grid>
                </xct:TabViewItem>
            </xct:TabView>
        </Grid>
    </pages:BasePage.Content>
</pages:BasePage>

Alexandar May - MSFT · Accepted Answer · 2022-04-22T05:14:37.400

You could add a BageView in your ControlTemplate like below and then remove the Badge properties in TabViewItem. Also please slightly adjust the position of the badge where you want to place it.

    <ControlTemplate
            x:Key="TabItemTemplate">
            <Grid
                RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image
                    Grid.Row="0"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    WidthRequest="24"
                    HeightRequest="24"
                    Margin="6"
                    Source="{TemplateBinding CurrentIcon}" />
                <Label
                    Grid.Row="1"
                    HorizontalOptions="Center"
                    FontSize="{TemplateBinding FontSize}"
                    Text="Test"
                    TextColor="{TemplateBinding CurrentTextColor}" />

                <xct:BadgeView
                    Grid.Row="0" Grid.Column="1"
                    BackgroundColor="Pink"
                    TextColor="White"
                    Text="123"
                    />
            </Grid>
        </ControlTemplate>

Reference link: https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/badgeview

I tried this workaround and the badge does appear, so thanks for the idea, very helpful. There is a bit more work to get the BadgeView to position properly vs. the of the out of the box behavior that the TabViewItem.Badge feature provides, but at least the BadgeView works, and does provide some flexibility if I need it. I will have to do some digging to try and figure out what the root problem is, unless I get lucky and someone beats me to it. — bmgsmith, Apr 22 '22 at 16:52

Xamarin Community Toolkit TabView badge does not work with ControlTemplate

1 Answers1