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.

See Also

• Customizing Appearance

• Add and Remove Tabs

• Data Binding