Question

I can’t seem to use the ItemSource Tag for my treeview. I don’t unerstand the problem..
I am trying a simple tree view before i actually bind to my database.. I a looking for an MVVM Style solution

Here is My view Model

    public class TreeViewVM : ViewModelBase
    { 


        public class Topic
        {
            public string Title { get; set; }
            public int Rating { get; set; }
            private ObservableCollection<Topic> childTopicsValue = new ObservableCollection<Topic>();
            public ObservableCollection<Topic> ChildTopics {
                get
                {
                    return childTopicsValue;
                }
                set
                {
                    childTopicsValue = value;
                }
            }
            public Topic() {}
            public Topic(string title, int rating)
            {
               Title = title;
               Rating = rating;
            }
        }

        static public ObservableCollection<Topic> Users = new ObservableCollection<Topic>();

        public TreeViewVM()
        {


            Users.Add(new Topic("Using Controls and Dialog Boxes", -1));
            Users.Add(new Topic("Getting Started with Controls", 1));
            Topic DataGridTopic = new Topic("DataGrid", 4);
            DataGridTopic.ChildTopics.Add(
                new Topic("Default Keyboard and Mouse Behavior in the DataGrid Control", -1));
            DataGridTopic.ChildTopics.Add(
                new Topic("How to: Add a DataGrid Control to a Page", -1));
            DataGridTopic.ChildTopics.Add(
                new Topic("How to: Display and Configure Row Details in the DataGrid Control", 1));
            Users.Add(DataGridTopic);
            Topics = Users;
        }

        private ObservableCollection<Topic> _Topics { get; set; }
        public ObservableCollection<Topic> Topics
        {
            get
            {
                return _Topics;
            }
            set
            {
                if (_Topics != value)
                {
                    _Topics = value;
                    OnNotifyPropertyChanged("Topics");
                }
            }
        }



    }
}

Here is my Xaml

xmlns:converter="clr-namespace:TestTree"
xmlns:viewModel="clr-namespace:TestTree.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<UserControl.Resources>
    <viewModel:TreeViewVM x:Key="ViewModel" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource Topics}}">
    <StackPanel x:Name="LayoutRoot2" Background="White">
        <StackPanel.Resources>
            <sdk:HierarchicalDataTemplate x:Key="ChildTemplate"  >
                <TextBlock FontStyle="Italic" Text="{Binding Path=Title}" />
            </sdk:HierarchicalDataTemplate>
            <sdk:HierarchicalDataTemplate x:Key="NameTemplate" 
        ItemsSource="{Binding Path=ChildTopics}" 
        ItemTemplate="{StaticResource ChildTemplate}">
                <TextBlock Text="{Binding Path=Title}" FontWeight="Bold" />
            </sdk:HierarchicalDataTemplate>
        </StackPanel.Resources>
        <sdk:TreeView Width="400"  Height="300" DataContext="{Binding Path=Topics}" ItemTemplate="{StaticResource NameTemplate}" x:Name="myTreeView" />
    </StackPanel>

Answer 1

First of all you set DataContext of the “LayourRoot” grid to a resource with key “Topics” which does not exist. That probably should be the “ViewModel” resource. Second of all, why can’t you use the ItemsSource property on the TreeView? Setting DataContext property on the TreeView alone will not work. Here is the correct XAML:

<UserControl x:Class="MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
    <UserControl.Resources>
        <viewModel:TreeViewVM x:Key="ViewModel" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource ViewModel}}">
        <StackPanel x:Name="LayoutRoot2" Background="White">
            <StackPanel.Resources>
                <sdk:HierarchicalDataTemplate x:Key="ChildTemplate"  >
                    <TextBlock FontStyle="Italic" Text="{Binding Path=Title}" />
                </sdk:HierarchicalDataTemplate>
                <sdk:HierarchicalDataTemplate x:Key="NameTemplate" 
        ItemsSource="{Binding Path=ChildTopics}" 
        ItemTemplate="{StaticResource ChildTemplate}">
                    <TextBlock Text="{Binding Path=Title}" FontWeight="Bold" />
                </sdk:HierarchicalDataTemplate>
            </StackPanel.Resources>
            <sdk:TreeView Width="400"  Height="300" ItemsSource="{Binding Path=Topics}" ItemTemplate="{StaticResource NameTemplate}" x:Name="myTreeView" />
        </StackPanel>
    </Grid>
</UserControl>