In the previous blog post, we examined how to establish data bindings between existing UI elements in a WPF or Silverlight application. While this can certainly be useful, the data binding engine of these APIs also makes it possible to bind custom objects (or collections of custom objects) to UI properties.

For example, you might have a collection of business objects which need to be shown in a DataGrid control. Maybe you are building an application which needs to display data within an XML document in a set of ListBox controls. To illustrate how Blend can be used to connect to non-UI properties, this post will illustrate how to build a collection of custom objects to various UI elements.

Assuming you have a new WPF or Silverlight project loaded into Blend, our next task is to create a custom business object. Any class definition will do; however for this blog example, I'll be working with the following:

   1: public class PurchaseOrder

   2: {

   3:   public PurchaseOrder(){}

   4:   public PurchaseOrder(int amt, double cost, string desc)

   5:   {

   6:     Amount = amt;

   7:     TotalCost = cost;

   8:     Description = desc;

   9:   }

  10:         

  11:   public int Amount { get; set; }

  12:   public double TotalCost{ get; set; }

  13:   public string Description{ get; set; }

  14: }

While you could use Blend to connect the values of these three properties to a UI object based on a single instance of the PurchaseOrder class, you will most likely want to bind a collection of these objects to UI elements. Consider then, this following custom container, which creates a few PurchaseOrder objects upon startup:

   1: public class PurchaseOrders : 

   2:   System.Collections.ObjectModel.ObservableCollection<PurchaseOrder>

   3: {

   4:   public PurchaseOrders()

   5:   {

   6:     // Add a few items upon startup.

   7:     this.Add(new PurchaseOrder(5, 50.00, "Mikko's Cat Nip Treat"));

   8:     this.Add(new PurchaseOrder(5, 50.00, "Saku's Best Dog Bone"));

   9:     this.Add(new PurchaseOrder(1, 2.50, "Extra Bland Tofu"));

  10:   }

  11: }

Great!  Now we  can make use of the Blend Data panel to simplify our data binding operations. Locate and open the Data panel (mounted on the right side of the IDE by default), click the Create data source button, and from the dropdown presented to you, pick Create Object Data Source?

At this point, you are presented with a new dialog box, where you can select from a large variety of .NET object types, including any custom classes which are part of your current application. In the figure below, notice I have collapsed all nodes of the standard libraries for readability; the key here is that the correct library (named the same as your project) will show you your custom classes. Pick the PurchaseOrders collection, and notice that the suggested name of your new data context (on the upper portion of the current dialog box) is PurchaseOrdersDataSource (which is fine, but feel free to rename this if you wish).

Once you click the OK button, you can examine the contents of your Data panel, and you will see that your new Object Data Source is displayed, showing you the properties of the sub-object in the collection:

If you now examine the markup of your initial Window (or, if you are using a Silverlight project, your initial UserControl), you notice that the IDE has defined a new object resource which maps to your custom collection object:

   1: <Window.Resources>

   2:   <local:PurchaseOrders x:Key="PurchaseOrdersDataSource" 

   3:                         d:IsDataSource="True"/>

   4: </Window.Resources>

At this point, we can define a UI which will display the property values yielded from the object data source. Simply put, once you have established a data source via the Data panel, each aspect of the displayed tree can be dragged to the artboard to generate a new UI control which is automatically bound to the data store.

If you examine the top left area of the Data panel, you will notice two button controls. The left most button (selected by default) activates "list mode" of the currently selected data source. When your data source is configured in list mode, you can drag a given property or object from the Data panel, which will be displayed in a new ListBox control.

Assuming you are in the default "list mode", if you were to select the PurchaseOrders node in the Data panel and drop it onto your artboard, you would find a single ListBox control is added, which shows all properties for each object in the collection.

At first glance, it might not seem very useful to bind an entire collection of objects to a single ListBox, given that each list entry shows each object property value one after the other. While it is true that the currently displayed UI is not very helpful, WPF and Silverlight both support the ability to build data templates which can stylize how a data binding should be displayed in the destination control.

For example, we could create a data template such that we don't simply see stacks of string data, but additional bits of descriptive text, graphics, animations or what have you. Essentially, anything you would do when building a control template can be done within a data binding operation. We will look at this aspect of data manipulation in a later blog post.

Until then, you might wish to display your data in a more directly useful UI object, such as a DataGrid control. Locate the DataGrid control within your Assets Library, and draw one on your artboard. Next, select the PurchaseOrders node in your Data panel (not the individual properties beneath this node) and drag it onto the new DataGrid object. Once you do, you?ll see that the content of your collection is automatically displayed:

In the previous screen shot, you'll notice I have a set of additional ListBox control's each showing a single property from our collection.

If you were to drag an individual property from the Data panel to the artboard, there will be a new ListBox (assuming you are in the default "list mode" of the Data Panel) which displays the selected property value of the data source. For example, let?s say that you wanted to define three ListBox controls which will hold the property values for each PurchaseOrder object in your collection.

To do so via Blend, select the Amount property in the Data panel with your mouse, and drag it onto the artboard for your current Window. You?ll see that when you drag over a single property, the IDE automatically generates a new ListBox. Here is my artboard after I dragged the Amount, Description and TotalCost properties:

So there you have it!  So far so good. In the previous two blog posts, you have seen how Blend can be used to connect UI and non-UI properties to various controls.

We will look at additional features of data binding, and how Blend can simplify matters, as we progress over the next several posts.

Happy coding!