Edit this page

Binding To Collection

The purpose of this tutorial is to show you how to bind a RadTabControl to a collection of business objects.

When you want the tabs of the RadTabControl to be automatically generated on the basis of a collection, use the ItemsSource property.

  • Create a new class named Person. The class' structure is shown on the next code-snippet.

public class Person
{
    public Person( string name, int age )
    {
        this.Name = name;
        this.Age = age;
    }
    public string Name
    {
        get;
        set;
    }
    public int Age
    {
        get;
        set;
    }
}
Public Class Person
    Public Sub New(ByVal name As String, ByVal age As Integer)
        Me.Name = name
        Me.Age = age
    End Sub

Private _Name As String
    Public Property Name() As String
        Get
            Return _Name
        End Get
        Set(ByVal value As String)
            _Name = value
        End Set
    End Property

Private _Age As Integer
    Public Property Age() As Integer
        Get
            Return _Age
        End Get
        Set(ByVal value As Integer)
            _Age = value
        End Set
    End Property
End Class
  • Create a new class named ViewModel, like the example below:

public class ViewModel
{
    public ViewModel()
    {
        this.Persons = new ObservableCollection<Person>();
        this.Persons.Add( new Person( "Ivan", 23 ) );
        this.Persons.Add( new Person( "Stefan", 34 ) );
        this.Persons.Add( new Person( "Maria", 16 ) );
        this.Persons.Add( new Person( "Michael", 78 ) );
    }
    public ObservableCollection<Person> Persons
    {
        get;
        set;
    }
}
Public Class ViewModel
    Public Sub New()
        Me.Persons = New ObservableCollection(Of Person)()
        Me.Persons.Add(New Person("Ivan", 23))
        Me.Persons.Add(New Person("Stefan", 34))
        Me.Persons.Add(New Person("Maria", 16))
        Me.Persons.Add(New Person("Michael", 78))
    End Sub

Private _Persons As ObservableCollection(Of Person)
    Public Property Persons() As ObservableCollection(Of Person)
        Get
            Return _Persons
        End Get
        Set(ByVal value As ObservableCollection(Of Person))
            _Persons = value
        End Set
    End Property
End Class

As you can see the ViewModel class has a reference to an observable collection of Person objects. In fact this will be set to the ItemsSource property of the RadTabControl. Also that in the class' constructor the collection is initialized with some sample data.

  • Declare your ViewModel as a resource.

<UserControl.Resources>
    <example:ViewModel x:Key="DataSource"/>
</UserControl.Resources>
  • Set the ItemsSource property of the RadTabControl.

<telerik:RadTabControl x:Name="tabControl"
    ItemsSource="{Binding Source={StaticResource DataSource}, Path=Persons}"/>

Run your demo. The result should be similar to the next image.

The reason for this result is that the RadTabControl "still doesn't know" how to display these business objects. You need to "say" explicitly what to be displayed as a Header using either the DisplayMemberPath property or setting the HeaderTemplate property. Additionally you need to set a ContentTemplate.
  • Set the DisplayMemberPath property of the RadTabControl to "Name".

<telerik:RadTabControl x:Name="radTabControl"
    ItemsSource="{Binding Source={StaticResource DataSource}, Path=Persons}"
    DisplayMemberPath="Name"/>

The result should look like the image below.
  • The final step is to create a DataTemplate and set it as a ContentTemplate.

<UserControl.Resources>
    <example:ViewModel x:Key="DataSource"/>

    <DataTemplate x:Key="ContentTemplate">
        <Grid>
            <TextBlock Text="{Binding Age}"/>
        </Grid>
    </DataTemplate>

</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">

    <telerik:RadTabControl x:Name="radTabControl" Margin="8"
        ItemsSource="{Binding Source={StaticResource DataSource}, Path=Persons}"
        DisplayMemberPath="Name"
        ContentTemplate="{StaticResource ContentTemplate}"/>

</Grid>

The final result is shown on the next image:

When the ItemsSource is specified, RadTabItem containers are generated for each item in the collection. By using the template properties of the RadTabControl and the RadTabItem you can control the appearance and the visualization of the items in the collection. Read more about templates here.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy