WinRT hierarchical data displaying

Question

I need to display hierarchical data like:

public class Element
{
    public string Name { get; private set; }
    public Element[] Elements { get; private set; }
}

It would be just vertical panel with rectangle (with Name ) for each element. If element is clicked, its child elements are displayed below it (element is expanded). If one of them is clicked, its elements appear and so on.

I already googled this and found out that there is no HierarchicalDataTemplate and no treeview in WinRT.
So I started to do it by myself.
I created ItemsControl and DataTemplate DataTemplate1 for it. In DataTemplate1 I also create ItemsControl and set DataTemplate2 as ItemTemplate . In DataTemplate2 , ItemTemplate is DataTemplate3 and so on. The last DataTemplate is without ItemsControl .

In buttons Click event I change Elements IsVisible property for any elements in DataModel (that is Element[] ), so it is easy to perform any custom logic to expand/collapse elements.

<DataTemplate x:Key="DataTemplate2">
    <StackPanel Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Button  Style="{StaticResource ItemButtonStyle}"
                 Click="MenuElement_Click">
            <TextBlock Style="{StaticResource ItemTextBlockStyle}" Text="{Binding Name}"/>
        </Button>
        <ItemsControl ItemsSource="{Binding Elements}" ItemTemplate="{StaticResource DataTemplate3}"/>
    </StackPanel>
</DataTemplate>

<DataTemplate x:Key="DataTemplate1">
    <StackPanel Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Button  Style="{StaticResource ItemButtonStyle}"
                 Click="MenuElement_Click">
            <TextBlock Style="{StaticResource ItemTextBlockStyle}" Text="{Binding Name}"/>
        </Button>
        <ItemsControl ItemsSource="{Binding Elements}" ItemTemplate="{StaticResource DataTemplate2}"/>
    </StackPanel>
</DataTemplate>

It works fine, but the problem is that if I want to enable 10 levels of hierarchy, I have to copypast 10 datatemplates. And 11 level still will not be available.

I also tried to create DataTemplate in C# and manually apply DataTemplate for its ItemSource and so on, in recursive method.
But I found 2 problems.

1. I don't know actually how to create DataTemplate in metro (C#), because it has no VisualTree property. I can only make ( var dt= new Datatemplate(); ) and I don't know how to change it.

2. If I read DataTemplate from XAML ( var dateTemplateRoot = (DataTemplate)this.Resources["DataTemplate1"]; )

I still can't find ItemsControl in it and change its DataTemplate .
Actually, I can use var content = dateTemplateRoot.LoadContent(); and then find ItemsControl by VisualTreeHelper , but I can't use content after that as DataTemplate (content has type DependencyObject ).

So, actually I have 2 questions.
Is it a good approach to perform hierarchical dropdown list by "binding" all items and only switch Visibility property?
The second is - how to enable unlimited level of hierarchical nesting?

Answer 1

WinRT XAML Toolkit has a TreeView control now. Check it out: http://winrtxamltoolkit.codeplex.com/SourceControl/changeset/view/b0ee76bd6492#WinRTXamlToolkit/Controls/TreeView/TreeView.cs

Take care though - this is just a rough port from Silverlight Toolkit and might not work so well. Also if you are planning on releasing it as part of a Windows Store application - you would need to heavily restyle it unless your app is desktop-only since it is not very touch-friendly.