Posted by: Zeeshan Amjad | January 9, 2011

Combo box inside List box


We already saw couple 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 box. By definition, it is very much it is very much similar to adding combo box inside the list view.

First we define the data structure to store the data. Here is our class to store information.

Code Snippet
  1. public class States
  2. {
  3.     public States()
  4.     {
  5.     }
  6.  
  7.     public States(String name, ObservableCollection<string> colors)
  8.     {
  9.         Name = name;
  10.         Colors = colors;
  11.     }
  12.  
  13.     public String Name
  14.     { get; set; }
  15.  
  16.     public ObservableCollection<String> Colors
  17.     { get; set; }
  18. }

 

Then we define the combo box inside the list box item template. We display combo box inside each list box item to display all the colors. And when user select any color from the combo box then it will change the background color of the text to the selected color. We are using Stack Panel to display the text block and the combo box inside one list box item. Here is a piece of code for this.

Code Snippet
  1. <StackPanel>
  2.     <TextBlock Margin="2" Text="{Binding Name}"
  3.                Background="{Binding ElementName=cmbColors, Path=SelectedItem}"/>
  4.     <ComboBox Margin="2" Name="cmbColors" ItemsSource="{Binding Colors}"
  5.               HorizontalContentAlignment="Stretch">
  6.         <ComboBox.ItemTemplate>
  7.             <DataTemplate>
  8.                 <Grid>
  9.                     <Grid.ColumnDefinitions>
  10.                         <ColumnDefinition/>
  11.                         <ColumnDefinition Width="2*"/>
  12.                     </Grid.ColumnDefinitions>
  13.                     <Rectangle Grid.Column="0" Margin="2, 1" Fill="{Binding}"/>
  14.                     <TextBlock Grid.Column="1" Margin="2, 1" Text="{Binding}"/>
  15.                                                         </Grid>
  16.             </DataTemplate>
  17.         </ComboBox.ItemTemplate>
  18.     </ComboBox>
  19. </StackPanel>

 

Here is complete C# code of the project.

Code Snippet
  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. using System.Windows.Media.Media3D;
  15. using System.Collections.ObjectModel;
  16. using System.Drawing;
  17.  
  18. namespace WpfCombo
  19. {
  20.     /// <summary>
  21.     /// Interaction logic for MainWindow.xaml
  22.     /// </summary>
  23.     public partial class MainWindow : Window
  24.     {
  25.         public MainWindow()
  26.         {
  27.             InitializeComponent();
  28.  
  29.             ObservableCollection<string> colors = new ObservableCollection<string>();
  30.  
  31.             String[] allColors = Enum.GetNames(typeof(KnownColor));
  32.  
  33.             foreach (String color in allColors)
  34.             {
  35.                 colors.Add(color);
  36.             }
  37.  
  38.             ObservableCollection<States> states = new ObservableCollection<States>();
  39.  
  40.             states.Add(new States("California", colors));
  41.             states.Add(new States("Maryland", colors));
  42.             states.Add(new States("Washington", colors));
  43.             states.Add(new States("New York", colors));
  44.             states.Add(new States("Taxes", colors));
  45.  
  46.             list.ItemsSource = states;
  47.         }
  48.     }
  49.  
  50.         public class States
  51.         {
  52.             public States()
  53.             {
  54.             }
  55.  
  56.             public States(String name, ObservableCollection<string> colors)
  57.             {
  58.                 Name = name;
  59.                 Colors = colors;
  60.             }
  61.  
  62.             public String Name
  63.             { get; set; }
  64.  
  65.             public ObservableCollection<String> Colors
  66.             { get; set; }
  67.         }
  68. }

 

Here is complete XAML code of the project.

Code Snippet
  1. <Window x:Class="WpfCombo.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  4.         Title="Combo inside Listbox" Height="400" Width="400">
  5.     <Grid>
  6.         <ListBox Name="list" Margin="5" HorizontalContentAlignment="Stretch">
  7.             <ListBox.ItemTemplate>
  8.                 <DataTemplate>
  9.                     <Border Margin="3" CornerRadius="5" BorderBrush="Brown" BorderThickness="2">
  10.                         <StackPanel>
  11.                             <TextBlock Margin="2" Text="{Binding Name}"
  12.                                        Background="{Binding ElementName=cmbColors, Path=SelectedItem}"/>
  13.                             <ComboBox Margin="2" Name="cmbColors" ItemsSource="{Binding Colors}"
  14.                                       HorizontalContentAlignment="Stretch">
  15.                                 <ComboBox.ItemTemplate>
  16.                                     <DataTemplate>
  17.                                         <Grid>
  18.                                             <Grid.ColumnDefinitions>
  19.                                                 <ColumnDefinition/>
  20.                                                 <ColumnDefinition Width="2*"/>
  21.                                             </Grid.ColumnDefinitions>
  22.                                             <Rectangle Grid.Column="0" Margin="2, 1" Fill="{Binding}"/>
  23.                                             <TextBlock Grid.Column="1" Margin="2, 1" Text="{Binding}"/>
  24.                                                                                 </Grid>
  25.                                     </DataTemplate>
  26.                                 </ComboBox.ItemTemplate>
  27.                             </ComboBox>
  28.                         </StackPanel>
  29.                     </Border>
  30.                 </DataTemplate>
  31.             </ListBox.ItemTemplate>
  32.         </ListBox>
  33.     </Grid>
  34. </Window>

 

Here is the output of the program.

 

ComboInsideListBox

Advertisements

Responses

  1. […] and create very powerful user interface with it. Here we create one combo box inside the list box here. In that example we change the background color of the text when we change the color selection from […]

  2. Excellent! You’re posts are extremely helpful to me!

    • Thanks to like it. I am glad that these are helpful to you.

  3. […] the combobox. This particular task is quite simple and we already saw an example reverse of it here where we display combobox inside the listbox. The basic idea is same that is created an […]


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: