Walkthrough: Using Sample Data in the WPF Designer

Article
02/04/2013

This walkthrough shows you how to use sample data in the WPF Designer for Visual Studio to create data bindings at design time. With sample data displayed at design-time, you can ensure that your layout behaves correctly at run time. To make the sample data accessible to controls in the designer, you apply the DesignData build action to the sample data file and reference the file in the DesignData design-time attribute.

In this walkthrough, you perform the following tasks:

Create the project.
Create a Customer class business object.
Create XAML files that hold the sample data.
Bind TextBox and DataGrid and controls to the sample data.

When you are finished, you will have TextBox and DataGrid controls that are bound at design-time to sample data. The data binding is set in the WPF Designer.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio 2010.

Creating the Project

The first step is to create a WPF Application project and enable the design-time properties.

To create the project

Create a new WPF Application project in Visual C# named DesignDataDemo. For more information, see How to: Create a New WPF Application Project.

MainWindow.xaml opens in the WPF Designer.
In Design view, click the root size tag () at the lower-right of MainWindow to set the root size to auto size.

In XAML view, the designer adds the d namespace mapping, which enables accessing design-time properties like DesignInstance and DataContext.

Creating the Business Object

Next, create the business object. The business object is a simple Customer class that has FirstName, LastName, and CustomerID and properties.

To create the business object

Add a new class named Customer to the project.

Replace the automatically generated code with the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

Creating the Design-time Data Files

Define sample design-time data by creating instances of your business objects in a XAML file. You specify that the XAML file has sample data by setting the Build Action to DesignData.

The designer replaces the instances that you declare in the XAML file with automatically generated design-time types that have the same properties as your sample types. This eliminates run-time behaviors, such as database queries, that might interfere with the designer. These properties are read-only, and you set them in the sample data file.

Use the DesignDataWithDesignTimeCreatableTypes build action to override this behavior and indicate that the designer will create instances of your sample data types.

To create the design-time data files

In Solution Explorer, add a new folder named DesignData to the project.
In the DesignData folder, add a new text file named SampleCustomer.xaml.

SampleCustomer.xaml opens in XAML view.

Note

You can also use a resource dictionary.

Add the following XAML.

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

In the DesignData folder, add a new text file named SampleCustomers.xaml.

SampleCustomers.xaml opens in XAML view.

Add the following XAML.

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

In Solution Explorer, select both sample data files.
In the Properties window, set the Build Action to DesignData, ensure that Copy to Output Directory is set to Do not copy, and clear the Custom Tool field.

Note

For the Build Action, you can also select DesignDataWithDesignTimeCreatableTypes.

Setting the Design-time Data Context

To create a design-time data context that provides sample data, you use the d:DataContext design-time attribute with the d:DesignData markup extension.

To set the design-time data context

Open MainWindow.xaml in the WPF Designer.
In XAML view, add the following namespace mapping to the Window start tag. For more information, see How to: Import a Namespace into XAML.
```
xmlns:local="clr-namespace:DesignDataDemo"
```
Build the solution.
In Design view, add a horizontal gridline near the center of the Grid control to define two rows. For more information, see How to: Add Rows and Columns to a Grid.
From the Toolbox, drag a StackPanel control into the top row.
In XAML view, replace the StackPanel element with the following XAML.
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
This XAML establishes a design-time data context for the StackPanel and its child controls. Also, it makes the sample data available for data binding.

Binding to a Single Instance of Sample Data

You can bind to any property of the Customer instance in the SampleCustomer.xaml file. The following procedure shows how to bind the FirstName property to a TextBox control by using the data binding builder. For more information, see Walkthrough: Creating a Data Binding by Using the WPF Designer.

To bind a TextBox to sample data

From the Toolbox, drag a TextBox control into the StackPanel control.
In the Properties window, scroll To the Text property.
At the edge of the left column, click the property marker ().

A menu appears.

Tip

You can also right-click the row to display the menu.
Click Apply Data Binding.

The data binding builder appears, with the Path pane open.
Click the FirstName property.
In Design view, note that the TextBox control displays the FirstName value specified in the SampleCustomer.xaml file.

Binding to a Collection of Sample Data

The following procedure shows how to bind a DataGrid control to a collection of Customer objects in the SampleCustomers.xaml file.

To bind a DataGrid control to a collection of sample data

From the Toolbox, drag a DataGrid control into the second row of the grid and size it to fill the row.
In XAML view, replace the DataGrid element with the following XAML.
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
This XAML establishes a design-time data context for the DataGrid and makes the sample data available for data binding.
Select the DataGrid.
In the Properties window, scroll to the ItemsSource property.
At the edge of the left column, click the property marker ().
Click Apply Data Binding.

The data binding builder appears, with the Path pane open.
In Design view, note that the DataGrid control is populated with the Customer instances in the SampleCustomers.xaml file.