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.
Run your demo. The result should be similar to the next image.<telerik:RadTabControl x:Name="tabControl" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Persons}"/>
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".
The result should look like the image below.<telerik:RadTabControl x:Name="radTabControl" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Persons}" DisplayMemberPath="Name"/>
-
The final step is to create a DataTemplate and set it as a ContentTemplate.
The final result is shown on the next image:<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>
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.