树视图 MVVM 风格中的 ItemSource...我无法正确绑定它

Question

我似乎无法在树视图中使用 ItemSource 标签。我不明白问题所在.. 在实际绑定到数据库之前，我正在尝试一个简单的树视图。我正在寻找 MVVM 样式解决方案

这是我的视图模型

    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");
                }
            }
        }



    }
}

这是我的 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

首先，将“LayourRoot”网格的 DataContext 设置为具有不存在的键“Topics”的资源。那可能应该是“ViewModel”资源。其次，为什么不能使用 TreeView 上的 ItemsSource 属性？单独在 TreeView 上设置 DataContext 属性是行不通的。这是正确的 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>