In my previous blog entry, I examined how the Blend IDE Data panel allows you to bind collections of custom objects to UI elements. Recall the previous PurchaseOrder and PurchaseOrders classes:

   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: }

  15:  

  16: public class PurchaseOrders : 

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

  18: {

  19:   public PurchaseOrders()

  20:   {

  21:     // Add a few items upon startup.

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

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

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

  25:   }

  26: }

In this post, we will use these classes to generate a new data template. As you may know, data templates are very similar to the control template model in that they can be used to define how to render out look and feel of a given blob of XAML.  As the name implies, a data template allows you to define the look and feel of a data binding operation.

If you were to create a new WPF project with Blend (and insert the previous class definitions into your project), you can then create a new Object Data Source connection to your PurchaseOrders object as you did in the previous blog post and drag the PurchaseOrders node from the Data panel onto the Window's artboard.

At this point, you should see the same display as shown below. Recall that the IDE generated a default data template which is used by the ListBox to display each property value in a simple, un-styled TextBlock.

The generated XAML looks like so:

   1: <DataTemplate x:Key="PurchaseOrderTemplate">

   2:   <StackPanel>

   3:     <TextBlock Text="{Binding Amount}"/>

   4:     <TextBlock Text="{Binding Description}"/>

   5:     <TextBlock Text="{Binding TotalCost}"/>

   6:   </StackPanel>

   7: </DataTemplate>

When you wish to modify this default data template, you will first need to open the Resources panel and locate the template by name. Once you have done so, open it for editing.

Now, locate the Objects and Timeline editor and select the first TextBlock.

At this point, you are free to use the Properties panel to change any settings you wish in order to style the display how the Amount property of each object will be displayed in the TextBlock. By way of a few suggestions, change the Foreground property to a new color value, and maybe tinker with the font settings using the Text area of the Properties window. Here is how I configured my first TextBlock.

   1: <TextBlock Text="{Binding Amount}" Foreground="#FFE91616" 

   2:            FontWeight="Bold" FontSize="18.667"/>

Now, if you run your program, you will see that each Amount property is looking somewhat more interesting (granted, it is not ready for primetime).

You can use this general approach to set the look and feel of each UI element which makes up the data binding template. Of course, it would be more interesting if we were to add some composite content, graphics or animations to the data template. We will do that in the next post!

See you then.