Posted by: Zeeshan Amjad | February 28, 2010

Display list box in Tab item.


I already made a small program to display the combo box in tab item here. Now we are going to display list box rather than combo box. I don’t know what might be the practice purpose of this, but i came across this question once. This program is very similar to the combo box version. The only different is here we are going to use List Box instead of Combo box in the data template of tab item.

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

We still need the nested data structure just like the combo box version of the program. Here is our class to store the nested 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: 

Here not that Title property of this class is a list of string. We are going to use this list to populate the list box. Also remember that the item of the list box is not necessary be the same for all list boxes. 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:                     <ListBox 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 the program.

 

ListBoxTabItemOutput

Advertisements

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: