Posted by: Zeeshan Amjad | February 25, 2010

Display Combo box in Tab item


I got a question to display the list box in tab control. Here i am going to make a similar program, but instead of displaying list box, display the combo box. The reason to select combo box is to make the height of tab item reasonable. If we use the list box then the height of tab item is depends on the items in list box.

The most important thing about this program is data structure. We need nested data structure. Because for every tab item we are going to display more than one item. Here we are using string for the simplicity. Here is a class to store our data.

  1: public class ItemsInfo
  2: {
  3:     public ItemsInfo(List<String> title, String description, String color)
  4:     {
  5:         Title = title;
  6:         Description = description;
  7:         Color = color;
  8:     }
  9: 
 10:     public List<String> Title
 11:     { get; set; }
 12: 
 13:     public String Description
 14:     { get; set; }
 15: 
 16:     public String Color
 17:     { get; set; }
 18: }
 19: 

For displaying the combo at tab item we simply define data template for it and use combo box there. Here is a piece of XAML code to demonstrate this.

  1: <TabControl.ItemTemplate>
  2: 	<DataTemplate>
  3: 		<ComboBox SelectedIndex="0" Margin="10" HorizontalContentAlignment="Stretch" 
  4: 				  Foreground="{Binding Color}" ItemsSource="{Binding Title}"/>
  5: 	</DataTemplate>
  6: </TabControl.ItemTemplate>
  7: 

Now let’s take a look at complete program. Here is complete XAML code of the program.

  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="400" Width="600" Loaded="Window_Loaded">
  5:     <Grid>
  6:         <TabControl Margin="5" Name="tabControl">
  7:             <TabControl.ContentTemplate>
  8:                 <DataTemplate>
  9:                     <Border BorderBrush="{Binding Color}" BorderThickness="5" CornerRadius="5">
 10:                         <TextBlock Margin="5" FontSize="18" Text="{Binding Description}"/>
 11:                     </Border>
 12:                 </DataTemplate>
 13:             </TabControl.ContentTemplate>
 14:             <TabControl.ItemTemplate>
 15:                 <DataTemplate>
 16:                     <ComboBox SelectedIndex="0" Margin="10" HorizontalContentAlignment="Stretch" 
 17:                               Foreground="{Binding Color}" ItemsSource="{Binding Title}"/>
 18:                 </DataTemplate>
 19:             </TabControl.ItemTemplate>
 20:         </TabControl>
 21:     </Grid>
 22: </Window>
 23: 

 

And here is complete C# code of the 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:             List<String> list1 = new List<string>();
 32:             list1.Add("Frederick");
 33:             list1.Add("Baltimore");
 34:             list1.Add("Annapolis");
 35: 
 36:             List<String> list2 = new List<string>();
 37:             list2.Add("Boston");
 38:             list2.Add("Springfield");
 39: 
 40:             List<String> list3 = new List<string>();
 41:             list3.Add("Los Angeles");
 42:             list3.Add("San Francisco");
 43:             list3.Add("San Diego");
 44:             list3.Add("Sacramento");
 45: 
 46:             List<String> list4 = new List<string>();
 47:             list4.Add("Houston");
 48:             list4.Add("Dallas");
 49:             list4.Add("Austin");
 50: 
 51:             lst.Add(new ItemsInfo(list1, "First Description", "Brown"));
 52:             lst.Add(new ItemsInfo(list2, "Second Description", "Blue"));
 53:             lst.Add(new ItemsInfo(list3, "Third Description", "Red"));
 54:             lst.Add(new ItemsInfo(list4, "Fourth Description", "Green"));
 55: 
 56:             tabControl.ItemsSource = lst;
 57: 
 58:             tabControl.SelectedIndex = 0;
 59:         }
 60:     }
 61: 
 62:     public class ItemsInfo
 63:     {
 64:         public ItemsInfo(List<String> title, String description, String color)
 65:         {
 66:             Title = title;
 67:             Description = description;
 68:             Color = color;
 69:         }
 70: 
 71:         public List<String> Title
 72:         { get; set; }
 73: 
 74:         public String Description
 75:         { get; set; }
 76: 
 77:         public String Color
 78:         { get; set; }
 79:     }
 80: }
 81: 

 

This is the output of this program.

 

ComboBoxTabItemOutput

Advertisements

Responses

  1. To start, allow me to point out that your internet site is fantastic. I love the theme that you have. It was very easy on the eyes. Appreciate your article too. Definitely subscribed to your feed to make sure I won’t be missing out on any updates. Excellent job! Toast to a productive business

    • Thanks to like my blog.

  2. […] Display Combo box in Tab item « Zeeshan Amjad's WPF Blog […]

  3. […] of examples of combo box. Here we saw combo box inside tree view, here inside list view,  here inside tab control and here inside toolbar. Now we are going to insert combo box inside the list […]


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: