Compartilhar via


Displaying data

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 Add sample data source 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.30).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 Application 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 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 button Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).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.30).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 element to another property of the element 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, locate the target property (in this case, the Width property of a rectangle) in the Properties panel, click Advanced property options Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png, and then click Data Binding. Click the Element Property tab, navigate the elements in the left pane to locate the slider bar (source element), and then navigate the list of properties in the right pane to find the Value property.

  • Explicit Data Context   This option lets you bind to a data source in the context that is specified for the current element 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 master-details design, in which, if you click an item in a list (the master 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.

    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.

  • Advanced Options   The advanced options section of the dialog box, which you can access by clicking the bottom expander Cc295161.de239c9d-42ce-4f5e-83b9-5f9924c0431f(en-us,Expression.30).png, enables the setting of advanced options 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 Cc295161.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(en-us,Expression.30).png 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   Changes that are made to the source automatically update the target, and vice versa.

  • 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.30).png

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

  1. In the Properties panel, click the Advanced property options button Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png that is associated with the Text property (under Common Properties) of the TextBox, and then click Data Binding.

  2. 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.

    Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(en-us,Expression.30).png

    If you want to specify a different property, you can press the SHIFT key before you release the mouse button.

    Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(en-us,Expression.30).png

  • 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 element-to-element 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 property options button Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png that lets you 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

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.

See also

Concepts

Styling objects

Arranging objects