WPF – Hierarchical Binding và Hierarchical Data Template Phần 01

Các dữ liệu dạng phân cấp có thể được hiển thị trên các control HeaderedItemsControl như TreeViewItem hay MenuItem. Và để sử dụng Data Template cho các các kiểu dữ liệu này, bạn cần sử dụng lớp HierarchicalDataTemplate.

Trong bài này tôi sẽ làm một ví dụ binding dữ liệu lên TreeView và thiết lập hiển thị bằng các HierarchicalDataTemplate cho từng kiểu dữ liệu.

Đầu tiên bạn một dự án với tên HierarchicalBinding và tạo dữ liệu nguồn trong code-behind như sau:

using System.Windows; using System.Collections.Generic;   namespace HierarchicalBinding {     public partial class Window1 : Window     {           public Window1()         {             InitializeComponent();               var categories = new List();               var cat1 = new Category() CategoryName = "Antivirus" ;             cat1.Products.Add(new Product() ProductID = 1, ProductName = "Norton AV" );             cat1.Products.Add(new Product() ProductID = 2, ProductName = "Kaspersky" );             cat1.Products.Add(new Product() ProductID = 3, ProductName = "AVG" );               var cat2 = new Category() CategoryName = "Browser" ;             cat2.Products.Add(new Product() ProductID = 4, ProductName = "Firefox" );             cat2.Products.Add(new Product() ProductID = 5, ProductName = "Chrome" );             cat2.Products.Add(new Product() ProductID = 6, ProductName = "Opera" );               var cat3 = new Category() CategoryName = "Game" ;             cat3.Products.Add(new Product() ProductID = 7, ProductName = "FreeCell" );             cat3.Products.Add(new Product() ProductID = 8, ProductName = "Hearts" );             cat3.Products.Add(new Product() ProductID = 9, ProductName = "Minesweeper" );               categories.Add(cat1);             categories.Add(cat2);             categories.Add(cat3);               this.DataContext = categories;         }     }     public class Product     {         public string ProductName get; set;         public int ProductID get; set;     }     public class Category     {         public string CategoryName get; set;         public List Products get; set;           public Category()         {             Products = new List();         }     } }

Trong Window1.xaml, ta binding dữ liệu vào TreeViewItem thông qua property ItemSource với header hiển thị là Categories. Đồng thời tạo một HierarchicalDataTemplate dùng cho kiểu dữ liệu Category trong Window.Resources. Bạn cần ItemsSource của HierarchicalDataTemplate đến collection của cấp dữ liệu tiếp theo, ở đây là Category.Products.

<Window x:Class="HierarchicalBinding.Window1"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:HierarchicalBinding"         Title="Hierarchical Binding Demo" Height="250" Width="300">     <Window.Resources>         <HierarchicalDataTemplate DataType="x:Type local:Category"       ItemsSource="Binding Path=Products">             <TextBlock Background="LightBlue" Text="Binding Path=CategoryName" />         HierarchicalDataTemplate>       Window.Resources>     <Grid>         <TreeView>             <TreeViewItem ItemsSource="Binding" Header="Categories"/>         TreeView>     Grid> Window>

Kết quả:

Như bạn thấy các node lá trong TreeView trên đại diện cho các đối tượng Product và chúng hiển thị theo tên kiểu. Để thiết lập lại kiểu hiển thị của các node này, bạn cần tạo thêm một HierarchicalDataTemplate cho kiểu Product. Bởi vì kiểu Product không chứa collection con nào, bạn không cần gán giá trị cho ItemsSource, hay có thể dùng cú pháp ItemsSource=”Binding”:

<Window x:Class="HierarchicalBinding.Window1"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:HierarchicalBinding"         Title="Hierarchical Binding Demo" Height="250" Width="300">     <Window.Resources>         <HierarchicalDataTemplate DataType="x:Type local:Category"       ItemsSource="Binding Path=Products">             <TextBlock Background="LightBlue" Text="Binding Path=CategoryName" />         HierarchicalDataTemplate>           <HierarchicalDataTemplate DataType="x:Type local:Product">             <StackPanel Orientation="Horizontal">                 <TextBlock Text="Binding Path=ProductID" />                 <TextBlock Text=" - " />                 <TextBlock Text="Binding Path=ProductName" />             StackPanel>         HierarchicalDataTemplate>     Window.Resources>     <Grid>         <TreeView>             <TreeViewItem ItemsSource="Binding" Header="Categories"/>         TreeView>     Grid> Window>

Kết quả: