Article
11/17/2011

Walkthrough: Using a DesignInstance to Bind to Data in the Silverlight Designer

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

This walkthrough shows you how to use the Silverlight Designer for Visual Studio 2010 to create data bindings at design time for a data context that is assigned at run time. To create the data binding, you use the data binding builder to create a special design-time data context and set the DesignInstance to a business object type. DesignInstance is a design-time property.

In this walkthrough, you perform the following tasks:

Create the project.
Create a Customer class business object.
Data bind a TextBox control to a design-time instance of the Customer class in a data context.

When you are finished, you will have a text box that is bound at run time to a business object. 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 DataBindingDemo. 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 and LastName properties.

Note:
The business object type is not required to be creatable for use in design-time data binding. For example, you can bind to an abstract class at design time.

To create the business object

Add a new class named Customer to the project. For more information, see How to: Add New Project Items.

Replace the automatically generated code with the following code.

Public Class Customer
    Public Property FirstName As String
    Public Property LastName As String
End Class

namespace DataBindingDemo
{
    public class Customer
    {   
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Setting the Design-time Data Context

To create data bindings by using the data binding builder, you create a special design-time data context and set the DesignInstance to the business object type.

To set the design-time data context

Open MainPage.xaml in the Silverlight Designer.
In XAML view, add the following namespace mapping to the opening tag of MainPage. For more information, see Silverlight XAML Namespaces, and Mapping XAML Namespaces as Prefixes.
```
xmlns:local="clr-namespace:DataBindingDemo"
```
Replace the opening tag of the Grid element with the following XAML.
```
<Grid x:Name="LayoutRoot" Background="White" 
  d:DataContext="{d:DesignInstance Type=local:Customer}">
```
This XAML establishes a design-time data context and makes the Customer class available for creating data bindings.
Build the solution.

Creating the Data Binding

Now you can create data bindings to the Customer business object by using the data binding builder. The following procedure shows how to bind a TextBox control to the FirstName property of a Customer object.

To create the data binding

From the Toolbox, drag a TextBox control onto the design surface.
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 FirstName and press ENTER.

In XAML view, Text property has a data binding to the Customer type's FirstName property.

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

Setting the Run-time Data Context

Finally, you assign the run-time data context. The data binding you created at design time works at run time without any changes in XAML or code.

To set the run-time data context

Open MainPage.xaml.vb or MainPage.xaml.cs in the code editor.

Replace the automatically generated MainPage constructor with the following code.

Public Sub New()
    InitializeComponent()
    Dim c As New Customer
    c.FirstName = "Brenda"
    c.LastName = "Diaz"

    Me.LayoutRoot.DataContext = c
End Sub

public MainPage()
{
    InitializeComponent();

    Customer c = new Customer();
    c.FirstName = "Brenda";
    c.LastName = "Diaz";

    this.LayoutRoot.DataContext = c;
}

Press F5 to run the application.

The text box displays the first name of the Customer object that was created at run time.

Next Steps

You can bind to sample design-time data, which helps you construct correct layout behavior at run time when your actual data is available. For more information, see Walkthrough: Using Sample Data in the Silverlight Designer.