Now that we have the ChatMessage and ChatSession objects defined, we can use them within Expression Blend to databind our UI controls. 

I introduced how data-binding in Silverlight and WPF work in my Tutorial 5: Using Databinding and the ListBox control to display list data post from last week.  In today's post we'll be using Expression Blend to wire-up the databinding expressions instead of manually typing them.  We'll start by using the "Data" panel under the "Project" panel inside Blend:

Figure 36

We'll click the "+ CLR Object" link in the "Data" panel to pull up a dialog that allows us to pick any .NET object to databind our UI controls against.  We'll use it to select the "ChatSession" object we just created:

Figure 37

This will cause the ChatSession object to be added to our Data tray, and expose its properties (and sub-properties) in a tree-view:

Figure 38

We can then bind any of our UI controls in the design-view to these properties by selecting them in the "Data" tray and dragging/dropping them onto the UI controls in the design-surface.  For example, we could replace the static "ScottGu" label with a {Binding RemoteUserName} databinding expression by dragging the RemoteUserName property from the Data tray on top of it:

Figure 39

When we drop the "RemoteUserName" property onto the TextBlock, Blend will prompt us like above to either Bind the property to the existing TextBlock, or create a new Control to represent the property.  If we choose the default (bind to the existing control), Blend will then ask us what type of binding expression we want:

Figure 40

We'll indicate we want a "OneWay" binding to the TextBlock's "Text" property.  When we click ok our control will be updated with a {Binding RemoteUserName} expression for its "Text" property. 

We can repeat this drag/drop interaction for the Image control (with the RemoteAvatarUrl property) as well as the ListBox (with the MessageHistory collection property).  When we are done Blend will show our "dummy" data within the design-view surface like so:

Figure 41

You might be wondering about the contents of the ListBox - why do the items show up as "ChatClient.ChatMessage"?  Well, right now the ListBox is binding to a collection of custom .NET objects and the "ChatClient.ChatMessage" string is the value being returned by calling "ToString()" on the ChatMessage instances.

We can modify this to look better by adding a <DataTemplate> to the ListBox like so:

Figure 42

Note: For the Blend 2.5 March preview release of Blend you have to define datatemplates in source-view.  In future preview releases you'll be able to use the designer to define them as well.  This feature is already available for WPF projects if you want to play with it: As a designer, you can interactively create the look of data with a full WYSIWYG experience. Just create a WPF project to try it out.  

Doing this will then cause our UI to look like below at design-time:

Figure 43

The benefit of having this "dummy data" show up at design-time is that it enables us to get a much better sense of what the UI experience will be like at runtime, and allow a designer (or a developer) to easily work on the UI without having to wait on the rest of the application to be built.