Displaying data

Article
10/10/2017

Data is the heart of every user interface. From hotel reservation websites to stock market visualizations, user interfaces generally let you 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 have 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 have to access external data sources, such as databases, web feeds, web services, or local files that contain information. Microsoft Expression Blend supports the following types of data sources:

XML data source A local or remote XML file that can supply data to your application in XML format. You can use an XML file that you have added to your project, or you can set the data source to the URL of an XML file on a website.

For more information, see Use a live XML data source.

Note

Microsoft Silverlight does not support live XML data sources. However, you can find information about working with XML data under Parsing XML Data in Silverlight on MSDN.
Object data source An object that contains public properties to which you can bind your target properties. For WPF applications, you can use a Microsoft .NET Framework class library that converts data from a database to an ObservableCollection.

For more information, see Use an object data source to connect to a database and Try it: Display data from a sample SQL database, or see the Data Binding Overview topics on MSDN. For Silverlight applications, see Silverlight Data Binding on MSDN.

Note

Microsoft Expression Blend does not support a CLR object data source class that includes parameters in the constructor.
Sample data sources A set of local files that you create by using the Create sample data tools in the Data panel. Because you cannot see external data on the artboard, Expression Blend supports sample data that you can use while designing your application.

For more information, see Creating sample data.

A list of data sources in the Data panel

Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(en-us,Expression.40).png

Data sources that are associated with the active document in Expression Blend are listed under This document in the Data panel. Data sources that are available to all documents in a project are listed under Project in the Data panel. You can create data sources by using the buttons at the top of the Data panel. You can drag data items onto the artboard to create controls that are data-bound to the items.

For more information, see Displaying data in controls.

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 or smaller.

Expression Blend provides a simple and consistent way to bind the objects in your application to different data sources, and to configure the objects 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 options button Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.40).png that is associated with properties in the Properties panel, or by dragging items from the Data panel to the artboard.

For more information, see Bind an object to data.

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

Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(en-us,Expression.40).png

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

Data Field This option presents the XML and CLR object data sources created in the project, and their associated fields. You can add a new XML data source or CLR object data source, or use existing connections that have already been created. To select a field to bind to, select an item under Data sources, and then select a data item from under Fields. The type of the data item must match the type of the property to which it is being bound unless you have a value converter that you can apply (see "Advanced Options," later in this topic). After the data binding is created, the value of the property of the target is populated with the data item.
Element Property This option enables binding one property of an object to another property of the object in the same Extensible Application Markup Language (XAML) file, similar to binding the Width property of a rectangle to the Value property of a slider bar in the example mentioned earlier in this topic. To create this binding, do one of the following:
- Locate the target property (in this case, the Width property of a rectangle) in the Properties panel, click Advanced options , and then click Data Binding. Click the Element Property tab, browse the objects in the left pane to locate the slider bar (source object), and then browse the list of properties in the right pane to find and select the Value property.
- Locate the target property (in this case, the Width property of a rectangle) in the Properties panel, click Advanced options , and then click Element Property Binding. Note that the cursor has changed to the ****Artboard Element Picker ****. Click the object on the artboard to which you want to bind the property. In the Create Data Binding drop-down box, select the Value property.
Explicit Data Context This option lets you bind to a data source in the context that is specified for the current object or one of its parents. A data context is a convenient way to share data between multiple controls by establishing a scope within which all data-bound properties inherit a common source. For instance, you can assign a data context to a grid object that contains a ListBox object and a TextBlock object, and bind properties of both objects to different data items in the same context. This is useful when you want to create a list-details design, in which, if you click an item in a list (the list pane), the information about that item appears in another object (the details pane). The Fields pane in the Explicit Data Context tab lists the data connection fields that are available from the inherited data context, from which you can select the appropriate one for the target property.

You can also access data context information in the Data Context category at the bottom of the Data panel. If an object that is selected on the artboard is data-bound, the Data Context category displays either the data context property (DataContext) or the design-time data context property (d:DataContext) for the current selection or scope.

The Data Context category displays changes when you switch between List Mode and Details Mode in the Data panel. You can also create a data binding by dragging the data that you want directly from the Data Context category onto an element on the artboard.

Note

You can type a custom path or an XML Path Language (XPath) expression for your data binding. The XPath field is automatically populated with the path of the item that you select under Fields. However, you can append to the path to narrow the data that you bring in from the data source, for example by identifying specific nodes in the XML data that you want, such as one item in an array. For more information about how to use XPath, see the topics XPath Syntax and How to: Bind to XML Data Using an XMLDataProvider and XPath Queries on MSDN.
Show advanced properties The advanced properties section of the dialog box, which you can access by clicking the bottom expander , enables the setting of advanced properties such as the direction of data flow (see "Data flow," later in this topic), a default value for the target property, and a value converter and converter parameter. Value converters are .NET Framework class methods that are used to convert values from one type to another, and that are needed when the source and target properties have mismatching types. You can add a value converter by clicking Add new value converter next to the value converter box, and then selecting one from the Add Value Converter dialog box. You can also specify a converter parameter (for example, to convert from double to decimal, you may have to specify a value for the number of digits to show after the decimal points).

For an example of a value converter, see Try it: Convert data from one type to another.

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 need only one-way binding, from the slider bar (source) to the rectangle (target). The following binding configurations for data flow are supported:

Default The default setting is OneWay. Changes that are made to the source automatically update the target, but changes to the target don't update the source.
OneWay Changes that are made to the source automatically update the target, but changes to the target don't update the source.
TwoWay Changes that are made to the source automatically update the target, and vice versa.
OneWayToSource Changes that are made to the target automatically update the source, but changes to the source don't update the target. This is the reverse of OneWay. This is useful in special cases when you can't see the target property in the Properties panel, which can occur if it is not a dependency property. OneWayToSource binding would let you set the data binding on the target instead. This option is not supported in Silverlight projects.
**OneTime **No changes are made. The target is set to the value of the source when the application is initialized. The target is not updated after that.

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

Illustrating data flow through binding types

Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(en-us,Expression.40).png

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

In the Properties panel, click the Advanced options button that is associated with the Text property (under Common Properties) of the TextBox, and then click Data Binding.
In the Create Data Binding dialog box that appears, in the Element Property tab, select the Value property of the Slider node.

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, typing 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 typed in the text box after the mouse clicks outside the text box.
OneWayToSource	Typing a number in the text box (target) and then clicking outside 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 typing a number in the text box will not update the slider bar at all.

For a procedure that illustrates this scenario, see Bind an object to user input or to other internal values.

Methods of binding to 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:

Binding an existing control If the control is already in the document, you can bind it to the data by dragging the data node from the Data panel onto the control. A message will appear as you drag the data node to let you know which property of the object the data will be bound to.

If you want to specify a different property, you can press the SHIFT key before you release the mouse button.
Creating a new control You can drag any data node from the Data panel into a document. This option will insert a new control into the document.

For more information, see the following topics:

Workflow 2: Binding from the target to the source

While the previous workflow always started 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 want to bind to your data source, or to another property of the control. This workflow is especially helpful in object-to-object binding.

For more information, see Bind an object to user input or to other internal values.

Next to each property value editor in the Properties panel, you will find an Advanced options button Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.40).png that lets you set Advanced 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

You may 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 the Data panel onto a DataGrid control, your data is displayed in objects whose template can be modified.

For examples of modifying data templates, see the following topics:

Data templates are stored as resources, just like any other style or template. 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.

Data behaviors

In addition to being able to drag properties onto the artboard to bind to an existing object, create a new bound object, or set a design-time data context, you can also drag commands and methods from the Data panel onto objects on the artboard.

When you drag a command onto an object, Expression Blend creates an InvokeCommandAction action to invoke the command. You can then configure how the object will trigger the command in the Properties panel. Similarly, when you drag a method onto the artboard, Expression Blend creates a CallMethodAction action that can be configured in the same way.

For more information about InvokeCommandAction and CallMethodAction, see InvokeCommandAction and CallMethodAction.