WPF: TreeView inside a ComboBox

Question

I'm trying to put a TreeView inside a ComboBox in WPF so that when the combo box is dropped, instead of a flat list the user gets a hierarchical list and whatever node they select becomes the selected value of the ComboBox.

I've searched quite a bit for how to accomplish this but the best I could find was only peices of potential soltuions that, because I'm ridiculously new to WPF, I couldn't make work.

I have enough knowledge of WPF and databinding that I can get my data into the treeview and I can even get the treeview inside of the combo box, however what I've been able to accomplish doesn't behave properly at all. I've attached a screenshot to show what I mean. In the screenshot the combo box is "open", so the treeview on the bottom is where I can select a node and the treeview "on top" is being drawn on top of the combobox where I want the text/value of the selected node in the tree to be displayed.

Basically what I don't know how to do is how do I get the treeview's currrently selected node to return its value back up to the combobox which then uses it as its selected value?

Here is the xaml code I'm currently using:

     <ComboBox Grid.Row="0" Grid.Column="1"  VerticalAlignment="Top">
  <ComboBoxItem>
   <TreeView ItemsSource="{Binding Children}" x:Name="TheTree">
    <TreeView.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type Core:LookupGroupItem}" ItemsSource="{Binding Children}">
                        <TextBlock Text="{Binding Path=Display}"/>                            
                    </HierarchicalDataTemplate>
    </TreeView.Resources>
   </TreeView>
  </ComboBoxItem>
 </ComboBox>

Screenshot URL because I can't get it to inline in the post: http://www.fixedvancouver.com/pics/TreeInComboBox1.JPG

Answer 1

You might be able to use an event handler on the tree view to set the SelectedItem on the comboBox.

In order to do this you would need to set the Tag porperty of the tree view like so:

<TreeView Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"  MouseDoubleClick="treeview_MouseDoubleClick" ItemsSource="{Binding Children}" x:Name="TheTree">

Now in the DoubleClick event you can get at the ComboBox:

    private void treeview_MouseDoubleClick(object sender, RoutedEventArgs e)
    {
        try
        {
            TreeView tv = sender as TreeView;
            if(tv == null)
                return;
            var cB = tv.Tag as ComboBox;
            cB.SelectedItem = tv.SelectedItem;
        }
        catch (Exception e)
        {

        }
    }

You will also need to override the way the comboBox Item is selecte, otherwise the whole TreeView will be selected as soon as you click on it.

Answer 2

Use the Popup control,you'll solve this problem quickly.

Answer 3

This question is actually closely related to that one

So you would probably find this implementation helpful. This is a combobox with checkboxes inside, but you can get the idea on how to decouple the text in the box from the popup content with your tree.

It also demonstrates the idea that the IsSelected property should be on your model entities and then it is bound back to the checkbox Text property through the model. In other words, what you show in the combobox collapsed might be completely unrelated to the content... Well, maybe not completely, but in my app when a user selects several checkboxes in that combo I can show comma-separated in the top textbox, or I can show "Several options selected", or whatever.

HTH =)

Answer 4

link textHave a look at this article... It shows how to create a ComboBox with a TreeView inside

Answer 5

@rudigrobler: The idea is good, but the solution has one downside. If you open the drop down and then move the window, the tree view stays on the screen where you opened it.

I am still thinking about how one could improve that. Maybe when loosing the focus the tree view could be closed or something. If one finds a solution, maybe he could post it here.