Getting Started

This article demonstrates how to create a sample application that contains RadTabView.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Defining RadTabView

To use the tabview control you can include the following namespaces:

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
using Telerik.XamarinForms.Primitives;

To display something in the tab you can define TabViewItem elements in its Items collection.

<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="Folder">
            <telerikPrimitives:TabViewItem.Content>
                <Label Margin="10" Text="This is the content of the Folder 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: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 folderTab = new TabViewItem()
{
    HeaderText = "Folder",
    Content = new Label() { Text = "This is the content of the Folder 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) },
};
tabView.Items.Add(homeTab);
tabView.Items.Add(folderTab);
tabView.Items.Add(viewTab);

To define the header of a TabViewItem you can use its HeaderText property as in the example. If you need to show a more complext layout you can use the Header property.

Figure 1: TabView example

BusyIndicator example

SDK Browser and QSF applications contain different examples that show RadTabView's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also