WPF中非递归(无后台代码)动态实现TreeView

  • WPF中非递归(无后台代码)动态实现TreeView已关闭评论
  • 74 次浏览
  • A+
所属分类:.NET技术
摘要

在UI界面中,树形视图是比较常用的表示层级结构的方式,WPF中提供了TreeView控件。对于TreeView控件的基本使用已经有很多文章。大都是介绍如何在XAML中使用硬编码的固定信息填充Treeview控件,或者是后台代码递归遍历数据源,动态创建TreeView。这里我想介绍一下如何只通过XAML标记,不用一行后台代码遍历数据实现TreeView。

在UI界面中,树形视图是比较常用的表示层级结构的方式,WPF中提供了TreeView控件。对于TreeView控件的基本使用已经有很多文章。大都是介绍如何在XAML中使用硬编码的固定信息填充Treeview控件,或者是后台代码递归遍历数据源,动态创建TreeView。这里我想介绍一下如何只通过XAML标记,不用一行后台代码遍历数据实现TreeView。

技术要点与实现

本文的技术关键点是层级式数据模板HierarchicalDataTemplateHierarchicalDataTemplate是一个特殊的DataTemplate,它能够包装第二层模板。通过ItemsSource属性查找下一层级的数据集合,并将它提供给第二层模板。这样描述可能有点晦涩。接下来举例进行描述。

首先假设一个应用场景。用树形结构展现一个地区所有的学校->年级->班级->学生。首先定义几个Model

public class School : ObservableObject {     private bool _isOpen;     /// <summary>     /// 获取或设置是否展开     /// </summary>     [System.Xml.Serialization.XmlIgnore]     public bool IsOpen { get { return _isOpen; } set { Set(ref _isOpen, value); } }      private bool _isSelected;     /// <summary>     /// 获取或设置是否被选中     /// </summary>     [System.Xml.Serialization.XmlIgnore]     public bool IsSelected { get { return _isSelected; } set { Set(ref _isSelected, value); } }          public string SchoolID { get; set; }     public string SchoolName { get; set; }     public ObservableCollection<Grade> listGrade { get; set; }=new ObservableCollection<Grade>() { }; }  public class Grade : ObservableObject {     private bool _isOpen;     [System.Xml.Serialization.XmlIgnore]     public bool IsOpen { get { return _isOpen; } set { Set(ref _isOpen, value); } }      private bool _isSelected;     [System.Xml.Serialization.XmlIgnore]     public bool IsSelected { get { return _isSelected; } set { Set(ref _isSelected, value); } }          public string GradeID { get; set; }     public string GradeName { get; set; }     public ObservableCollection<ClassInfo> ListClass { get; set; }=new ObservableCollection<ClassInfo>() { }; }  public class ClassInfo : ObservableObject {     private bool _isOpen;     [System.Xml.Serialization.XmlIgnore]     public bool IsOpen { get { return _isOpen; } set { Set(ref _isOpen, value); } }      private bool _isSelected;     [System.Xml.Serialization.XmlIgnore]     public bool IsSelected { get { return _isSelected; } set { Set(ref _isSelected, value); } }      public string ClassID { get; set; }     public string ClassName { get; set; }     public ObservableCollection<Student> Students { get; set; }= new ObservableCollection<Student>() { };  }  public class Student : ObservableObject {     private bool _isSelected;     [System.Xml.Serialization.XmlIgnore]     public bool IsSelected { get { return _isSelected; } set { Set(ref _isSelected, value); } }      public string Id { get; set; }     public string Name { get; set; } } 

接下来根据定义好的Model定义层级式数据模板HierarchicalDataTemplate

<HierarchicalDataTemplate DataType="{x:Type local:School}" ItemsSource="{Binding Path=listGrade}">     <TextBlock Text="{Binding Path=SchoolName}" /> </HierarchicalDataTemplate>  <HierarchicalDataTemplate DataType="{x:Type local:Grade}" ItemsSource="{Binding Path=ListClass}">     <TextBlock Text="{Binding Path=GradeName}" /> </HierarchicalDataTemplate>  <HierarchicalDataTemplate DataType="{x:Type local:ClassInfo}" ItemsSource="{Binding Path=Students}">     <TextBlock Text="{Binding Path=ClassName}" /> </HierarchicalDataTemplate>  <HierarchicalDataTemplate DataType="{x:Type local:Student}">     <CheckBox Command="{Binding SelectChangeCommand, ElementName=self}" CommandParameter="{Binding}" IsChecked="{Binding IsSelected}">         <TextBlock Text="{Binding Path=Name}" />     </CheckBox> </HierarchicalDataTemplate> 

其中最外层数据类型是School,它的下一层数据集合是ObservableCollection<Grade> listGrade,因此HierarchicalDataTemplate中的ItemsSource赋值为listGrade,这里我们再属性控件中只显示学校的名称,因此数据模板只是包含绑定了学校名称SchoolNameTextBlock,如果需要显示其他信息(比如学校年级数量或者学校图标),只需增加相应XAML元素即可。紧接着按照这个方式定义好数据类型Grade,ClassInfo,Student的层级式数据模板即可。
定义好了数据模型和相应的层级式数据模板HierarchicalDataTemplate后,就可以直接把数据元绑定到TreeView上了。假设要绑定的数据源实例是ObservableCollection<School> schools。只需如下调用即可。

<TreeView MaxHeight="480"             ItemsSource="{Binding schools}"             VirtualizingPanel.IsVirtualizing="True"             VirtualizingPanel.VirtualizationMode="Recycling" /> 

这样使用TreeView是不是特别方便简洁。不用为了展示树形结构,特地定义一个递归类型的数据结构,UI展示全部交给XAML就行。JSON数据反序列化后直接绑定即可(XML或者DateSet也是类似的方法)。避免了递归遍历数据源的操作,也不用考虑递归带来的性能问题。

性能

前边提到不用考虑递归带来的性能问题。那本文介绍的方法对于大量数据的情况下性能到底怎样呢?接下来做一个测试,模拟100W的数据量,具体为240个学校,每个学校3个年级,每个年级20个班,每个班70个学生,总共数据量是240x3x20x70=1008000个。以下是测试结果:
WPF中非递归(无后台代码)动态实现TreeView

从图中可以看到模拟100w数据耗时1.5s,内存增加了160M左右,数据渲染到界面不到1s,内存增加20M左右。结果还是令人满意的。这是因为TreeView支持开启虚拟化(默认是关闭的,设置 VirtualizingPanel.IsVirtualizing="True"开启虚拟化),渲染界面是不会一次把所有UI元素全部创建好,而是根据屏幕上可见区域计算需要渲染的元素个数,创建少量的UI元素,从而减少内存和CPU资源的使用。例如本例中又100w条数据,可见区能显示20条,TreeView只创建了41个UI元素。为什么不是创建20个呢?这是由于为了确保良好的滚动性能,实际会多创建一些UI元素。

TreeView 默认关闭虚拟化,是因为早期的WPF发布版本中的VirtualizingStackPanel不支持层次化数据,虽然现在已支持,但是TreeView默认关闭虚拟化确保兼容性。