Posted by: Zeeshan Amjad | October 5, 2009

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.

TabControl_01

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.

TabControl_02

Advertisements

Responses

  1. […] binding with tab control. We have already seen one example of doing data binding with tab control here. We are going to use the same technique here, but this time for tooltip. Here is our data […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: