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.

 

About these ads