New to Telerik UI for Xamarin? Download free 30-day trial

Add images to TabView headers


Product Version R1 2021
Product TabView for Xamarin


This help article will show you how to customize the TabView header items and add images to them.


In general, you can customize the appearance of each TabViewHeaderItem by modifying its ControlTemplate. You can take the default ControlTemplate as a base and add any controls inside it per the requirements you have. Check Customize the TabViewHeaderItem Control Template documentation topic for more details on the matter.

To show an image, you can add an Xamarin.Forms.Image View inside the template.

Here is a sample ControlTemplate with an Image view that should be added to the Page Resources:

<ControlTemplate x:Key="DinnerHeaderControlTemplate">
    <Grid BackgroundColor="Transparent">
        <BoxView IsVisible="{TemplateBinding IsSelected}"
                BackgroundColor="{TemplateBinding SelectedColor}"
                HeightRequest="2" />
        <StackLayout Orientation="Horizontal" 
                     Margin="0, 0, 0, 8">
            <Image Source="tab_dinner.png" />
            <Label Text="{TemplateBinding Text}" 
                    Margin="0, 0, 0, 2" 
                    HorizontalOptions="Center" />

Then apply thus created DinnerHeaderControlTemplate to the TabViewHeaderItem ControlTemplate property:

<telerikPrimitives:RadTabView x:Name="tabView">
                <telerikPrimitives:TabViewHeaderItem Text="Dinner" 
                                                     ControlTemplate="{StaticResource DinnerHeaderControlTemplate}" />

Check the result on Android below:

In this article