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

TabViewHeaderItem

The tab strip area of RadTabView contains a special toolbar panel that hosts all TabViewHeaderItem elements. The RadTabView control exposes a Header property which you can use to modify the header's appearance. Each individual TabViewItem has a Header property as well so you can set a specific TabViewHeaderItem for each tab.

Setting the Header's Position

You can use the HeaderPosition property of RadTabView to control the position of the header. The property allows you to place the header at the top of the control where is by default or at the bottom, under the content of the selected tab.

Default TabViewHeader ControlTemplate

Here is the default Header ControlTemplate definition:

<ControlTemplate x:Key="HeaderControlTemplate" >
    <Grid BackgroundColor="Transparent">
        <BoxView IsVisible="{TemplateBinding IsSelected}"
                    BackgroundColor="{TemplateBinding SelectedColor}"
                    VerticalOptions="End"
                    HeightRequest="2" />
        <Label Text="{TemplateBinding Text}" 
                Margin="0, 0, 0, 2" 
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
    </Grid>
</ControlTemplate>

The TabView definition and how to control template is set to the TabView Header

<telerikPrimitives:RadTabView x:Name="tabView"
                                HeaderPosition="Top">
    <telerikPrimitives:RadTabView.Items>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 1" 
                                                     ControlTemplate="{StaticResource HeaderControlTemplate}" />
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
        <telerikPrimitives:TabViewItem HeaderText="Tab 2"/>
        <telerikPrimitives:TabViewItem HeaderText="Tab 3"/>
    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>

Customize the TabViewHeader control template:

You can customize the appearance of each TabViewHeaderItem by replacing its default template with one of your choice. Below you can find a sample scenario where a custom control template is declared and set to the ControlTemplate property of the TabViewHeaderItem.

You can alter the control template of the TabViewHeaderItem in order to control the color of the selected item.

Example

<ContentView.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="HeaderControlTemplate">
            <Grid BackgroundColor="Transparent">
                <BoxView IsVisible="{TemplateBinding IsSelected}"
                         BackgroundColor="Orange"
                         VerticalOptions="End"
                         HeightRequest="5"/>
                <StackLayout Orientation="Horizontal" 
                             Margin="0, 0, 0, 8">
                    <Label Text="{TemplateBinding Text}"
                           FontSize="15"
                           TextColor="Orange"
                           VerticalOptions="Center"
                           HorizontalTextAlignment="Start"/>
                    <Label Text="Description"
                           TextColor="LightBlue"
                           IsVisible="{TemplateBinding IsSelected}"
                           VerticalTextAlignment="Center"
                           FontSize="12"/>
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentView.Resources>
<telerikPrimitives:RadTabView x:Name="tabView"
                              HeaderPosition="Top">
    <telerikPrimitives:RadTabView.Items>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 1" 
                                                     ControlTemplate="{StaticResource HeaderControlTemplate}" />
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
        <telerikPrimitives:TabViewItem HeaderText="Tab 2"/>
        <telerikPrimitives:TabViewItem HeaderText="Tab 3"/>
    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>

Here is the result how the TabViewHeaderItem with custom Control Template looks:

TabViewHeaderItem Template

A sample HeaderItem Custom Template example can be found in the TabView/Features folder of the SDK Samples Browser application.

Customizing the Overflow Button

If there are too many items in the tabview control and they cannot fit into the tab strip area, an overflow button will be displayed. You can customize the button through the following properties.

  • OverflowButtonText: You can use this property to set the text of the button. The default one is "More".
  • OverflowButtonTemplate: If you need more complex layout for the button you can use this property.

Example

This example demonstrates how to replace the default header of the RadTabView control and change its background. Also, how to set the header position to display the tab strip area at bottom.

<telerikPrimitives:RadTabView x:Name="tabView" HeaderPosition="Bottom">
    <telerikPrimitives:RadTabView.Header>
        <telerikPrimitives:TabViewHeader BackgroundColor="Orange">
            <telerikPrimitives:TabViewHeader.OverflowButtonTemplate>
                <DataTemplate>
                    <Label Margin="3,0,3,0"
                               BackgroundColor="#CA5100"
                               Text=" + "
                               VerticalOptions="Center"/>
                </DataTemplate>
            </telerikPrimitives:TabViewHeader.OverflowButtonTemplate>
        </telerikPrimitives:TabViewHeader>
    </telerikPrimitives:RadTabView.Header>
    <telerikPrimitives:RadTabView.Items>
        <telerikPrimitives:TabViewItem HeaderText="January " />
        <telerikPrimitives:TabViewItem HeaderText="February " />
        <telerikPrimitives:TabViewItem HeaderText="March " />
        <telerikPrimitives:TabViewItem HeaderText="April " />
        <telerikPrimitives:TabViewItem HeaderText="May " />
        <telerikPrimitives:TabViewItem HeaderText="June " />
        <telerikPrimitives:TabViewItem HeaderText="July " />
        <telerikPrimitives:TabViewItem HeaderText="August " />
        <telerikPrimitives:TabViewItem HeaderText="September " />
        <telerikPrimitives:TabViewItem HeaderText="October " />
        <telerikPrimitives:TabViewItem HeaderText="November " />
        <telerikPrimitives:TabViewItem HeaderText="December " />
    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>
RadTabView tabView = new RadTabView()
{
    HeaderPosition = TabViewHeaderPosition.Bottom,
    Header = new Telerik.XamarinForms.Primitives.TabViewHeader()
    {
        BackgroundColor = (Color)(new ColorTypeConverter()).ConvertFromInvariantString("#293955"),
        OverflowButtonTemplate = new DataTemplate(() =>
        {
            return new Label()
            {
                Text = " + ",
                BackgroundColor = (Color)(new ColorTypeConverter()).ConvertFromInvariantString("#CA5100"),
                Margin = new Thickness(3, 0, 3, 0)
            };
        }),
    }
};

for (int i = 1; i <= 13; i++)
{
    tabView.Items.Add(new Telerik.XamarinForms.Primitives.TabViewItem() { HeaderText = string.Format("Tab{0} ", i) });
}

Additionally, you can work with the already assigned header instead of replacing it with a new one. For example - tabView.Header.BackgroundColor = Color.Green.

Here is how the overflow button looks after customization:

Custom Overflow Button

A sample Overflow Button Customization example can be found in the TabView/Features folder - Tab View Header of the SDK Samples Browser application.

See Also

In this article
Not finding the help you need? Improve this article