WPF TreeView绑定MVVM视图模型时出现空控件与绑定失败问题求助

兄弟，你的问题其实犯了两个关键错误：一是把UI控件（TreeViewItem）直接放进ViewModel里，完全违反了MVVM「视图与数据分离」的核心原则；二是TreeView的ItemsSource需要绑定实现IEnumerable的集合类型，而你绑定的是单个UI对象，这两个点加起来就导致了绑定失败和空控件的问题。

我给你一步步捋清楚解决方案：

1. 先创建纯数据模型类（代替TreeViewItem） #

MVVM里，ViewModel只应该存放数据和业务逻辑，不能依赖任何WPF UI控件。我们先写一个用来描述树节点的数据模型：

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Custom_XML_Editor.Models
{
    public class TreeItemModel : INotifyPropertyChanged
    {
        private string _header;
        // 节点标题
        public string Header
        {
            get => _header;
            set
            {
                _header = value;
                OnPropertyChanged();
            }
        }

        private List<TreeItemModel> _children = new List<TreeItemModel>();
        // 子节点集合
        public List<TreeItemModel> Children
        {
            get => _children;
            set
            {
                _children = value;
                OnPropertyChanged();
            }
        }

        // 属性变更通知（如果你的项目里有ViewModelBase，也可以直接继承它）
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 重构你的ViewModel，用数据模型替代UI控件 #

把原来的TreeViewItem类型的Root换成我们刚写的数据模型，同时注意TreeView的ItemsSource需要集合，所以我们暴露一个集合属性：

using Custom_XML_Editor.Models;

namespace Custom_XML_Editor.ViewModels
{
    public class XMLTreeViewModel : ViewModelBase
    {
        private List<TreeItemModel> _treeNodes = new List<TreeItemModel>();
        // TreeView的数据源，是一个节点集合
        public List<TreeItemModel> TreeNodes
        {
            get => _treeNodes;
            set
            {
                _treeNodes = value;
                OnPropertyChanged(nameof(TreeNodes));
            }
        }

        public XMLTreeViewModel()
        {
            // 初始化测试数据
            var rootNode = new TreeItemModel
            {
                Header = "Test TreeViewItem",
                Children =
                {
                    new TreeItemModel { Header = "Test TreeViewItem Child" }
                }
            };
            TreeNodes.Add(rootNode);
        }
    }
}

3. 修改XAML，用HierarchicalDataTemplate渲染节点 #

TreeView需要知道怎么把数据模型转换成可视化的节点，这就需要HierarchicalDataTemplate来指定模板：

<UserControl x:Class="Custom_XML_Editor.Views.XMLTreeView"
             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"
             xmlns:local="clr-namespace:Custom_XML_Editor.Views"
             xmlns:models="clr-namespace:Custom_XML_Editor.Models"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TreeView ItemsSource="{Binding TreeNodes}">
            <!-- 给TreeItemModel类型的对象指定渲染模板 -->
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type models:TreeItemModel}"
                                          ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Header}" />
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</UserControl>

为什么之前的写法会失败？ #

• 首先，ViewModel里放UI控件（TreeViewItem）：MVVM要求视图和数据分离，ViewModel不应该引用任何WPF UI组件，否则会导致强耦合，而且TreeView无法正确处理绑定到UI控件的情况。
• 其次，TreeView的ItemsSource需要IEnumerable类型：你之前绑定的是单个TreeViewItem对象，而TreeView的ItemsSource必须是实现IEnumerable的集合，这也是绑定失败的重要原因之一。

按照上面的步骤改完，你的TreeView应该就能正常显示测试节点了，而且完全符合MVVM的设计原则。

内容来源于stack exchange