[Sample of Mar 16th] Master-detail databinding in WPF
 |
 |
|
 |
 |
|
Sample Download
C# version: https://code.msdn.microsoft.com/CSWPFMasterDetailBinding-c78566ae
VB version: https://code.msdn.microsoft.com/VBWPFMasterDetailBinding-9a1cb636
Today’s code sample demonstrates how to do master/detail data binding in WPF. In this sample, two ListView are used, one is master ListView and another one is Detail ListView. The corresponding class are Customer and Order. The Customer class has a property of Orders which is an order list, bind a customer list to the master ListView, and the Detail ListView bind to the order list of the selected item of master ListView which is an instance of Customer class. So that when you select one customer in the master ListView, the Detail ListView will show you the order list of that customer.
You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.
Introduction
This example demonstrates how to do master/detail data binding in WPF. In this sample, two ListView are used, one is master ListView and another one is Detail ListView. The corresponding class are Customer and Order. The Customer class has a property of Orders which is an order list, bind a customer list to the master ListView, and the Detail ListView bind to the order list of the selected item of master ListView which is an instance of Customer class. So that when you select one customer in the master ListView, the Detail ListView will show you the order list of that customer.
Running the Sample
1. Build the sample project in Visual Studio.
2. Start Without Debugging, and the mian window of the project will show.
3. The window contains two listview, the first one shows the customer list, and the second shows the order lists of the selected customer.
4. Select one item of the customer list, the second listview shows the order list of the selected customer.
You will see following result.
Using the Code
1. Create Order class and Customer class, which has a master/detail relationship. Each customer has a customer ID and a name. Each order also has a customer ID, so that we can get which customer the order belongs to. And in Customer, there�s� a ObservableCollection property Orders, we can get all the orders belong to the customer from this property.
class Customer : INotifyPropertyChanged
{
private int _id;
private string _name;
private ObservableCollection<Order> _orders
= new ObservableCollection<Order>();
public int ID
{
get { return _id; }
set {
_id = value;
OnPropertyChanged("ID");
}
}
public string Name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("Name");
}
}
public ObservableCollection<Order> Orders
{
get { return _orders; }
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
#endregion
}
class Order : INotifyPropertyChanged
{
private int _id;
private DateTime _date;
private string _shipCity;
public int ID
{
get { return _id; }
set
{
_id = value;
OnPropertyChanged("ID");
}
}
public DateTime Date
{
get { return _date; }
set
{
_date = value;
OnPropertyChanged("Date");
}
}
public string ShipCity
{
get { return _shipCity; }
set
{
_shipCity = value;
OnPropertyChanged("ShipCity");
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
#endregion
}
2. Create a CustomerList class, in its constructor add some customers, and add some orders for each customer, this class is used to provide a list of customers for binding.
class CustomerList
{
private ObservableCollection<Customer> _customers;
public CustomerList()
{
_customers = new ObservableCollection<Customer>();
// Insert customer and corresponding order information into
Customer c = new Customer() { ID = 1, Name = "Customer1" };
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 1, 1), ShipCity = "Shanghai" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 2, 1), ShipCity = "Beijing" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 11, 10), ShipCity = "Guangzhou" });
_customers.Add(c);
c = new Customer() { ID = 2, Name = "Customer2" };
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 1, 1), ShipCity = "New York" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 2, 1), ShipCity = "Seattle" });
_customers.Add(c);
c = new Customer() { ID = 3, Name = "Customer3" };
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 1, 1), ShipCity = "Xiamen" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 2, 1), ShipCity = "Shenzhen" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 11, 10), ShipCity = "Tianjin" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 11, 10), ShipCity = "Wuhan" });
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 11, 10), ShipCity = "Jinan" });
_customers.Add(c);
c = new Customer() { ID = 4, Name = "Customer4" };
c.Orders.Add(new Order() { ID = 1, Date = new DateTime(2009, 1, 1), ShipCity = "Lanzhou" });
_customers.Add(c);
}
public ObservableCollection<Customer> Customers
{
get { return _customers; }
}
}
3. In MainWindow.xaml define the CustomerList object in the window resources, so that we can use it as a static resource for binding.
<Window.Resources>
<!-- Data Source For Binding-->
<local:CustomerList x:Key="CustomerList"/>
</Window.Resources>
4. Bind the listViewCustomers’s ItemsSource to the Customers property of CustomerList class.
<ListView Grid.Row="1" Name="listViewCustomers"
ItemsSource="{Binding Source={StaticResource CustomerList}, Path=Customers}"
SelectedIndex="0">
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}" Width="50"/>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="100"/>
</GridView>
</ListView.View>
</ListView>
5. Bind the listViewOrders’s ItemsSource to the Orders property of the selected customer object.
<ListView Grid.Row="3" Name="listViewOrders"
ItemsSource="{Binding ElementName=listViewCustomers, Path=SelectedItem.Orders}">
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}" Width="50"/>
<GridViewColumn Header="Date" DisplayMemberBinding="{Binding Date}" Width="auto"/>
<GridViewColumn Header="ShipCity" DisplayMemberBinding="{Binding ShipCity}" Width="auto"/>
</GridView>
</ListView.View>
</ListView>