TreeView in Windows Phone 8.1

08 Jan

There is currently no TreeView control in Windows Phone 8.1 but you can construct a TreeView very easy. Just create a Tree class and a DataTemplate as follows:

public class Tree<T> : INotifyPropertyChanged
    private bool _isExpanded;

    public Tree()
        Children = new List<Tree<T>>();

    public T Item { get; set; }
    public List<Tree<T>> Children { get; set; }

    public bool IsExpanded
        get { return _isExpanded; }
            _isExpanded = value;

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));

public sealed class BooleanToVisibilityConverter : IValueConverter
    public object Convert(object value, 
                          Type targetType, 
                          object parameter,
                          string language)
        return ((bool)(bool?)value) ? Visibility.Visible : Visibility.Collapsed;

    public object ConvertBack(object value, 
                              Type targetType, 
                              object parameter, 
                              string language)
        throw new NotImplementedException();

In XAML you can write a PivotItem as follows. Below the XAML code you will find a sample MainViewModel that fills the data for the TreeView.

<Page x:Class="TreeViewTest.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <local:MainViewModel />
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter />
<PivotItem Header="TreeViewSample">
        <DataTemplate x:Key="NodeNestedTemplate">
                <StackPanel Orientation="Horizontal">
                    <ToggleButton Name="ToggleButton"
                                  IsChecked="{Binding Path=IsExpanded, Mode=TwoWay}"

                    <Button BorderThickness="0">
                            <TextBlock Text="{Binding Path=Item.ArticleName}"
                                       Style="{ThemeResource ListViewItemTextBlockStyle}" />
                            <TextBlock Text="{Binding Path=Item.ArticleNumber}"
                                       Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />

                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="1"
                               Height="{Binding Path=Height, ElementName=ListView}"
                               Fill="Red" />
                    <ListView MinHeight="0"
                              Visibility="{Binding Path=IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}}"
                              ItemsSource="{Binding Path=Children, Mode=TwoWay}"
                              ItemTemplate="{StaticResource NodeNestedTemplate}" />
        <ContentControl Content="{Binding Path=MyPropertyInDataContextContainingTheTree, Mode=TwoWay}"
                        ContentTemplate="{StaticResource NodeNestedTemplate}" />
public class MainViewModel
    public MainViewModel()
        MyTree = new Tree<Article>();
        MyTree.Item = new Article("root", "12345");

        MyTree.Children.Add(new Tree<Article>{Item = new Article("Art1","12345")});
        MyTree.Children.Add(new Tree<Article> {Item = new Article("Art2","12345")});

        MyTree.Children[0].Children.Add(new Tree<Article>{Item = new Article("Art1.1","12345")});
        MyTree.Children[0].Children.Add(new Tree<Article>){Item = new Article("Art1.2","12345")});
        MyTree.Children[0].Children.Add(new Tree<Article>){Item = new Article("Art1.3","12345")});

        MyTree.Children[0].Children[1].Children.Add(new Tree<Article>{Item = new Article("Art1.2.1", "12345")});
        MyTree.Children[0].Children[1].Children.Add(new Tree<Article>{Item = new Article("Art1.2.2", "12345")});

        MyTree.Children[1].Children.Add(new Tree<Article>{Item = new Article("Art2.1", "12345")});
        MyTree.Children[1].Children.Add(new Tree<Article>{Item = new Article("Art2.1", "12345")});

    public Tree<Article> MyTree { get; private set; } 

Then you may have a beautiful TreeView as in the following example:



Posted by on January 8, 2015 in C-Sharp, WP8.1


Tags: ,

8 responses to “TreeView in Windows Phone 8.1

  1. Abhishek Gaonkar

    March 14, 2015 at 07:46

    Hi Michael,

    Can you share the complete source code. We are running to multiple errors wile using the aboe stated approach.


    • Michael Mairegger

      March 16, 2015 at 09:11

      What problems do you exactly mean. Problems in constructing the tree?

  2. Sourajeet Bera

    March 17, 2015 at 11:50

    d:DataContext=”{d:DesignInstance design:TreeDesing}”> – this is referering to something that is not there in this code. Could you please share that too?

    • Michael Mairegger

      March 23, 2015 at 09:06

      I have removed some critical code parts that are only present in my solution. I have forgotten to remove them when I have posted this sample. I will provide a sample project soon

    • Michael Mairegger

      March 24, 2015 at 14:54

      You will find my updated post above. Does it now work for you?

  3. Igor H. Vieira (@Zignd)

    April 22, 2015 at 04:11

    Thanks for sharing mate! Really useful! Thanks again!

  4. viet pro

    December 31, 2015 at 03:35

    Please share the complete source code. Thanks you

  5. Manoj Singh

    August 8, 2016 at 06:44

    I want to expand only one item at a time, means if i have expanded item 1 then I expand item 2 then the already expanded item 1 should be closed.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: