TabViewHeader

The tab strip area of RadTabView is visualized via the TabViewHeader element. You can use the Header property of RadTabView to set a custom header.

Setting header position

You can use the HeaderPosition property of RadTabView to change 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.

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 1: Custom TabViewHeader example

BusyIndicator example

See Also