How do I setup a WPF TreeView with the data bound items containing 2 lists of 2 different types?

Question

I'm trying to create a WPF treeview control (in C#, but that's not that important) that displays a hierarchical list of items. In addition to that, each item in the tree has a list of "other items" of a different type that I'd also like displayed (as below).

+ Item1
    - OtherItem1
    - OtherItem2
    + Item2
        - OtherItem3
        - OtherItem4
        + Item3
    + Item4

  etc...

I'd like the whole thing to be databound and support drag and drop. I have the basic list involving only "Item" setup but I'm having a little trouble figuring out how to support the second list. If someone can even just point me in the direction of the type of ItemSource thingy I should be using that would help a lot.

Do I need a MultiBinding or something? Here's what's I'm trying at the moment (but it's not working out).

<TreeView ItemsSource="{Binding Bones}">
    <TreeView.ItemContainerStyle>
        <!-- 
        This Style binds a TreeViewItem to a BoneTreeViewModel. 
        -->
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type src:Skeleton.BoneTreeViewModel}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding>
                    <Binding Path="Name" />
                    <Binding Path="Components" />
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Where Name is just a string representing the name of Item and Components is the (flat, non hierarchical) ReadOnlyCollection of OtherItem.

Thanks for reading!

Answer 1

here's the xaml i use for treeviews

    <TreeView ItemsSource="{Binding Items}" >
        <i:Interaction.Behaviors>
            <Behaviors:TreeViewSelectedItemBehavior SelectedItem="{Binding SelectedItem,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
        </i:Interaction.Behaviors>
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                <Setter Property="FontWeight" Value="Normal" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>

        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Description}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

and a simplified VM which you can use as the base class for your 2 types of VMs

public class TreeNodeViewModel
{
    public TreeNodeViewModel()
    {
        Children = new ObservableCollection<TreeNodeViewModel>();
    }

    public bool IsExpanded { get; set; }
    public bool IsSelected { get; set; }
    public string Description { get; set; }


    public ObservableCollection<TreeNodeViewModel> Children { get; set; }
}

and link to drag and drop answer