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.

Custom TabViewHeader

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

<ContentPage.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"
                           HorizontalTextAlignment="Start"/>
                    <Label Text="Description of the header"
                           TextColor="LightBlue"
                           IsVisible="{TemplateBinding IsSelected}"
                           VerticalTextAlignment="Center"
                           FontSize="12"/>
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.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>

Figure 1: TabViewHeaderItem with custom Control Template

TabViewHeaderItem Template

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">
    <telerikPrimitives:RadTabView.Items>

        <telerikPrimitives:TabViewItem HeaderText="Home">
            <telerikPrimitives:TabViewItem.Content>
                <Label Margin="10" Text="This is the content of the Home tab" />
            </telerikPrimitives:TabViewItem.Content>
        </telerikPrimitives:TabViewItem>

        <telerikPrimitives:TabViewItem HeaderText="View">
            <telerikPrimitives:TabViewItem.Content>
                <Label Margin="10" Text="This is the content of the View tab" />
            </telerikPrimitives:TabViewItem.Content>
        </telerikPrimitives:TabViewItem>

        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem>
                    <telerikPrimitives:TabViewHeaderItem.Content>
                        <StackLayout Margin="5,0,0,0" Orientation="Horizontal">
                            <ContentView BackgroundColor="#CA5100"
                                         HeightRequest="10"
                                         VerticalOptions="Center"
                                         WidthRequest="10" />
                            <Label Text="Folder" />
                        </StackLayout>
                    </telerikPrimitives:TabViewHeaderItem.Content>
                </telerikPrimitives:TabViewHeaderItem>
            </telerikPrimitives:TabViewItem.Header>
            <telerikPrimitives:TabViewItem.Content>
                <Label Margin="10" Text="This is the content of the Folder tab" />
            </telerikPrimitives:TabViewItem.Content>
        </telerikPrimitives:TabViewItem>

    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>
RadTabView tabView = new RadTabView();
TabViewItem homeTab = new TabViewItem()
{
    HeaderText = "Home",
    Content = new Label()
    {
        Text = "This is the content of the Home tab",
        Margin = new Thickness(10)
    },
};
TabViewItem viewTab = new TabViewItem()
{
    HeaderText = "View",
    Content = new Label()
    {
        Text = "This is the content of the View tab",
        Margin = new Thickness(10)
    },
};
StackLayout folderTabHeaderPanel = new StackLayout()
{
    Orientation = StackOrientation.Horizontal,
    Margin = new Thickness(5, 0, 0, 0),
};
folderTabHeaderPanel.Children.Add(new ContentView()
{
    BackgroundColor = (Color)(new ColorTypeConverter()).ConvertFromInvariantString("#CA5100"),
    WidthRequest = 10,
    HeightRequest = 10,
    VerticalOptions = LayoutOptions.Center,
});
folderTabHeaderPanel.Children.Add(new Label() { Text = "Folder" });
TabViewItem folderTab = new TabViewItem()
{
    Header = new TabViewHeaderItem() { Content = folderTabHeaderPanel },
    Content = new Label()
    {
        Text = "This is the content of the Folder tab",
        Margin = new Thickness(10)
    },
};

tabView.Items.Add(homeTab);
tabView.Items.Add(viewTab);
tabView.Items.Add(folderTab);

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

Figure 2: Custom TabViewHeader example

Custom TabViewHeader

See Also