XAML: Intellisense for Bindings And the Data Context

Posted Fri, Nov 1 2013 13:39 by Deborah Kurata
The new Intellisense for Binding expressions in Visual Studio 2013 (introduced in this prior post) provides a quick and effective way to add property bindings to your XAML. But it doesn't "just work". You have to set the Data Context to enable Intellisense.

To get Intellisense to work with Binding expressions, you need to provide Intellisense with a design-time instance of the class containing the properties for the binding. This is done through the Data Context.

If your XAML-based application uses the Model, View, View-Model (or MVVM) pattern, the Data Context is set to an instance of the View-Model.

There are several options for where and how you set the Data Context to an instance of the View-Model, depending on the framework you are using (if any) and your approach.

One option is to set the Data Context directly in the page as shown below:

image

In this example, the Data Context is set to the View-Model directly in the XAML. The vms prefix in the code above is the abbreviation set for the View-Model namespace.

By setting the Data Context for the page directly in the XAML, an instance of the View-Model is constructed when the page is displayed in the designer. So the Intellisense has an instance of the class at design time that it can use to determine the bindable properties. You also get the added benefit of design-time data, as shown below.

image

Alternatively, you could set the Data Context in the code behind or use a factory pattern. But if you use any technique other than setting the Data Context within the XAML, Intellisense won't have a design-time Data Context and therefore won't display the list of bindable properties.

If you don't have the Data Context defined within the XAML, but still want the benefits of Intellisense and design-time data, you can set up a design-time only Data Context instance. This is shown in the example below.

image

The d: prefix is for design-time only features. You may have used it to define the DesignHeight and DesignWidth of a page as shown in the Page markup tag above.

Assigning a value to the d:DataContext sets the design-time Data Context and enables basic Intellisense for Binding expressions.

In this example, the design-time Data Context is set to d:DesignInstance with a Type set to vms:CustomerListViewModel. This is the same View-Model used in the first example above.

The IsDesignTimeCreatable=true attribute ensures that an instance of the type is created at design time. By adding this attribute, the Intellisense will display all of the bindable properties. In addition, you get design-time data.

Use one of these techniques to take advantage of Intellisense for Binding expressions (and design-time data).

Enjoy!

For more information on the many new Visual Studio 2013 features, including a step by step walk through of the design-time Data Context, check out my new Pluralsight course: Mastering Visual Studio 2013.

Filed under: , , , ,

Comments

# Visual Studio 2013: XAML Code Editing

Friday, November 01, 2013 3:41 PM by Deborah's Developer MindScape

If you have done any coding with XAML, like me you have probably wished for some of the code editing

# XAML Intellisense

Monday, November 04, 2013 9:52 AM by Deborah's Developer MindScape

In Visual Studio 2013, there were quite a few changes/enhancements to XAML Intellisense. Prior posts

# XAML Intellisense

Monday, November 04, 2013 9:55 AM by Deborah's Developer MindScape

In Visual Studio 2013, there were quite a few changes/enhancements to XAML Intellisense. Prior posts

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: