Use Data binding in Tab Control

When should we need the data binding with tab control? One possible scenario  is when we want to make our tabs, their contents or both depends on your data. Such as we want to make as many tabs as there are items in the list. Let’s take a look at simple example first. Here is our simple XAML file to create one tab control and doing nothing else.

  1: <Window x:Class="TabControl.Window1"

  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:     Title="Tab Control" Height="300" Width="400" Loaded="Window_Loaded">

  5:     <Grid>

  6:         <TabControl Margin="5" Name="tabControl">

  7:             

  8:         </TabControl>        

  9:     </Grid>

 10: </Window>

 11: 
In C# code we simply create a list of string and assign it to the items source property of tab control. Here is a C# code of this program. 
  1: using System;

  2: using System.Collections.Generic;

  3: using System.Linq;

  4: using System.Text;

  5: using System.Windows;

  6: using System.Windows.Controls;

  7: using System.Windows.Data;

  8: using System.Windows.Documents;

  9: using System.Windows.Input;

 10: using System.Windows.Media;

 11: using System.Windows.Media.Imaging;

 12: using System.Windows.Navigation;

 13: using System.Windows.Shapes;

 14: 

 15: namespace TabControl

 16: {

 17:     /// <summary>

 18:     /// Interaction logic for Window1.xaml

 19:     /// </summary>

 20:     public partial class Window1 : Window

 21:     {

 22:         public Window1()

 23:         {

 24:             InitializeComponent();

 25:         }

 26: 

 27:         private void Window_Loaded(object sender, RoutedEventArgs e)

 28:         {

 29:            List<String> lst = new List<String>();

 30: 

 31:             lst.Add("First");

 32:             lst.Add("Second");

 33:             lst.Add("Third");

 34:             lst.Add("Fourth");

 35: 

 36:             tabControl.ItemsSource = lst;

 37: 

 38:             tabControl.SelectedIndex = 0;

 39:         }

 40:     }

 41: }

 42: 
Here is the output of this program.
 
This is very simple example and shows the same string at tab header as well as tab content. We can make list of our class and do data binding of tab header and content with different fields of our class. Let’s do little bit fun and change the color of font also at the same time. We store all of this information in one class. Here is the code of that class. 
  1: public class ItemsInfo

  2: {

  3:     public ItemsInfo(String title, String description, String color)

  4:     {

  5:         Title = title;

  6:         Description = description;

  7:         Color = color;

  8:     }

  9: 

 10:     public String Title

 11:     { get; set; }

 12: 

 13:     public String Description

 14:     { get; set; }

 15: 

 16:     public String Color

 17:     { get; set; }

 18: }
We create a list of this class and assign it to the items source property of tab control. Here is a code of this.
  1: List<ItemsInfo> lst = new List<ItemsInfo>();

  2: 

  3: lst.Add(new ItemsInfo("First", "First Description", "Brown"));

  4: lst.Add(new ItemsInfo("Second", "Second Description", "Blue"));

  5: lst.Add(new ItemsInfo("Third", "Third Description", "Red"));

  6: lst.Add(new ItemsInfo("Fourth", "Fourth Description", "Green"));

  7: 

  8: tabControl.ItemsSource = lst;

  9: 

 10: tabControl.SelectedIndex = 0;
In XAML we are going to define two data templates one for the items and another one for the content and perform data binding. Here is a complete XAML code of to demonstrate this. 
  1: <Window x:Class="TabControl.Window1"

  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:     Title="Tab Control" Height="300" Width="400" Loaded="Window_Loaded">

  5:     <Grid>

  6:         <TabControl Margin="5" Name="tabControl">

  7:             <TabControl.ContentTemplate>

  8:                 <DataTemplate>

  9:                     <Border BorderBrush="Brown" BorderThickness="5">

 10:                         <TextBlock Margin="5" FontSize="18" Text="{Binding Description}"/>

 11:                     </Border>

 12:                 </DataTemplate>

 13:             </TabControl.ContentTemplate>

 14:             <TabControl.ItemTemplate>

 15:                 <DataTemplate>

 16:                     <TextBlock FontSize="14"  Foreground="{Binding Color}" Text="{Binding Title}"/>

 17:                 </DataTemplate>

 18:             </TabControl.ItemTemplate>

 19:         </TabControl>

 20:     </Grid>

 21: </Window>

 22: 
And here is complete C# code of this program. 
  1: using System;

  2: using System.Collections.Generic;

  3: using System.Linq;

  4: using System.Text;

  5: using System.Windows;

  6: using System.Windows.Controls;

  7: using System.Windows.Data;

  8: using System.Windows.Documents;

  9: using System.Windows.Input;

 10: using System.Windows.Media;

 11: using System.Windows.Media.Imaging;

 12: using System.Windows.Navigation;

 13: using System.Windows.Shapes;

 14: 

 15: namespace TabControl

 16: {

 17:     /// <summary>

 18:     /// Interaction logic for Window1.xaml

 19:     /// </summary>

 20:     public partial class Window1 : Window

 21:     {

 22:         public Window1()

 23:         {

 24:             InitializeComponent();

 25:         }

 26: 

 27:         private void Window_Loaded(object sender, RoutedEventArgs e)

 28:         {

 29:             List<ItemsInfo> lst = new List<ItemsInfo>();

 30: 

 31:             lst.Add(new ItemsInfo("First", "First Description", "Brown"));

 32:             lst.Add(new ItemsInfo("Second", "Second Description", "Blue"));

 33:             lst.Add(new ItemsInfo("Third", "Third Description", "Red"));

 34:             lst.Add(new ItemsInfo("Fourth", "Fourth Description", "Green"));

 35: 

 36:             tabControl.ItemsSource = lst;

 37: 

 38:             tabControl.SelectedIndex = 0;

 39:         }

 40:     }

 41: 

 42:     public class ItemsInfo

 43:     {

 44:         public ItemsInfo(String title, String description, String color)

 45:         {

 46:             Title = title;

 47:             Description = description;

 48:             Color = color;

 49:         }

 50: 

 51:         public String Title

 52:         { get; set; }

 53: 

 54:         public String Description

 55:         { get; set; }

 56: 

 57:         public String Color

 58:         { get; set; }

 59:     }

 60: }

 61: 
Here is the output of this program when we run it.