How to add badges to the TabView header?

[Sunny Si]

Hi, I need to add badges to the tabview headers, this was possible in Xamarin SFTabView by setting HeaderContent like below. How to achieve the same in MAUI?

Xamarin:

 <tabView:SfTabItem.HeaderContent>

                        <Grid>
                            <LabelText="Chats"
                                   FontSize="14"VerticalOptions="Center"
                                   HorizontalOptions="Center"/>
                            <FrameCornerRadius="10"
                                   BackgroundColor="Red"
                                   HasShadow="false"
                                   HeightRequest="20"
                                   VerticalOptions="Start"
                                   HorizontalOptions="End"
                                   Padding="5,0"
                                    IsVisible="{Binding HasChats}"
                                   >
                                <LabelText="{Binding ChatsCount}"
                                       FontSize="12"

                                       TextColor="White"
                                       VerticalOptions="CenterAndExpand"
                                       HorizontalOptions="CenterAndExpand"/>
                            </Frame>
                            </Grid>
                    </tabView:SfTabItem.HeaderContent>

MAUI:

  <tabView:SfTabViewBackgroundColor="White"
                                    x:Name="tabView"
                                    TabBarPlacement="Top">

                <tabView:SfTabItemHeader="Tab 1">
                    <tabView:SfTabItem.Content>
<!-- content -->
​                    </tabView:SfTabItem.Content>

[Brundha Velusamy]

Hi Sunny,

To include badges in the .NET MAUI SfTabView, we recommend using the BadgeText property within the SfTabItem to set the badge text, and the BadgeSettings property for customizing the appearance of the badge as illustrated in the below code snippet.

Please refer the below code snippet for this,

<tabView:SfTabView TabBarBackground="LightBlue">

    <tabView:SfTabItem Header="Call" BadgeText="5">

        <tabView:SfTabItem.BadgeSettings>

            <core:BadgeSettings Type="None" Background="HotPink"

                                TextPadding="0" Position="TopRight"

                                BadgeAlignment="Start"

                                StrokeThickness="2"

                                Stroke="White"/>

        </tabView:SfTabItem.BadgeSettings>

       …

</tabView:SfTabView>

For your convenience, we have included the sample as an attachment. Kindly review the attached file and inform us if you have any concerns.

Regards,

Brundha V

Attachment: TabView_97c2c049.zip