新手入门WPF之TreeView控件（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了新手入门WPF之TreeView控件（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

刚接触C#没多久，学着用C#中的WPF做一些界面，所以本篇文章适合初学者看，这次我主要介绍的是在项目中经常用到的一个WPF控件——TreeView。

TreeView也就是目录树，先给出一个最简单的展示效果及代码

这是刚创建的一个名为BeginTreeView的解决项目（使用的VS2022）

新手入门WPF之TreeView控件（一）

把它改为下图（把Grid布局控件换为TreeView），添加的代码如下：

新手入门WPF之TreeView控件（一）

    <TreeView>
        <TreeViewItem Header="第一级">
            <TreeViewItem Header="第二级">
                <TreeViewItem Header="第三级"/>
            </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem Header="第一级"/>
        <TreeViewItem Header="第一级"/>
        <TreeViewItem Header="第一级"/>
    </TreeView>

运行后的结果如图所示（一个三级树）：

新手入门WPF之TreeView控件（一）

当然，这种写法在实战项目上是没用的，一般来说，树的生成是根据读取所提供的数据动态的生成的，因此，现在的思路是要实现由数据动态生成树，首先想到的是在TreeView中创建TreeViewItem的模板，通过模板与数据的绑定，动态生成所需要的树，而我在项目上，一般是使用TreeView中的——HierarchicalDataTemplate对象设置TreeView.ItemTemplate属性（至于为什么一般不用DataTemplate，我会在文章最后补充中进行说明），修改代码如下：

    <TreeView>
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate>
                <TextBlock/>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

新手入门WPF之TreeView控件（一）

完成后，接下来的任务就是让数据与模板进行绑定，这时用到了TreeView中的ItemSource属性，该属性需要注意的是，绑定的数据需要是列表类型的数据，不是C#中的基本数据类型。好了，既然TreeViewItem数据源有了，那么最后一步就是让TreeViewItem中显示数据源中的什么数据，这也就是TextBlock的作用，不过千万别忽悠一个问题，读数据或者生成数据，是需要对应的结构，没有结构的数据是没办法利用的，所以我们需要先自定义一个数据结构，下图是我定义的一个简单结构（项目结构调整如左边——MVVM）

新手入门WPF之TreeView控件（一）

    internal class TreeViewModel
    {
        public string? Name { get; set; }

        public ObservableCollection<TreeViewModel> Children { get; set; } = new ObservableCollection<TreeViewModel>();
    }

之后在ViewModel中添加如下代码

    internal class TreeViewViewModel
    {
        private TreeViewModel _treeViewModel = new TreeViewModel();

        public TreeViewModel TreeViewModel
        {
            get { return _treeViewModel; }
            set { _treeViewModel = value; }
        }

        public TreeViewViewModel()
        {
            InitTree();
        }
        public void InitTree()
        {
            for (int i = 0; i < 5; i++)
            {
                TreeViewModel treeViewModel = new TreeViewModel();
                treeViewModel.Name = $"第{i + 1}级";
                for (int j = 0; j < 5; j++)
                {
                    TreeViewModel treeViewModel1 = new TreeViewModel();
                    treeViewModel1.Name = $"第{i + 1}----{j + 1}级";
                    treeViewModel.Children.Add(treeViewModel1);
                }
                TreeViewModel.Children.Add(treeViewModel);
            }

        }
    }

最后，就是对生成数据的绑定，代码如下

新手入门WPF之TreeView控件（一）

    <Window.DataContext>
        <viewModel:TreeViewViewModel x:Name="viewmodel"/>
    </Window.DataContext>

    <TreeView ItemsSource="{Binding TreeViewModel.Children}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Name}"/>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

注：由于采用的是MVVM，所以在前端需要绑定ViewModel，这样才能访问到后台生成的数据并操作数据

xmlns:viewModel="clr-namespace:BeginTreeView.ViewModel"

运行的结果如图所示，是一个2级树

新手入门WPF之TreeView控件（一）

补充：HierarchicalDataTemplate对象与DataTemplate对象之间的区别

HierarchicalDataTemplate相比DataTemplate有一个额外的优点，就是封装第二个模板。然后HierarchicalDataTemplate对象就可以从第一层数据中提取项的集合，并将之提供给第二个模板。

举个例子：假如项目中给的数据结构是定死的，而且数据结构不是同对象递归，这时就需要这样生成树。

在原来的解决方案上修改数据结构如下所示

新手入门WPF之TreeView控件（一）

    public class TreeViewModel
    {
        public ObservableCollection<TreeNodeViewModel1> ChildrenModel1 { get; set; } = new ObservableCollection<TreeNodeViewModel1>();
    }

    public class TreeNodeViewModel1
    {
        public string? Name { get; set; }

        public ObservableCollection<TreeNodeViewModel2> ChildrenModel2 { get; set; } = new ObservableCollection<TreeNodeViewModel2>();
    }

    public class TreeNodeViewModel2
    {
        public string? ID { get; set; }

        public ObservableCollection<TreeNodeViewModel3> ChildrenModel3 { get; set; } = new ObservableCollection<TreeNodeViewModel3>();

    }

    public class TreeNodeViewModel3
    {
        public string? Description { get; set; }
    }

之后在ViewModel中修改创建数据的代码（InitTree方法）如下

新手入门WPF之TreeView控件（一）

            TreeViewModel treeViewModel = new TreeViewModel();

            for (int i = 0; i < 5; i++)
            {
                TreeNodeViewModel1 treeViewModel1 = new TreeNodeViewModel1();
                treeViewModel1.Name = $"第{i + 1}级";

                for (int j = 0; j < 5; j++)
                {
                    TreeNodeViewModel2 treeNodeViewModel2 = new TreeNodeViewModel2();
                    treeNodeViewModel2.ID = $"我的ID是:{j + 1}";

                    for (int k = 0; k < 5; k++)
                    {
                        TreeNodeViewModel3 treeNodeViewModel3 = new TreeNodeViewModel3();
                        treeNodeViewModel3.Description = $"我是最后{k + 1}";
                        treeNodeViewModel2.ChildrenModel3.Add(treeNodeViewModel3);
                    }
                    treeViewModel1.ChildrenModel2.Add(treeNodeViewModel2);
                }
                treeViewModel.ChildrenModel1.Add(treeViewModel1);
            }
            TreeViewModel = treeViewModel;

最后在前端绑定数据源与模板，如下图所示

新手入门WPF之TreeView控件（一）

    <TreeView ItemsSource="{Binding TreeViewModel.ChildrenModel1}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding ChildrenModel2}">
                <TextBlock Text="{Binding Name}"/>
                <HierarchicalDataTemplate.ItemTemplate >
                    <HierarchicalDataTemplate ItemsSource="{Binding ChildrenModel3}">
                        <TextBlock Text="{Binding ID}"/>
                        <HierarchicalDataTemplate.ItemTemplate >
                            <DataTemplate>
                                <TextBlock Text="{Binding Description}"/>
                            </DataTemplate>
                        </HierarchicalDataTemplate.ItemTemplate>
                    </HierarchicalDataTemplate>
                </HierarchicalDataTemplate.ItemTemplate>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

运行后的结果图，是一个3级树

新手入门WPF之TreeView控件（一）