The WPF, Silverlight and Silverlight for Windows Phone 7 APIs all provide a number of data binding options, which can be established using XAML or code (or both).

Simply put, data binding is the act of connecting an object?s properties to user interface elements. By doing so, you can simplify your coding efforts, as the UI will automatically display the current state of the properties which they are connected to. Consider the following examples:

• You could bind the value of a Boolean class property to a CheckBox
• You could fill a DataGrid object with data contained in a custom collection
• You could populate a set of ListBox objects with values from an XML document

In this blog post, I'll point out how Expression Blend can be used to quickly bind object properties to other object properties via the Properties window. This technique can be very useful when you want to ensure a set of controls refresh their values based on user selections.

Assume you have a WPF window which maintains two Slider controls with descriptive labels. The markup would be something like so (take a note of the configuration of each Slider.

   1: <StackPanel HorizontalAlignment="Left" Margin="28,40,0,0"           

   2:             Orientation="Vertical" 

   3:             VerticalAlignment="Top" Width="248">

   4:   <StackPanel Height="33" Orientation="Horizontal" 

   5:               d:LayoutOverrides="Width">

   6:     <Label Content="Height" Width="61"/>

   7:     <Slider Width="187" Maximum="200" Minimum="10"/>

   8:   </StackPanel>

   9:   <StackPanel Height="33" Orientation="Horizontal" 

  10:               d:LayoutOverrides="Width">

  11:     <Label Content="Width" Width="61"/>

  12:     <Slider Width="187" Maximum="200" Minimum="10"/>

  13:   </StackPanel>

  14: </StackPanel>

To complete the initial user interface, draw a graphic of your choosing on your artboard. Here, I chose to make use of the Triangle geometry found within the Shapes section of the Assets Library:

When you wish to use Blend to bind values from one control property to another, your first step is to select the control which will be the target (aka, the destination) of the data binding operation (the triangle in this example). Select this UI element on your artboard now, and then locate the Height property in the Appearance section of the Properties panel. Once you have done so, click on the Advanced Options button (the small square icon) to the right of the Height property:

From here, select the Data Binding menu option:

You will now be presented with the "Create Data Binding" dialog box. As you can see, this dialog has three tabs mounted on the top, which allow you to three different types of data sources. In a nutshell, your options break down as follows:

• Data Field: This tab can be used to select a .NET object or XML document data as the source of data.
• Element Property: This tab allows you to select a UI object property as the source of data.
• Data Context: This tab allows you to select from a data context already defined in your application as the source of data. As clarified later, a "data context" allows a parent container (such as a layout manager) to define a data source which all child elements can use free of charge.

For this example, select the middle "Element Property" tab. As mentioned above, this tab is where you can "connect" a source object's property value to the destination you selected on the artboard. Using the tree view on the left, locate the first Silder object. Then, using the tress view on the right, find the Value property:

Once you have clicked the OK button of this dialog, repeat the process just explained to bind the Width property of your shape to the Value property of the second Slider control. Now, if you run your application, you should find that you can change the size of the shape by moving the sliders! You might want to change the Minimum and Maximum values of each Slider object and observe the new behavior.

Now, if you select the shape geometry and examine the Properties panel, you will see that the Height and Width properties are surrounded by a yellow bounding box. This is Blend's visual cue that informs you these properties are being set by a data binding operation:

If you open the XAML editor, you can see what the Create Data Binding wizard has done on your behalf. Notice how your destination object (the geometrical shape) makes using of a XAML markup extension named {Binding}. The markup extension has two key components. First, we find the name of the source property (the Value property of the Slider objects). Second, we have the ElementName attribute, which specifies the name of the source object (the two Slider objects):

   1: <ed:RegularPolygon Fill="#FFAD0BAF" HorizontalAlignment="Right" 

   2:     InnerRadius="1" Margin="0,55,80,123" PointCount="3" 

   3:     Stretch="Fill" Stroke="Black" 

   4:     Width="{Binding Value, ElementName=slider1}" 

   5:     Height="{Binding Value, ElementName=slider}"/>

Sweet!  You can use this same general technique to connect properties for any two UI elements on the artboard.

In the next post, we will examine how Expression Blend can be used bind collections of custom objects to UI elements. See you then.