How to create a TreeView with child nodes of different UI Controls

Question

In my program I have a treeView for which I want to allow child nodes that are comboBoxes and textBlocks. My treeView along with it's nodes are created in an MVVM style. I know how to create textBlock child nodes, but have never created child nodes of any other UI tool.

My treeview's xaml:

TreeView ItemsSource="{Binding UserControl_DataModel.TreeViewViewModel.ObservableCollection<TreeViewDataModel>}" DisplayMemberPath="DisplayName.Value".../>

This is where new nodes are created and added to the TreeView (TreeViewViewModel):

private TreeViewDataModel createNewNode(string nodeName)
{
    var newNode = new TreeViewDataModel ()
    {
        DisplayName = nodeName
    };

    newNode.Children.Add(new TreeViewDataModel () { DisplayName = nodeName});

    return newNode;
}

public void addNewLocNode(string nodeName)
{
    TreeObservableCollection.Add(createNewNode(nodeName));
}

How do I create child nodes that are ComboBoxes, while still allowing the textblock children? This confuses me, because I don't see any part of the code that specifies what UI tool the children become. Please let me know if you need to see more code.

(Previous question about this same treeView if you need to reference it.)

Update:

Just for clarity, this is how my treeView nodes should look:

enter image description here

When I try something like this:

<HierarchicalDataTemplate DataType="{x:Type Data:Node}" ItemsSource="{Binding Teams}">
    <StackPanel>
        <TextBlock Text="{Binding IndividualProperty}" />
        <ComboBox ItemsSource="{Binding CollectionProperty}" />
    </StackPanel>
</HierarchicalDataTemplate>

I instead get this setup (it's like each item of the tree comes with a TextBlock and a ComboBox. Maybe there is another option besides StackPanel?):

enter image description here

Note that the comboBox is not a child of the textBlock node, but it's more like it's on the same level as the textBlock node.

score 0 · Accepted Answer · answered Jul 14 '14 at 15:13

0

A ComboBox is a collection control. Therefore, you need a collection property in your 'node' object to bind to the ComboBox.ItemsSource. While an individual property in the 'node' object might need a HierarchicalDataTemplate somewhat like this:

<HierarchicalDataTemplate DataType="{x:Type Data:Node}" ItemsSource="{Binding Teams}">
    <TextBlock Text="{Binding IndividualProperty}" />
</HierarchicalDataTemplate>

You would need one more like this:

<HierarchicalDataTemplate DataType="{x:Type Data:Node}" ItemsSource="{Binding Teams}">
    <ComboBox ItemsSource="{Binding CollectionProperty}" />
</HierarchicalDataTemplate>

Or perhaps like this:

<HierarchicalDataTemplate DataType="{x:Type Data:Node}" ItemsSource="{Binding Teams}">
    <StackPanel>
        <TextBlock Text="{Binding IndividualProperty}" />
        <ComboBox ItemsSource="{Binding CollectionProperty}" />
    </StackPanel>
</HierarchicalDataTemplate>

answered Jul 14 '14 at 15:13

Sheridan

68,826
24
143
183

Thank you very much. This seems to be leading me in the right direction. However, I do have some questions (I'm using the last example btw, because each `ComboBox` has to have a title `textBlock` above it). It seems that the `textBlock` doesn't get displayed at all, even though I am setting it like I was before. Why is this? – Eric after dark Jul 14 '14 at 15:38
How could I know that? – Sheridan Jul 14 '14 at 15:40
Because I'm guessing that it has to do with the `HierarchicalDataTemplate`, since the `TextBlock` children were being displayed before I changed it. – Eric after dark Jul 14 '14 at 15:42
Sorry, but a 'HierarchicalDataTemplate' is not much more than a `DataTemplate` with an `ItemsSource` property. Using one doesn't affect data binding syntax or paths. You must have some other problem. – Sheridan Jul 14 '14 at 20:04
Sorry for the confusion. I believe the problem to be with the `StackPanel` part of this example. `StackPanel` doesn't exactly edit the child nodes, instead it kind if "adds" to the current node, like I wrote in my update above. Is there another option I could use besides `StackPanel`? – Eric after dark Jul 14 '14 at 20:08
A `Grid`, or any other layout `Panel`? Although that won't make any difference to the data binding either. This question has been answered and you are now talking about a different data binding problem, so I suggest that you mock up a small, but complete code example that exhibits this behaviour and add a new question, perhaps linking to this one for background. – Sheridan Jul 14 '14 at 20:11
I guess I have "technically" added a `ComboBox` and a `Textblock` to this `TreeView`. Therefore, the question has been answered. I'll write another question up then, because I would like it to behave a little bit differently. – Eric after dark Jul 14 '14 at 20:14

How to create a TreeView with child nodes of different UI Controls

1 Answers1

Linked