RadTabView with badges in header

1 Answer 137 Views
TabView
Richard
Top achievements
Rank 1
Richard asked on 17 Jan 2023, 05:36 PM

I know it's not supported out of the box, but I was wondering if there would be a way to create custom header items that have text and badges in them. 

For instance:

 

Alternatively, are there any future plans to add such functionality?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 19 Jan 2023, 09:08 AM

Hi Richard,

You can add BadgeView control inside the TabView header using the HeaderItemTemplatehttps://docs.telerik.com/devtools/maui/controls/tabview/templates 

Here is an example:

    <ContentView.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="template">
                <HorizontalStackLayout>
                    <Label Text="{TemplateBinding Text}"/>
                    <telerik:RadBadgeView BadgeText="1" AutomationId="badgeView">
                        <telerik:RadBadgeView.Content>
                            <telerik:RadBorder WidthRequest="30"
                         HeightRequest="30"
                         BorderThickness="1"
                         BorderColor="LightGray">
                                <Label Text="B"/>
                            </telerik:RadBorder>
                        </telerik:RadBadgeView.Content>
                    </telerik:RadBadgeView>
                </HorizontalStackLayout>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentView.Resources>
<telerik:RadTabView x:Name="tabView" HeaderItemTemplate="{StaticResource template}"> <telerik:TabViewItem HeaderText="MyText"> <Label Margin="10" Text="This is the content of the Home tab" /> </telerik:TabViewItem> <telerik:TabViewItem HeaderText="Second Tab"> <Label Margin="10" Text="This is the content of the Folder tab" /> </telerik:TabViewItem> <telerik:TabViewItem HeaderText="Third Tab"> <Label Margin="10" Text="This is the content of the View tab" /> </telerik:TabViewItem> </telerik:RadTabView>

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Richard
Top achievements
Rank 1
commented on 19 Jan 2023, 09:47 AM

Thanks, pretty close to what I ended up doing. 
Tags
TabView
Asked by
Richard
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or