Chapter 10

Working with Data

After completing this chapter, you will be able to:

  • Generate sample data.
  • Use styles and templates on data display controls.
  • Work with sample data.
  • Bind object properties to data.
  • Change data templates.
  • Use element property binding.
  • Use Master/Detail scenarios to display data.
All applications use and interact with data in various ways. Internal data (data that exists within the application) can be based on user history or values that a user enters into a form. Some applications use external data sources such as databases, web services, or different types of files. Usually, working with data is the job of database administrators and developers. Designers create an application's user interface and styles, and they build control templates to provide a particular look and feel that presents the data in a usable way. Expression Blend provides for a process called data binding, which is a way to automatically connect items from a data source to user interface components (controls), populating them with data without requiring custom code. Data binding tasks can be performed by various team members: developers, designers, or integrators. An integrator has knowledge of both design and development processes and works to connect user interface components to internal or external data sources.

Sample Data

With sample data sources you can populate your application with temporary (but realistic) data while you design the user interface—before the application gets connected to live data. The Expression Blend Data panel provides powerful tools for generating sample data for your application from existing XML files, classes, or instantly in real time.

Expression Blend supports sample data of various types, including:

  • String
    • This data type is used for string properties and can be used for formats such as addresses, colors, company names, dates, email addresses, names, phone numbers, prices, times, website URLs, and more. If you need abstract text for prototyping, you can use a Lorem ipsum format for the String type and apply Maximum word count and length values.
  • Number
    • This data type is appropriate for numeric properties such as IDs, counts, amounts, and similar data.
  • Boolean
    • This data type is used for control properties that take two values, such as check box and radio button properties.
  • Image
    • This data type is suitable when you need to bind images to controls. In Expression Blend, you can use your own pictures or you can generate sample images.

Sample Data in Expression Blend

Changing a Data Template

In the previous exercise, Expression Blend made some changes to the MainPage.xaml file after you dragged the Collection onto the Artboard to connect the data to the ListBox control. If you switch to Split view and select the ListBox control in the Objects And Timeline panel, you can see that its ItemsSource property is bound to Collection. The Data panel view has also changed.

Data Panel in Expression Blend

Data Binding

As a result of the data binding process, whenever the data changes, the interface elements to which the data is bound reflect those changes. You aren't limited to binding data to complete objects; you can bind data to specific properties of an object. The sample data source lets you simulate text values, images, colors, dates, and other property types. In this exercise, you'll see how to bind data to a specific control property.

Create Data Binding Dialog Box

Using a Master/Details Scenario to Display Data

The master/details scenario is an often-used screen pattern in efficient user interfaces. It allows the user to stay on one screen while still being able to navigate between items and view detailed information about selected items. You can create a master panel by using a list (ListBox), a tree (TreeView) or a DataGrid. The details panel displays the extended information and/or scaled image data for the item a user selects from the master panel.


You can easily make this a point to YOUR company OR hide it all together.