Posted by: Zeeshan Amjad | February 12, 2010

ListBox inside the Combo Box


I came across one question that how can we place list box inside the combo box. With the flexibility of WPF it is in fact very easy task. The only thing we have to do it make property data structure and use property data template.

Our first step is to make a nest data structure. i.e list contains list. Because we are going to display one list to display combo box items and each item of combo box is itself a list. Here is our classes to to represented this data structure.

  1: public class CityInfo
  2: {
  3:     public CityInfo(String name, String description)
  4:     {
  5:         Name = name;
  6:         Description = description;
  7:     }
  8: 
  9:     public String Name
 10:     { get; set; }
 11: 
 12:     public String Description
 13:     { get; set; }
 14: }
 15: 
 16: public class StateInfo
 17: {
 18:     public StateInfo()
 19:     {
 20:         Cities = new List<CityInfo>();
 21:     }
 22: 
 23:     public void AddCity(CityInfo cityInfo)
 24:     {
 25:         Cities.Add(cityInfo);
 26:     }
 27: 
 28:     public List<CityInfo> Cities
 29:     { get; set; }
 30: }

It is important that we can add as many attributes as we want. Here for simplicity we just store the city name and city description.

Now our second step is to create appropriate data template. Here is complete XAML code to define list box inside the combo box using data template.

  1: <Window x:Class="WpfComboList.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="ListBox Inside ComboBox" Height="300" Width="300">
  5:     <Grid>
  6:         <ComboBox HorizontalContentAlignment="Stretch" Height="25" Name="cmb">
  7:             <ComboBox.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <ListBox HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=Cities}">
 10:                         <ListBox.ItemTemplate>
 11:                             <DataTemplate>
 12:                                 <Grid>
 13:                                     <Grid.ColumnDefinitions>
 14:                                         <ColumnDefinition/>
 15:                                         <ColumnDefinition/>
 16:                                     </Grid.ColumnDefinitions>
 17:                                     <TextBlock Grid.Column="0" Text="{Binding Name}"/>
 18:                                     <TextBlock Grid.Column="1" Text="{Binding Description}"/>
 19:                                 </Grid>
 20:                             </DataTemplate>
 21:                         </ListBox.ItemTemplate>                        
 22:                     </ListBox>
 23:                 </DataTemplate>
 24:             </ComboBox.ItemTemplate>
 25:         </ComboBox>
 26:     </Grid>
 27: </Window>
 28: 

Now we have to fill the values in our data structure and set that data structure to the items source property of combo box. Here is complete C# code of our 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 WpfComboList
 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:             List<StateInfo> list = new List<StateInfo>();
 27: 
 28:             StateInfo state1 = new StateInfo();
 29:             state1.AddCity(new CityInfo("Frederick", "Frederick City"));
 30:             state1.AddCity(new CityInfo("Baltimore", "Baltimore City"));
 31:             state1.AddCity(new CityInfo("Annapolis", "Annapolis City"));
 32:             list.Add(state1);
 33: 
 34:             StateInfo state2 = new StateInfo();
 35:             state2.AddCity(new CityInfo("Houston", "Houston City"));
 36:             state2.AddCity(new CityInfo("Dallas", "Dallas City"));
 37:             state2.AddCity(new CityInfo("San Antonio", "San Antonio City"));
 38:             state2.AddCity(new CityInfo("Austin", "Austin City"));
 39:             list.Add(state2);
 40: 
 41:             StateInfo state3 = new StateInfo();
 42:             state3.AddCity(new CityInfo("Los Angeles", "Los Angeles City"));
 43:             state3.AddCity(new CityInfo("Burbank", "Burbank City"));
 44:             list.Add(state3);
 45: 
 46:             cmb.ItemsSource = list;
 47:         }
 48:     }
 49: 
 50:     public class CityInfo
 51:     {
 52:         public CityInfo(String name, String description)
 53:         {
 54:             Name = name;
 55:             Description = description;
 56:         }
 57: 
 58:         public String Name
 59:         { get; set; }
 60: 
 61:         public String Description
 62:         { get; set; }
 63:     }
 64: 
 65:     public class StateInfo
 66:     {
 67:         public StateInfo()
 68:         {
 69:             Cities = new List<CityInfo>();
 70:         }
 71: 
 72:         public void AddCity(CityInfo cityInfo)
 73:         {
 74:             Cities.Add(cityInfo);
 75:         }
 76: 
 77:         public List<CityInfo> Cities
 78:         { get; set; }
 79:     }
 80: }
 81: 

Here is the output of the program.

ListBoxInsideComboBoxOutput

Advertisements

Responses

  1. Good article! But what about multiselection? How it can be done?

    • Thanks to like it. I guess everything should be same and you have to select the “SelectionMode” property equal to “Multiple” for this.


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: