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
0
Hi Richard,
You can add BadgeView control inside the TabView header using the HeaderItemTemplate: https://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
commented on 19 Jan 2023, 09:47 AM
Top achievements
Rank 1
Rank 1
Thanks, pretty close to what I ended up doing.