Can I create a navigation control like this example in WPF using a TreeView?

Question

I want to create a WPF control similar to the example below. Check out the link and look at the navigation control on the left.

Can this be done in a treeview? If so, any idea how I would start?

If not a treeview, then how could I achieve the same thing?

Navigation example

The parent node has a different style to the child node and in some cases a parent will have child nodes and some won't. I'm not sure how to style a control that will give me the same look. Any advice would be greatly appreciated.

Thanks,

Answer 1

Since you can style different nodes of a treeview as you like, the answer is yes, you can. You have to bind a treeview to an IEnumerable<A>, where every object of type A will have an IEnumerable<B> (which can be empty).

You can then apply one style to every element of type A, and another style to every element of type B. In XAML, in TreeView.Resources, put two HierarchicalDataTemplates with DataType attributes. For example, if you have an IEnumerable of Categories, and each Category has a property Items which is an IEnumerable of Items, you may write:

<TreeView.Resources>
    <HierarchicalDataTemplate DataType="{x:Type core:Category}">
    <!--Content here-->
        <HierarchicalDataTemplate.ItemsSource>
            <Binding Path="ContextAssociations"/>
        </HierarchicalDataTemplate.ItemsSource>
    </HierarchicalDataTemplate>
    <HierarchicalDataTemplate DataType="{x:Type core:Item}">
        <!--Content here-->
    </HierarchicalDataTemplate>
</TreeView.Resources>