How to set badge in .NET MAUI Tab View header?

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

Steps to Add Badges to Tab View Header

1. Define the Tab View 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*" />
                    </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" />
                        </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:TabItemSourceViewModel />
                        </ListView.BindingContext>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Vertical" Margin="30,0,0,0">
                                        <Label Text="{Binding ID}" FontSize="24" />
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </tabView:SfTabView.ContentItemTemplate>
    </tabView:SfTabView>
</ContentPage.Content>

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to set a badge in the .NET MAUI Tab View header.

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

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

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