WPF/C#：如何显示具有层级关系的数据

合集 - C#(32)

1.使用C#将几个Excel文件合并去重分类2023-11-152.C#使用SqlSugar操作MySQL数据库实现简单的增删改查2023-11-163.C#中的类和继承2023-11-174.C#中的virtual和override关键字2023-11-175.C#中的属性2023-11-206.C#winform中使用SQLite数据库2023-11-237.C#简化工作之实现网页爬虫获取数据2023-11-278.C#中的委托（一）2023-11-299.C#中的ref关键字2023-11-2910.C#中out关键字2023-11-2911.C#中内置的泛型委托Func与Action2023-12-0412.在winform blazor hybrid中绘图2023-12-1313.使用C#如何监控选定文件夹中文件的变动情况？2023-12-2814.C#设计模式之策略模式01-0215.由浅入深理解C#中的事件01-0416.C#设计模式之观察者模式01-0417.C#设计模式之单例模式01-0818.C#基于ScottPlot进行可视化01-1319.C#使用MiniExcel导入导出数据到Excel/CSV文件02-1020.winform实现最小化至系统托盘02-1921.C#使用Bogus生成测试数据02-2722.SemanticKernel如何基于自有数据聊天03-0523.在winform中如何嵌入第三方软件窗体✨03-0724.在winform中如何实现双向数据绑定？03-1825.自己动手做一个批量doc转换为docx文件的小工具03-2026.WPF中动画教程（DoubleAnimation的基本使用）04-0127.WPF动画教程（PointAnimationUsingPath的使用）04-0328.C#使用PaddleOCR进行图片文字识别✨04-0929.WPF基础：在Canvas上绘制图形04-1630.WPF/C#：让绘制的图形可以被选中并将信息显示在ListBox中04-1931.使用归一化盒过滤器对图像进行平滑处理04-20

32.WPF/C#：如何显示具有层级关系的数据04-22

收起

前言

比方说我们有以下两个类：

 public class Class
 {
     public string? Name { get; set; }
     public List? Students { get; set; }
 }

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

一个表示班级，一个表示学生，一个班级包含多个学生。在WPF中我们该如何显示这种具有层级关系的数据呢？

今天给大家介绍的是用TreeView与HierarchicalDataTemplate进行显示。

实现效果如下所示：

如果你对此感兴趣，可以接着往下阅读。

创建数据

 private void Button_Click(object sender, RoutedEventArgs e)
 {
     Student student1 = new Student() { Name = "小明" };
     Student student2 = new Student() { Name = "小红" };
     Student student3 = new Student() { Name = "小黄" };
     Student student4 = new Student() { Name = "小绿" };
     Student student5 = new Student() { Name = "小刚" };

     List students1 = new List()
     {
         student1,
         student2,
         student3
     };

     List students2 = new List()
     {              
         student4,
         student5
     };

     Class class1 = new Class()
     {
         Name = "班级1",
         Students = students1
     };

     Class class2 = new Class()
     {
         Name = "班级2",
         Students = students2
     };

     List classes = new List()
     {
         class1,
         class2
     };

     DataContext = classes;

 }

数据模板的使用

xaml：

HierarchicalDataTemplate介绍

HierarchicalDataTemplate是WPF（Windows Presentation Foundation）中的一种数据模板，用于在树状结构或层次结构中显示数据。它允许您定义如何呈现包含子项的数据对象。

通过HierarchicalDataTemplate，您可以指定一个模板，用于呈现数据对象本身，以及一个模板，用于呈现其子项。这使得在TreeView等控件中轻松显示复杂的数据结构，如文件夹和文件、组织架构等。

通常，您会在ItemsSource属性中指定数据源，然后使用HierarchicalDataTemplate定义每个级别的数据对象应该如何呈现。

通过使用HierarchicalDataTemplate，您可以更灵活地控制数据的呈现方式，使您能够创建具有深层次结构的动态UI。

HierarchicalDataTemplate的使用

xaml：

我们可以发现对于Class类，使用了一个HierarchicalDataTemplate，ItemsSource绑定的是Class类的Students属性。

Student类并没有再含有层次数据了所有直接使用DataTemplate就好了。

查看实现效果

最后实现的效果如下所示：

总结

在日常开发过程中，我们可能也会有显示层级数据的需求，本文通过一个简单的Demo，介绍了在WPF中通过TreeView控件与HierarchicalDataTemplate层级数据模板进行层级数据的显示。希望对正在学习WPF或者对WPF感兴趣的同学有所帮助。