Posted by: Zeeshan Amjad | May 15, 2013

ListBox in ComboBox


I came across a request to insert listbox inside 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 ObservableCollection of ObservableCollection and then set the ItemsSource property accordingly.

The second part of the question is little tricky. The second part of the question is to display the selected item of inner listbox in the combobox. We already solved similar problem where we have different presentation in combo box and selected item by using ItemContinerStyle property here. In that example we display multiple column in combo box but display only one data when we select the data. Now we are going to use the same technique here.

But here the problem is how can we get the selected item of listbox so we can display it in combo box.

Here we create an additional property in the class to store the selected item of the list box.

Code Snippet
public class State
{
    public string SelectedCity
    { get; set; }

    public ObservableCollection<string> Cities
    { get; set; }
}

 

We can get the selected item value by using SelectedItem property of listbox using data binding.

Code Snippet
<ListBox HorizontalContentAlignment="Stretch"
         SelectedItem="{Binding Path=SelectedCity}"
         ItemsSource="{Binding Cities}"/>

 

Rest is quite easy, we just display the selected city in the combo box.

Here is a complete C# code of the program.

Code Snippet
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfComboList
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<State> States = new ObservableCollection<State>();

        public MainWindow()
        {
            InitializeComponent();

            ObservableCollection<string> maryland = new ObservableCollection<string>();

            maryland.Add("Frederick");
            maryland.Add("German Town");
            maryland.Add("Baltimore");
            maryland.Add("Annapolis");

            ObservableCollection<string> texas = new ObservableCollection<string>();

            texas.Add("Houston");
            texas.Add("Dallas");
            texas.Add("San Antonio");

            ObservableCollection<string> california = new ObservableCollection<string>();

            california.Add("Los Angeles");
            california.Add("Fremont");

            States.Add(new State() { Cities = maryland });
            States.Add(new State() { Cities = texas });
            States.Add(new State() { Cities = california });

            DataContext = States;
        }
    }
    
    public class State
    {
        public string SelectedCity
        { get; set; }

        public ObservableCollection<string> Cities
        { get; set; }
    }
}

 

And here is Complete XAML code of the program.

Code Snippet
<Window x:Class="WpfComboList.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="List In Combo" Height="350" Width="525">
    <Grid>
        <ComboBox HorizontalContentAlignment="Stretch" Height="35" Margin="5" ItemsSource="{Binding}">
            <ComboBox.ItemContainerStyle>
                <Style TargetType="{x:Type ComboBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border Margin="1" BorderBrush="Brown">
                                    <ListBox HorizontalContentAlignment="Stretch"
                                             SelectedItem="{Binding Path=SelectedCity}"
                                             ItemsSource="{Binding Cities}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ComboBox.ItemContainerStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock VerticalAlignment="Center" Text="{Binding Path=SelectedCity}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

Here is an output of the program when we open the Combo box.

ListInCombo_1

And here is an output when we select something from the listbox.

ListInCombo_2

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: