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.