WPF:TreeView控件一

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

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

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

1.  
   <TreeView>
2.  
   <TreeViewItem Header="第一级">
3.  
   <TreeViewItem Header="第二级">
4.  
   <TreeViewItem Header="第三级"/>
5.  
   </TreeViewItem>
6.  
   </TreeViewItem>
7.  
   <TreeViewItem Header="第一级"/>
8.  
   <TreeViewItem Header="第一级"/>
9.  
   <TreeViewItem Header="第一级"/>
10.  
    </TreeView>

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

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

1.  
   <TreeView>
2.  
   <TreeView.ItemTemplate>
3.  
   <HierarchicalDataTemplate>
4.  
   <TextBlock/>
5.  
   </HierarchicalDataTemplate>
6.  
   </TreeView.ItemTemplate>
7.  
   </TreeView>

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

1.  
   internal class TreeViewModel
2.  
   {
3.  
   public string? Name { get; set; }
4.  
    
5.  
   public ObservableCollection<TreeViewModel> Children { get; set; } = new ObservableCollection<TreeViewModel>();
6.  
   }

之后在ViewModel中添加如下代码

1.  
   internal class TreeViewViewModel
2.  
   {
3.  
   private TreeViewModel _treeViewModel = new TreeViewModel();
4.  
    
5.  
   public TreeViewModel TreeViewModel
6.  
   {
7.  
   get { return _treeViewModel; }
8.  
   set { _treeViewModel = value; }
9.  
   }
10.  
     
11.  
    public TreeViewViewModel()
12.  
    {
13.  
    InitTree();
14.  
    }
15.  
    public void InitTree()
16.  
    {
17.  
    for (int i = 0; i < 5; i )
18.  
    {
19.  
    TreeViewModel treeViewModel = new TreeViewModel();
20.  
    treeViewModel.Name = $"第{i 1}级";
21.  
    for (int j = 0; j < 5; j )
22.  
    {
23.  
    TreeViewModel treeViewModel1 = new TreeViewModel();
24.  
    treeViewModel1.Name = $"第{i 1}----{j 1}级";
25.  
    treeViewModel.Children.Add(treeViewModel1);
26.  
    }
27.  
    TreeViewModel.Children.Add(treeViewModel);
28.  
    }
29.  
     
30.  
    }
31.  
    }

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

1.  
   <Window.DataContext>
2.  
   <viewModel:TreeViewViewModel x:Name="viewmodel"/>
3.  
   </Window.DataContext>
4.  
    
5.  
   <TreeView ItemsSource="{Binding TreeViewModel.Children}">
6.  
   <TreeView.ItemTemplate>
7.  
   <HierarchicalDataTemplate ItemsSource="{Binding Children}">
8.  
   <TextBlock Text="{Binding Name}"/>
9.  
   </HierarchicalDataTemplate>
10.  
    </TreeView.ItemTemplate>
11.  
    </TreeView>

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

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

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

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

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

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

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

1.  
   public class TreeViewModel
2.  
   {
3.  
   public ObservableCollection<TreeNodeViewModel1> ChildrenModel1 { get; set; } = new ObservableCollection<TreeNodeViewModel1>();
4.  
   }
5.  
    
6.  
   public class TreeNodeViewModel1
7.  
   {
8.  
   public string? Name { get; set; }
9.  
    
10.  
    public ObservableCollection<TreeNodeViewModel2> ChildrenModel2 { get; set; } = new ObservableCollection<TreeNodeViewModel2>();
11.  
    }
12.  
     
13.  
    public class TreeNodeViewModel2
14.  
    {
15.  
    public string? ID { get; set; }
16.  
     
17.  
    public ObservableCollection<TreeNodeViewModel3> ChildrenModel3 { get; set; } = new ObservableCollection<TreeNodeViewModel3>();
18.  
     
19.  
    }
20.  
     
21.  
    public class TreeNodeViewModel3
22.  
    {
23.  
    public string? Description { get; set; }
24.  
    }

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

1.  
   TreeViewModel treeViewModel = new TreeViewModel();
2.  
    
3.  
   for (int i = 0; i < 5; i )
4.  
   {
5.  
   TreeNodeViewModel1 treeViewModel1 = new TreeNodeViewModel1();
6.  
   treeViewModel1.Name = $"第{i 1}级";
7.  
    
8.  
   for (int j = 0; j < 5; j )
9.  
   {
10.  
    TreeNodeViewModel2 treeNodeViewModel2 = new TreeNodeViewModel2();
11.  
    treeNodeViewModel2.ID = $"我的ID是:{j 1}";
12.  
     
13.  
    for (int k = 0; k < 5; k )
14.  
    {
15.  
    TreeNodeViewModel3 treeNodeViewModel3 = new TreeNodeViewModel3();
16.  
    treeNodeViewModel3.Description = $"我是最后{k 1}";
17.  
    treeNodeViewModel2.ChildrenModel3.Add(treeNodeViewModel3);
18.  
    }
19.  
    treeViewModel1.ChildrenModel2.Add(treeNodeViewModel2);
20.  
    }
21.  
    treeViewModel.ChildrenModel1.Add(treeViewModel1);
22.  
    }
23.  
    TreeViewModel = treeViewModel;

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

1.  
   <TreeView ItemsSource="{Binding TreeViewModel.ChildrenModel1}">
2.  
   <TreeView.ItemTemplate>
3.  
   <HierarchicalDataTemplate ItemsSource="{Binding ChildrenModel2}">
4.  
   <TextBlock Text="{Binding Name}"/>
5.  
   <HierarchicalDataTemplate.ItemTemplate >
6.  
   <HierarchicalDataTemplate ItemsSource="{Binding ChildrenModel3}">
7.  
   <TextBlock Text="{Binding ID}"/>
8.  
   <HierarchicalDataTemplate.ItemTemplate >
9.  
   <DataTemplate>
10.  
    <TextBlock Text="{Binding Description}"/>
11.  
    </DataTemplate>
12.  
    </HierarchicalDataTemplate.ItemTemplate>
13.  
    </HierarchicalDataTemplate>
14.  
    </HierarchicalDataTemplate.ItemTemplate>
15.  
    </HierarchicalDataTemplate>
16.  
    </TreeView.ItemTemplate>
17.  
    </TreeView>

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

第一次写博客，希望各位大佬批评指正

这篇好文章是转载于：学新通技术网