Visual Studio 2013 XAML Editor Enhancements

Visual Studio 2013 has some really nice new enhancements. Once I imagined how cool it would be if I can directly F12 on XAML resources and it would take me to its definition in some XAML file or if I get intellisense prompt right in XAML for the binding that I am wiring up!

All these and many more are now possible with new XAML editor in  Visual Studio 2013 as they finally heard the voice of developer community. I just setup my other dev machine with Visual Studio 2013 and while I was writing code for binding, I saw intellisense popped up and it made me dig deeper into new features for XAML editor that this Visual Studio version brings and come up with this article. Let's me show you few of them one by one.

Intellisense support for data binding markup
To demonstrate this, I quickly wired up one view model with few properties and set data context in XAML as following. As soon as I type Binding and space, I get this intellisense support. This is really a good feature for a person who is beginner to XAML binding and it could few hours of debugging that one has to do when there is typo mistake in binding CLR property names.



Figure 1.0 Intellisense support in xaml data binding

Note that as per Figure 1.0, the same intellisense support is available with DesignTime DataContext as well.

Go to definition (F12)
As you see in Figure 1.0, if you keep cursor on personVM where DataContext  is set and hit F12, it would take you directly to the location where the resource defined. In our case, it is App.xaml. This F12 thing works for system type as well custom control type also.




Figure 1.1 GoTo Definition support in xaml

Smart start/end tag refactoring
Remember changing any xaml element (control) start tag and then scrolling down to bottom to change it's end tag as well? The new editor is smart that it automatically updates the start or end tag of a XAML element while you are editing its corresponding start or end tag. Moreover sometimes I do use ‘/’ character in start tag to keep XAML more readable and neat. If you do so in existing element where it is having start/end tag, it will automatically remove the corresponding end tag! To better demonstrate this, I decided to put up swf video as following.
http://www.swfcabin.com/open/1388431198
Video 1.0 Smart start/end tag refactoring

XAML code snippet insertion
Code snippet insertion is widely used feature in any language in Visual Studio. Now it has come to XAML. When you right click on xaml editor, you will see two options in context menu as following figure.


Figure 1.2 XAML code snippet options

As per Figure 1.2, the “Insert Snippet” and “Surround With” commands can be used for this purpose.
You can manage your XAML code snippet using the Code snippets manager window that you can access from Tools menu.


Figure 1.3 Code snippets manager window

The Code snippets manager windows is where you can have available XAML code snippets or you can add/manage yours. As of writing this article, I do not see any inbuilt XAML code snippets. Perhaps it may come in future release/service packs.

Moreover, you can suggest/request an improvement or feature at this link.
http://visualstudio.uservoice.com/forums/121579-visual-studio/category/44115-xaml-tools

By jay nanavati   Popularity  (3907 Views)