WPF/C#：如何顯示具有層級關係的資料

mingupupup發表於2024-04-22
C#

前言

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

 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感興趣的同學有所幫助。

相關文章