Attaching a Badge to the TabView Header (Tab)

Updated over 6 months ago

Environment

Property	Value
Product	BadgeView for .NET MAUI
Version	6.7.0

Description

I want to attach a badge to each tab in the Telerik TabView control. Each badge must display the number of new items in the corresponding tab.

Solution

Follow these steps to attach a badge to each tab in the Telerik TabView control:

1. Customize the TabItem control template by using the HeaderItemTemplate property of the TabView control. In the custom control template, add a BadgeView control, attached to a Label or any other suitable control within the TabItem.

XAML

<ControlTemplate x:Key="myHeaderItemTemplate">
    <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                    BorderColor="{TemplateBinding BorderColor}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Padding="{TemplateBinding ContentPadding}">
        <telerik:RadBadgeView BadgeText="1"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            BadgeHorizontalAlignment="Start">
            <telerik:RadBadgeView.Content>
                <Label Text="{TemplateBinding Text}"/>
            </telerik:RadBadgeView.Content>
        </telerik:RadBadgeView>
    </telerik:RadBorder>
</ControlTemplate>

2. Set the created control template to the HeaderItemTemplate property of the TabView control:

XAML

<telerik:RadTabView x:Name="tabView"
                    HeaderItemTemplate="{StaticResource myHeaderItemTemplate}">
    <telerik:TabViewItem HeaderText="Home">
        <Label Margin="10" Text="This is the content of the Home tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="Folder">
        <Label Margin="10" Text="This is the content of the Folder tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="View">
        <Label Margin="10" Text="This is the content of the View tab" />
    </telerik:TabViewItem>
</telerik:RadTabView>

This will display a badge on each tab, showing additional information about the tab content.

Notes

You can customize the appearance of the BadgeView control by modifying its properties such as colors, size, and position.

See Also

• Telerik TabView Documentation
• Telerik BadgeView Documentation