WPF – Master-Detail Binding

Một master-detail binding sử dụng nhiều control để hiển thị dữ liệu theo quan hệt một-nhiều(như Category > Product, Book > Chapter, …). Trong ví dụ này, tôi sẽ minh họa cách tạo mô hình binding này với hai control hiển thị dữ liệu kiểu collection là Combo Box và ListBox.

Combo Box và ListBox hỗ trợ hai property là DisplayMemberPath và SelectedValuePath để xác định giá trị sẽ hiển thị và giá trị cần lấy của mỗi phần tử khi được chọn. Nhờ đó bạn có thể lấy được giá trị của phần tử được chọn qua property SelectedValue.

Để làm ví dụ, bạn tạo hai lớp Category và Product trong code-behind như sau:

class Category
{
    public string Name { get; set; }
    public ObservableCollection<Product> Products { get; set; }

    public Category(string name, params Product[] products)
    {
        this.Name = name;
        Products = new ObservableCollection<Product>();
        foreach (Product  p in products)
        {
            Products.Add(p);
        }
    }

}
class Product
{

    public int ID { get; set; }
    public string Name { get; set; }

    public Product(int id, string name)
    {
        this.ID = id;
        this.Name = name;
    }
}

Trong constructor của Window1, tạo dữ liệu và gán giá trị cho DataContext:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        ObservableCollection<Category> categories = new ObservableCollection<Category>();

        categories.Add(new Category("Antivirus",
                                    new Product(1, "Norton"),
                                    new Product(2, "Kaspersky"),
                                    new Product(3,"AVG" )));

        categories.Add(new Category("Browsers",
                                    new Product(4, "FireFox"),
                                    new Product(5,"Chrome"),
                                    new Product(6,"Opera")));

        categories.Add(new Category("Game",
                                    new Product(7, "Need for Speed"),
                                    new Product(8, "Age of Empires" ),
                                    new Product(9, "Road Rash")));

        this.DataContext = categories;

    }
}

Đoạn mã XAML sau tạo một Combo Box chứa danh sách các Category, sau đó tạo một ListBox binding đến property SelectedItem.Products của Combo Box (mỗi property ComboxBox.SelectedItem sẽ có giá trị là một đối tượng Category). Tương tự như vậy trong ListBox, bạn cũng có thể lấy được phần tử được chọn để hiển thị lên cửa sổ.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="MasterDetailBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MasterDetailBinding"
    Height="300" Width="300">
    <StackPanel Margin="6">
        <TextBlock Text="Categories:" />
        <ComboBox
            x:Name="cboCategories"
            ItemsSource="{Binding}"
            DisplayMemberPath="Name"
            SelectedIndex="0" />
        <TextBlock Text="Products:" />
        <ListBox
            x:Name="lstProducts"
            ItemsSource="{Binding ElementName=cboCategories, Path=SelectedItem.Products}"
            DisplayMemberPath="Name"
            SelectedValuePath="ID"
            SelectedIndex="0" />

        <GroupBox Header="Details" Padding="5">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Product's ID"/>
                <TextBlock Grid.Column="1"
                           Text="{Binding ElementName=lstProducts, Path=SelectedValue}" />
                <TextBlock Text="Product's Name" Grid.Row="1"/>
                <TextBlock Grid.Row="1"  Grid.Column="1"
                           Text="{Binding ElementName=lstProducts, Path=SelectedItem.Name}" />
            </Grid>
        </GroupBox>
    </StackPanel>
</Window>

Kết quả:

https://yinyangit.wordpress.com

Related articles
Advertisements