How to set up Header/Lines in WPF/Silverlight

Question

Hi,
Do you have any best practices for setting up Header/Lines forms (Also known as Header/Details) in WPF or Silverlight? Preferably using the Mode-View-ViewModel design Pattern to fit in with the rest of my application.

An example would be if I had a grid that displayed all SalesOrders in the database, and the underneath that a grid that showed all of the SalesOrderDetails (The individual lines for the sales order...each item sold) for the selected sales order in the top grid.

I realize I could do this in the code behind file on the Grid's SelectionChanged event, but I'd prefer a declarative way of doing so...in all XAML and ViewModel code. Is this possible?

Thanks, Roy

Answer 1

Header/Lines sounds a lot like the Master - Detail pattern to me. To implement something like this using MVVM is quite simple.

If we were to create a structure where we had a MasterViewModel and a DetailViewModel then in our MasterViewModel we would simply need a property to represent our list of Details and the current Detail. In the View we can bind a list's ItemSource to the collection of Details and bind the SelectedItem to the CurrentDetail property. We can then have a seperate View, as a DataTemplate or UserControl, that represents the CurrentDetail and displays our values in the detail grid.

There's also some good resources out there on implementing a Master Detail pattern XAML.

Bea Stollnitz has two excelent samples using XML for the Data Sources: Here and Here.

There's a MSDN video on implementing the pattern in WPF. (The video is in VB but the code can be downloaded in C#).

In this MSDN forums discussion Johnny Q. demonstrates a simple Master-Detail settup using MVVM.

A lot of Karl Shifflett's examples also end up demonstrating the Master-Detail pattern, though the code is usually in VB (however some examples come with both C# and VB code.)