Oct 6, 2009

Master-details data binding - make it simple with Blend3

In Blend2, it was a rather simple task to bind some fields in a data source to one control and others to another control and have them connected. It was - well, still is of course if you're using Blend2 - about setting the data context to a container and then setting the needed properties of child elements to specific fields of the data source, via a simple data template.

In Blend3, I was at first in total loss with how to do this. There was no simple data template to create for making the binding properly, and doing it all manually just seemed too much work. Couldn't be! And it isn't. Nope, instead it's twice as simple a task to perform in Blend3. No need even to do a data context setting, Blend does even that for you. The only thing that left me wondering, was the need of a separate schema in order to be able to use xml data as live data - as a sample source Blend does it for you.

As for how this master-detail data binding thing works, let's take a walk through.

  1. In you're wpf project, define a data source - I'm using sample data here for simplicity. A new sample data source is defined by clicking Import Sample XML Data

  2. This populates the Data panel with the xml data source elements and fields.
  3. For the fields, you can change their type in order to determine how they should be shown in your application

  4. In your application window, insert a control in which you want to show the "master data" that is then used to determine what data to show in the details. Such controls can be, by default, ListBox, DataGrid and TreeView. Other controls can be used as well, but they require some manual work (described in Blend help).
  5. Set your Data panel view to ListMode and drag a field or fields to the control. Hold down shift to choose which property you want to bind the data to.

  6. Then switch the Data panel to DetailsMode and drag a field or fields to an empty space on your canvas (e.g. an empty cell inside the grid where the control showing master data is). Blend automatically creates an adequate container for the data.
  7. Build and test your project. That's about it when using sample data and default controls.

No comments: