Content Index Search
 

Data overview

Data is the heart of every user interface. From hotel reservations to stock market visualizations, user interfaces generally provide a way to visualize and interact with some form of data. The choice of which user interface components you use, and how you lay them out to provide a useful workflow, relies heavily on the nature of the data that you will be working on.

Data sources

Your application might need to work only with internal data sources, perhaps performing calculations on some numbers that a user has entered into a form. Other applications that you create might need to access external data sources, such as databases, Web feeds, Web services, or local files that contain information. And in some cases, applications might need to access both internal and external data sources. Microsoft® Expression Blend™ currently supports two types of external data sources: XML and CLR Object.

List of data sources in Project panel

A list of data sources in the Project panel of Expression Blend.

External data sources that are associated with the active document in Expression Blend are listed under Data in the Project panel. You can use the buttons 1 to add and remove data sources, and you can drag data items 2 onto the artboard to create controls that are data-bound to the items. If no data are sources set up, Data in the Project panel only displays the buttons that are used to create a data source.

Data binding

Data binding is the process of connecting items in a data source to user interface components (controls). This means that whenever the data changes, the interface components will optionally reflect those changes, and vice versa. The simplest example of data binding would be a slider bar control that is internally bound to the width of a rectangle. Moving the slider bar would scale the rectangle larger and smaller.

Microsoft Windows® Presentation Foundation and Expression Blend provide a simple and consistent way to bind the elements in your application to different data sources, and to configure the elements that display the data and modify the data. A binding is essentially constructed between a source and a target. The source is typically a data source or another control, and the target is a control. In the slider bar example, the source is the Value property of the slider bar control, and the target is the Width property of the rectangle.

You can create bindings by using the Advanced Property Options Advanced property options button that is associated with properties in the Properties panel, or by dragging items from under Data in the Project panel to the artboard. (For instructions, see Bind data to a property or element.) Both options open the Create Data Binding dialog box to enable the creation of binding links between a control (the target) and a data field or other control (the source).

The Create Data Binding dialog with the Advanced Options section expanded

The Create Data Binding dialog with the Advanced Options section expanded.

The Create Data Binding dialog box presents three basic options to select a data source, as well as advanced options:

Data flow

Data flow is defined as the direction in which your data flows between the source and the target. In the case of the slider bar that scales a rectangle, you would only need one-way binding, from the slider bar (source) to the rectangle (target). Windows Presentation Foundation provides the following binding configurations for data flow:

To see data flow in action, consider the following example user interface that contains a Slider control (source) and a TextBox control (target):

Text box and slider

Illustrating data flow through binding types.

In the example illustration above, the binding is set on the text box (target) by using the following procedure:

  1. In the Properties panel, the the Advanced Property Options Advanced property options button that is associated with the Text property (under Common Properties) of the TextBox is clicked, and Data Binding is selected.
  2. In the Create Data Binding dialog that appears, the Element Property tab is selected, and the Value property of the Slider is selected.

The following table describes the binding behavior for this example, depending on the binding type:

Binding type Result

OneWay

Moving the slider bar (source) will update the text box (target). However, entering a number in the text box does not move the slider bar.

TwoWay

Moving the slider bar (source) will update the text box (target). Additionally, the position of the slider bar will change when a number is entered in the text box after the mouse clicks outside of the text box.

OneWayToSource

Entering a number in the text box (target) and then clicking outside of the text box will move the slider bar (source). However, moving the slider bar will not update the text box.

OneTime

The initial value of the slider bar (source) will update the text box (target) when the application starts. Subsequent changes to the slider bar will not update the text box, and entering a number in the text box will not update the slider bar at all.

Methods of binding to external data sources

Workflow 1: Binding from the source to the target

After your external data source is created, you can bind that data source to user interface controls. There are two approaches to accomplish this:

Whether you choose to bind an existing control or create a new one, the Create Data Binding dialog box opens, so that you can select the field that you would like to bind to the data source. For instance, if you create a binding by dragging a data item that is a string onto a TextBox, you will probably want to bind to the Text field (which selected by default) of this node. You can also specify additional binding settings by clicking the expander Expand Category button in the dialog box. Click OK to close the dialog box and create the binding. If the data is available at design time, the value of the selected field should update the control. For instructions, see Bind data to a property or element.

If the data item is a collection of items (an Array), or if the data item does not exactly match the target type, the Create Data Template dialog box will open so that you can choose specific controls to display your data. For more information, see Data templates later in this topic.

Workflow 2: Binding from the target to the source

While the previous workflow started always from the data source and ended at the target control, you can reverse the process if you have already created the control and know which property you would like to bind to your data source, or to another control’s property. This workflow is particularly helpful in element-to-element binding.

Next to each property value editor in the Properties panel, you will find a Advanced Property Options Advanced property options button that allows you to set Advanced Property Options, including data binding. Clicking Data Binding on the advanced options menu will open the same Create Data Binding dialog box as is described in Workflow 1 earlier in this topic.

Data templates

Often times, you will find yourself in a situation where you want to display a list of items from your data source. A data item that contains a list of items is identified by "(Array)" in the item name. When you drag a list node from under Data in the Project panel into a document and select ListBox from the list of optional controls to bind to, you will be presented with an additional dialog box titled Create Data Template that lets you design the data template. This dialog box might also open when you are binding text controls to data items that are strings.

A data template defines the structure and format in which you would like your data to be represented. For instance, if you are binding the ItemsSource field of a ListBox control to a list of contact nodes in your data source, the data template is your way of specifying which fields from this list you will include, and what controls should be assigned to each field. You might choose to represent a name as a TextBlock, a picture as an Image, and a Boolean field such as IsCurrentMember as a CheckBox. Creating a data template ensures that the data in your connection nodes translates into the visual format that you desire. The template allows very fine-grained control over how arbitrary data is displayed in the control.

Note Only Content and ItemsSource properties support data templates.

In the Create Data Template dialog box, you have the option to:

Use the Preview pane to determine whether you like the look of your template.

Create Data Template dialog box

The Create Data Template dialog box.

Data templates are stored as resources. If you want to modify an existing data template, you can click the Edit resource button next to the data template in the Resources panel. Expression Blend will enter template editing mode and will display the structure of your template under Objects and Timeline. In this editing mode, you can add controls to your template and use data binding from the Properties panel to bind the properties of those controls to new items from the data source.