Windows Phone use of HierarchicalDataTemplate for recursion?

Question

I see that the Windows Phone Toolkit has an element called a HierarchicalDataTemplate. That's good for me, since I want to build a tree structure.

I've seen that the HierarchicalDataTemplate is included in WPF as well. This made me use this article here: TreeView, HierarchicalDataTemplate and recursive Data

It states that you should set the TargetType on the data template. But the HierarchicalDataTemplate in the Windows Phone Toolkit doesn't have that property.

Moreover, I am wondering what the HierarchicalDataTemplate is even for, since there seems to be no TreeView control as well.

If you wont TreeView for Windows Phone you can see it [there](https://treeviewwp8.codeplex.com/) — R.Titov, Feb 26 '14 at 19:48

score 6 · Accepted Answer · answered Nov 09 '13 at 16:55

Interesting question, I've just checked and indeed, there is no HierarchicalDataTemplate in native WP8, but it is in WPToolkit. After checking the source code it's used only in HeaderedItemsControl, that is parent of ExpanderView and MenuItem.
Interesingly, the properties ItemsSource, ItemTemplate and ItemContainerStyle in HierarchicalDataTemplate are not even DependencyProperties and they are not even assigned in any WPToolkit samples. I'm not sure this HierarchicalDataTemplate is actually usable for creating recursive data structures.

But never mind, it's completely possible to build your own recursive data structure using just the native WP8 classes:

Let's have simple recursive class Node and MainViewModel with collection of nodes:

public class Node
{
    public string Title { get; set; }
    public ObservableCollection<Node> Children { get; set; }
}

public class MainViewModel
{
    public ObservableCollection<Node> Nodes { get; set; }

    public MainViewModel()
    {
        Nodes = ... // load the structure here
    }
}

Let's create our UserControl for displaying nodes recursively and some code for the MainPage.

<UserControl x:Class="WP8.HierarchicalDataTemplate.NodeUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:h="clr-namespace:WP8.HierarchicalDataTemplate">

    <Border BorderThickness="1" BorderBrush="Red">
        <StackPanel d:DataContext="{d:DesignInstance h:Node}" Margin="15">
            <TextBlock Text="{Binding Title}" />
            <ItemsControl ItemsSource="{Binding Children}"
                ItemTemplate="{StaticResource NodeNestedTemplate}" />
        </StackPanel>
    </Border>
</UserControl>

<!-- on MainPage as root object -->
<Grid>
    <ItemsControl Margin="20"
        ItemsSource="{Binding Nodes, Source={StaticResource model}}"
        ItemTemplate="{StaticResource NodeNestedTemplate}" />
</Grid>

Note we have used both in NodeUserControl and on MainPage DataTemplate named NodeNestedTemplate. We cannot define recursive DataTemplate just like that, but we can create UserControl that is using this DataTemplate and also placed inside this DataTemplate - this is in global resources in App.xaml:

...
xmlns:h="clr-namespace:WP8.HierarchicalDataTemplate">

<Application.Resources>
    <h:MainViewModel x:Key="model"/>
    <DataTemplate x:Key="NodeNestedTemplate">
        <h:NodeUserControl />
    </DataTemplate>
</Application.Resources>
...

And that's all! Here is a small screenshot of the solution when using data source with 3 levels of recursion: https://i.stack.imgur.com/zqOYe.png

Hope it helps you implementing the Tree structure!

Can you share a code snippet with few more explanation. Or if any sample project with Dummy data — Sebastian, Jan 09 '14 at 09:34
Dear Martin, Your solution seems very interesting and helpful, before this i was feeling it will be a wild goose chase for me implement the recursion. Please post bit more code by which i will be able to implement in my app. Thank you :) — Ashish-BeJovial, May 29 '14 at 09:41

Windows Phone use of HierarchicalDataTemplate for recursion?

1 Answers1