在日常開發過程中，我們可能也會有顯示層級數據的需求，本文通過一個簡單的Demo，介紹了在WPF中通過**TreeView控件**與**HierarchicalDataTemplate層級數據模板**進行層級數據的顯示。希望對正在學習WPF或者對WPF感興趣的同學有所幫助。

前言

比方說我們有以下兩個類：

 public class Class
 {
     public string? Name { get; set; }
     public List<Student>? 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<Student> students1 = new List<Student>()
     {
         student1,
         student2,
         student3
     };

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

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

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

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

     DataContext = classes;

 }

數據模板的使用

xaml：

  <TreeView>
      <TreeViewItem ItemsSource="{Binding}" Header="全部班級"/>
  </TreeView>

HierarchicalDataTemplate介紹

HierarchicalDataTemplate是WPF（Windows Presentation Foundation）中的一種數據模板，用于在樹狀結構或層次結構中顯示數據。它允許您定義如何呈現包含子項的數據對象。

通過HierarchicalDataTemplate，您可以指定一個模板，用于呈現數據對象本身，以及一個模板，用于呈現其子項。這使得在TreeView等控件中輕松顯示復雜的數據結構，如文件夾和文件、組織架構等。

通常，您會在ItemsSource屬性中指定數據源，然后使用HierarchicalDataTemplate定義每個級別的數據對象應該如何呈現。

通過使用HierarchicalDataTemplate，您可以更靈活地控制數據的呈現方式，使您能夠創建具有深層次結構的動態UI。

HierarchicalDataTemplate的使用

xaml：

<Window.Resources>
    <HierarchicalDataTemplate DataType = "{x:Type local2:Class}"
       ItemsSource = "{Binding Path=Students}">
        <TextBlock Text="{Binding Path=Name}"/>
    </HierarchicalDataTemplate>

    <DataTemplate DataType="{x:Type local2:Student}">
        <TextBlock Text="{Binding Path=Name}"/>
    </DataTemplate>
</Window.Resources>

我們可以發現對于Class類，使用了一個HierarchicalDataTemplate，ItemsSource綁定的是Class類的Students屬性。

Student類并沒有再含有層次數據了所有直接使用DataTemplate就好了。

查看實現效果

最后實現的效果如下所示：

總結

在日常開發過程中，我們可能也會有顯示層級數據的需求，本文通過一個簡單的Demo，介紹了在WPF中通過TreeView控件與HierarchicalDataTemplate層級數據模板進行層級數據的顯示。希望對正在學習WPF或者對WPF感興趣的同學有所幫助。