Article
11/17/2011

Walkthrough: Using Sample Data in the Silverlight Designer

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This walkthrough shows you how to use sample data in the Silverlight Designer for Visual Studio 2010 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 Silverlight Designer.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio 2010.

Creating the Project

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

To create the project

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

MainPage.xaml opens in the Silverlight Designer.

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.

' The Customer class defines a simple Customer business object.
Public Class Customer
    Public Property FirstName As String
    Public Property LastName As String
    Public Property CustomerID As Guid
    Public Property Age As Integer
End Class

' The CustomerCollection class defines a simple collection
' for Customer business objects.
Public Class CustomerCollection
    Inherits List(Of Customer)

End Class

using System;
using System.Collections.Generic;

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.

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.

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 MainPage.xaml in the Silverlight Designer.
In XAML view, add the following namespace mapping to the UserControl start tag. For more information, see Silverlight XAML Namespaces, and Mapping XAML Namespaces as Prefixes.
```
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 Alignment in the Silverlight Designer.
From the Toolbox, drag a StackPanel control into the top row.
In XAML view, replace the StackPanel element with the following XAML.
```
<StackPanel  Grid.Row="0"
  d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}">
</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 Silverlight 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 inheritance 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.

Tip:
You can also right-click the row to display the menu.

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.
In XAML view, replace the DataGrid element with the following XAML.
```
<sdk: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.