How to set badge in .NET MAUI TabView header?

This article provides a step-by-step guide on how to set badges within the header of a .NET MAUI TabView. Badges are often used to display a count or status, such as the number of new messages or notifications.

Steps to Add Badges to TabView Header

1. Define the TabView in your XAML file and bind the ItemsSource to your view model’s collection of tab items.

2. In the HeaderItemTemplate, use the BadgeView control to create the badge. Set the BadgeText property to the desired value for the badge. Include a Label within BadgeView.Content to represent the tab identifier or title from your view model. Customize the badge appearance by adjusting relevant properties.

XAML

 <contentpage.content>
     <tabview:sftabview itemssource="{Binding TabItems}" tabwidthmode="Default">
         <tabview:sftabview.headeritemtemplate>
             <datatemplate>
                 <grid>
                     <grid.columndefinitions>
                         <columndefinition width="2*">
                         <columndefinition width="8*">
                     </columndefinition></columndefinition></grid.columndefinitions>
                     <core:sfbadgeview horizontaloptions="Center" verticaloptions="Center" badgetext="20" grid.column="1" margin="0,30,0,0">
                         <core:sfbadgeview.content>
                             <label text="{Binding ID}" widthrequest="100" heightrequest="60" grid.column="2">
                         </label></core:sfbadgeview.content>
                     </core:sfbadgeview>
                 </grid>
             </datatemplate>
         </tabview:sftabview.headeritemtemplate>
         <tabview:sftabview.contentitemtemplate>
             <datatemplate>
                 <grid backgroundcolor="White" x:name="AllContactsGrid">
                     <listview x:name="ContactListView" itemssource="{Binding TabItems}" rowheight="75">
                         <listview.bindingcontext>
                             <local:tabitemssourceviewmodel>
                         </local:tabitemssourceviewmodel></listview.bindingcontext>
                         <listview.itemtemplate>
                             <datatemplate>
                                 <viewcell>
                                     <stacklayout orientation="Vertical" margin="30,0,0,0">
                                         <label text="{Binding ID}" fontsize="24">
                                     </label></stacklayout>
                                 </viewcell>
                             </datatemplate>
                         </listview.itemtemplate>
                     </listview>
                 </grid>
             </datatemplate>
         </tabview:sftabview.contentitemtemplate>
     </tabview:sftabview>
 </contentpage.content>

Output

Sample link GitHub

Conclusion

Hope you enjoyed learning about how to set badge in .NET MAUI TabView header.

You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!