Chủ nhật, ngày 4 tháng 12 năm 2016

WPF – Hierarchical Binding và Hierarchical Data Template

Ngày đăng: 26/3/2012, 8:38:6PM | Lượt xem: 4,439
Hot!

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.

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<Category>();

            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<Product> Products { get; set; }

        public Category()
        {
            Products = new List<Product>();
        }
    }
}

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ả:

http://yinyangit.wordpress.com

Related articles

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.