Posted by: Zeeshan Amjad | May 25, 2010

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.

TreeInsideCombo

Advertisements

Responses

  1. Awesome, thanks man!

    • Thanks to like it.

  2. ciao
    come faccio ad estrapolare tutti i valori dal TreeView ?

    • Mi dispiace se non capisco la tua domanda. I valori sono già memorizzati nel ObservableCollection.

  3. When it’s finished, is there any way for it to display the city selection instead of the state?

  4. Hi Zeeshan, With this example I am able to select element at higher hierarchy. but I wanted to show any of element in hirarchyof treeview into combobox. how can I achive 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: