Xamarin 社区工具包 TabView 徽章不适用于 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>

Answer 1

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