Display Tree view inside Combo box

I came across a question how to display tree view inside the combo box. We already saw how to display list view in combo box here. This problem is very much similar to display list view, the only difference is here we are going to display the hierarchical data. Lets first define the hierarchical data for our example. Here are two classes to store hierarchical data.

 

public class Counties

{

    public Counties()

    {

        Cities = new List<string>();

    }


    public String Name

    { get; set; }


    public List<String> Cities

    { get; set; }

}


public class State

{

    public State()

    {

        Counties = new List<Counties>();

    }


    public String Name

    { get; set; }


    public List<Counties> Counties

    { get; set; }

}


Then we are going to insert data in this data structure and define data template for combo box. In data template we display tree view to display the hierarchical data. Here is a piece of XAML code to do this. 
<TreeView Margin="5" ItemsSource="{Binding Counties}">

	<TreeView.ItemTemplate>

		<HierarchicalDataTemplate ItemsSource="{Binding Cities}">

			<TextBlock Text="{Binding Name}"/>

			<HierarchicalDataTemplate.ItemTemplate>

				<DataTemplate>

					<TextBlock Text="{Binding}"/>

				</DataTemplate>

			</HierarchicalDataTemplate.ItemTemplate>

		</HierarchicalDataTemplate>

	</TreeView.ItemTemplate>

</TreeView>


We dare going to display tree view along with text block to display the name of the state and to do this we use Stack Panel. Here is complete XAML code of the program. 
<Window x:Class="WpfComboTree.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Tree Inside Combo" Height="300" Width="300">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition Height="3*"/>

        </Grid.RowDefinitions>

        <ComboBox HorizontalContentAlignment="Stretch" Height="25" ItemsSource="{Binding}" >

            <ComboBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel>

                        <TextBlock Margin="3" Foreground="Blue" FontWeight="Bold" Text="{Binding Name}"/>

                        <TreeView Margin="5" ItemsSource="{Binding Counties}">

                            <TreeView.ItemTemplate>

                                <HierarchicalDataTemplate ItemsSource="{Binding Cities}">

                                    <TextBlock Text="{Binding Name}"/>

                                    <HierarchicalDataTemplate.ItemTemplate>

                                        <DataTemplate>

                                            <TextBlock Text="{Binding}"/>

                                        </DataTemplate>

                                    </HierarchicalDataTemplate.ItemTemplate>

                                </HierarchicalDataTemplate>

                            </TreeView.ItemTemplate>

                        </TreeView>

                    </StackPanel>

                </DataTemplate>

            </ComboBox.ItemTemplate>

        </ComboBox>

    </Grid>

</Window>


And here is complete C# code of the program. 
using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;


namespace WpfComboTree

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        private ObservableCollection<State> states = new ObservableCollection<State>();


        public Window1()

        {

            InitializeComponent();


            State state1 = new State();

            state1.Name = "Maryland";


            Counties county1 = new Counties();

            county1.Name = "Frederick";

            county1.Cities.Add("Frederick");

            county1.Cities.Add("Middletown");

            county1.Cities.Add("New Market");


            Counties county2 = new Counties();

            county2.Name = "Montgomary";

            county2.Cities.Add("Rockville");

            county2.Cities.Add("Germantown");


            state1.Counties.Add(county1);

            state1.Counties.Add(county2);


            State state2 = new State();

            state2.Name = "Virginia";


            Counties county3 = new Counties();

            county3.Name = "Loudon";

            county3.Cities.Add("Hamilton");

            county3.Cities.Add("Hillsboro");

            county3.Cities.Add("Leesburg");

            county3.Cities.Add("Middleburg");


            state2.Counties.Add(county3);


            states.Add(state1);

            states.Add(state2);


            DataContext = states;

        }

    }


    public class Counties

    {

        public Counties()

        {

            Cities = new List<string>();

        }


        public String Name

        { get; set; }


        public List<String> Cities

        { get; set; }

    }


    public class State

    {

        public State()

        {

            Counties = new List<Counties>();

        }


        public String Name

        { get; set; }


        public List<Counties> Counties

        { get; set; }

    }

}


This is the output of the program.