RSS

Tag Archives: Windows Phone 8.1

TreeView in Windows Phone 8.1

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; }
        set
        {
            _isExpanded = value;
            OnPropertyChanged();
        }
    }

    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"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TreeViewTest"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
    <local:MainViewModel />
</Page.DataContext>
<Grid>
<Grid.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter />
</Grid.Resources>
<PivotItem Header="TreeViewSample">
    <PivotItem.Resources>
        <DataTemplate x:Key="NodeNestedTemplate">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton Name="ToggleButton"
                                  Content="🔽"
                                  MinWidth="10"
                                  BorderThickness="0"
                                  IsChecked="{Binding Path=IsExpanded, Mode=TwoWay}"
                                  Style="{x:Null}"/>

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

                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="1"
                               Height="{Binding Path=Height, ElementName=ListView}"
                               Fill="Red" />
                    <ListView MinHeight="0"
                              Name="ListView"
                              Margin="20"
                              Visibility="{Binding Path=IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}}"
                              ItemsSource="{Binding Path=Children, Mode=TwoWay}"
                              ItemTemplate="{StaticResource NodeNestedTemplate}" />
                </StackPanel>
            </StackPanel>        
        </DataTemplate>
    </PivotItem.Resources>
    <ScrollViewer>
        <ContentControl Content="{Binding Path=MyPropertyInDataContextContainingTheTree, Mode=TwoWay}"
                        ContentTemplate="{StaticResource NodeNestedTemplate}" />
    </ScrollViewer>
</PivotItem>
</Grid>
</Page>
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:

TreeView

Advertisements
 
8 Comments

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

 

Tags: ,