TabViewItem

TabViewItem is the control used to populate RadTabView. It displays the header of the tab item and the corresponding content.

Displaying TabViewItem

To display a TabViewItem you can add it in the Items collection of RadTabView.

Defining Header

You can define a header for TabViewItem using its Header or HeaderText properties. HeaderText can be used to set a simple string header. On the other hand the Header allows you to create a more complex layout for the tabview using the TabViewHeaderItem control. You can see both properties demonstrated in the Example section of this article.

Defining Content

You can define the content of a TabViewItem via its Content property. It is of type View, so you can use any UI element that implements the View class.

The RadTabView control will display only the content of the selected item.

Selecting an Item

You can manually select TabViewItem via its IsSelected bool property. Selecting an item will deselect all the others from the Items collection. See also the Selection article.

Example

This example demonstrates how to define RadTabView with TabViewItems and set their header, content and also how to select an item via its IsSelected property.

<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);

Figure 1: TabViewItem example

BusyIndicator example

See Also