[2009.06.10] Visual Studio 2010 B1, WPF and XAML Improvements

I have been playing with Visual Studio 2010 Beta 1 for a couple of days now and while the feature list of this release is enough to write a book about, I will briefly look at how the new design surface has improved support for WPF, namely in the XAML area. Especially cool is XAML IntelliSense and a more visual way to do data and template bindings (like in Expression Blend 2).

WPF 3.5 gave us the Document Outline mode which becomes invaluable once your interface gets crowded and it becomes a mission to select and move the correct element around. This feature is enabled via a small icon at the start of the bread crumbs pane in both Visual Studio 2008 and Visual Studio 2010.

Fig.1 Document Outline

Improvements

[1] XAML Intellisense

This is one area where additional IntelliSense is most welcome. Since I prefer to code in XAML rather than use the Properties pane or even in the code behind, I usually have to remember exactly what is it I am trying to do. This is all well and good but there are times when it is tedious.

Let's say you have an element and you want to bind to one of it's properties. For instance, bind the Content of a Button to the Content of a Label. We know the general syntax will be Content="{...". This is where the first little surprise hits you in VS2010. As soon as you type in the left curly brace, {, VS automatically adds the accompanying right brace, } and pops open the IntelliSense menu to associate with the property you are interested in adding an extension expression to as in Fig. 2. Now you can quickly select whatever you want to add to the property.

Fig.2 Auto braces and extension XAML IntelliSense

[2] Explicit ResoureKey Attribute

Another new feature is the explicit ResourceKey attribute used when binding to an resource. To apply a resource to a property, in VS2008, you can do something like:

Here, scb2 is the key used to identify the resource. Note here, we do not have any attribute explicitly stating that this is a resource key. However, in VS2010, as soon as you make a binding to a resource, IntelliSense pops up and ask you for a ResourceKey.

Fig.3 Explicitly asking for a resource key

[3] Visual Data and Template Bindings

The final addition I will make a note of is the new visual way to bind properties. In VS2010, in the Properties pane, you will notice that each property has a little icon at the end of their names, indicating that it can be expanded to the Advanced Properties menu. This pops up a list with actions you may want to perform on this property. The options which are self explanatory are:

• Reset Value
• Apply Data Binding...
• Apply Resource...
• Extract value to resource...

The best way to see how cool and simple bindings have become in XAML is by example. Here I will show Element-Element property binding, but I will do a post on Data Binding which will highlight other forms of bindings. Here, I will bind the Content of a Label control to the Text property of a TextBox control. Right now, the only XAML I have looks like:

Now I will select the Label in my Document Outline which will make Content be automatically selected and highlighted in the Properties pane. Click the Advanced Properties button, select Apply Data Binding... and you will see Fig. 4.

Fig.4 Binding options

In order to bind to the Content property of the Label control, we have to set at least two properties - Source and Path. First, you can see how the Source can be set from Fig. 5. First, select what you are binding to, in this case it is the ElementName and select the Name of the control. Notice the third pane says that you need to set the Path also.

Fig.5 DataBinding - selecting the Source

Now, click the Path submenu and choose the appropriate property to bind to, which is Text in this case. Simply click away from the binding window to close it and ... BOOM! all bindings were taken care of without typing in any XAML code. Now that's cool and definitly prevents typos.

Fig.6 DataBinding - selecting the Path

If you want to set other properties such as Mode and UpdateSourceTrigger you can do this from the Options menu as in Fig. 7.

Fig.7 DataBinding - additional options

Happy bindings!