{"id":803,"date":"2013-08-09T09:00:00","date_gmt":"2013-08-09T09:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2013\/08\/09\/xaml-editor-improvements-in-visual-studio-2013\/"},"modified":"2021-07-28T05:33:02","modified_gmt":"2021-07-28T12:33:02","slug":"xaml-editor-improvements-in-visual-studio-2013","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/xaml-editor-improvements-in-visual-studio-2013\/","title":{"rendered":"XAML Editor Improvements in Visual Studio 2013"},"content":{"rendered":"

While many of you like creating XAML using our visual tools, many prefer creating XAML in the code editor as well. Your feedback was heard loud and clear and we have taken a crack at the top<\/a> XAML editor feature requests in Visual Studio 2013. This blog post describes the new editor features in detail and how you can use them!<\/p>\n

IntelliSense for Data Binding<\/h2>\n

IntellISense for properties of the current data context is now available in binding expressions. In order for the editor to resolve the properties we require the data context to be specified on the view and not set in code-behind. If you choose to specify the DataContext in code-behind you can set the design-time DataContext in the view and we will able to piggyback off that for resolving properties in binding expressions.<\/p>\n

Furthermore for getting binding IntelliSense in resources like data templates which may be defined in external resource dictionaries you can either choose to set the design time DataContext on the data template or if you navigate to the data template using Go To Definition (F12) we will do the work required to copy the right DataContext over. It saves you from having to explicitly set the design time DataContext on the data template.<\/p>\n

IntelliSense with resolved DataContext<\/h3>\n

\"IntelliSense<\/a><\/p>\n

IntelliSense with design time DataContext<\/h3>\n

\"IntelliSense<\/a>As you can see both ways of setting the DataContext result in the exact same intelliSense.<\/p>\n

Go To Definition<\/h2>\n

Go To Definition (F12)\u00a0 is now enabled on Resources (Local, System & Extension SDK), Bindings, Properties and XAML Elements (UserControls, CustomControls & System types). In the following section, let\u2019s look into the changes in more detail.<\/p>\n

Resource<\/h3>\n

Executing Go To Definition on a resource reference will navigate you to the definition of the resource. This works for local, system and resource references from extension SDK\u2019s. When applicable, designer is scoped into the resource on executing Go To Definition. This allows us to copy over the DataContext of the parent control, thus enabling IntelliSense for data bindings inside these resources.<\/p>\n

For example, let\u2019s say you call Go to Definition on ApplicationPageBackgroundThemeBrush:<\/p>\n

\"Image<\/a><\/p>\n

Notice that you are taken to the exact location where that resource was defined:<\/p>\n

\"exact<\/a><\/p>\n

System type<\/h3>\n

You can use Go to Definition on System or Extension SDK types. Doing so will navigate you directly to the Object Browser<\/a>:<\/p>\n

\"Object<\/a><\/p>\n

Local type (Custom control)<\/h3>\n

UserControl\u2019s and custom controls are generally composed of a type definition and a XAML file defining their look and feel. We wanted to make it super easy to navigate to both the type and the XAML file. Therefore when you call Go To Definition on either of these types we surface both the xaml file and its implementation in the Find Symbol Results window.<\/p>\n

For example, let\u2019s say we call Go To Definition on a custom control called CustomControl1:<\/p>\n

\"Go<\/a><\/p>\n

What gets returned are the results from Generic.xaml as well as CustomControl1.cs:<\/p>\n

\"Return<\/a><\/p>\n

Binding Expression<\/h3>\n

You can call Go To Definition on a binding expression. If the DataContext of a binding expression can be resolved, we enable direct navigation to the property definition in code (managed) or to the Object Browser<\/a> (native). When we are unable to resolve the DataContext of a binding expression, we do a full symbol search (only in managed projects) on the value of the Path property of the binding expression. These results are then surfaced in the Find Symbol Results<\/a> window.<\/p>\n

IntelliSense for Resources<\/h2>\n

While working with resources in the editor you end up switching back and forth between multiple documents to complete a simple resource reference. With IntelliSense for resources you no longer have to do that, resources in your project show up in IntellISense while completing markup extensions. The cases we addressed are:<\/p>\n

Setting Grid.Background to a System brush<\/h3>\n

\"Setting<\/a><\/p>\n

Setting TextBlockStyle to a System style<\/h3>\n

\"Setting<\/a><\/p>\n

Setting GridView.Style to a Local resource<\/h3>\n

\"Support<\/a><\/p>\n

Code Snippets<\/h2>\n

Code Snippets<\/a> have been a staple feature for all languages in Visual Studio. We have now added support for both \u201cInsert Snippet<\/a>\u201d and \u201cSurround With<\/a>\u201d commands in the XAML editor:<\/p>\n

\"clip_image022\"<\/a><\/p>\n

Snippets can be imported using the Code Snippets Manager<\/a>:<\/p>\n

\"Snippets<\/a><\/p>\n

As of now there are no snippets packaged with the product but we are planning to release some in the very near future. Stay tuned!<\/p>\n

Better commenting support<\/h2>\n

The XML standard does not support nested comments, but we have added support to ensure that the result of commenting a region of code which already contains comments will be standards compliant:<\/p>\n

\"Better<\/a><\/p>\n

IntelliSense matching<\/h2>\n

We have updated IntelliSense matching support in the XAML editor to include camel case, substring and fuzzy matching.<\/p>\n

Fuzzy matching<\/h3>\n

Notice how we select StackPanel even though you might have mistyped it as \u2018StakPa\u201d.<\/p>\n

\"Fuzzy<\/a><\/p>\n

CamelCase matching<\/h3>\n

You don\u2019t need to type long Type names anymore. Its abbreviation will work just fine, e.g typing \u201cABB\u201d will select AppBarButton.<\/p>\n

\"CamelCase<\/a><\/p>\n

Substring matching<\/h3>\n

For example, typing \u201cSized\u201d will select VariableSizedWrapGrid.<\/p>\n

\"Substring<\/a><\/p>\n

Start Tag \/ End Tag refactoring<\/h2>\n

This feature automatically updates the start or end tag of a XAML element while you are editing its corresponding start or end tag. Moreover adding the \u2018\/\u2019 character to a start tag will remove the corresponding end tag without affecting the element\u2019s inner content.<\/p>\n

Tag refactoring<\/h3>\n

\"Tag<\/a><\/p>\n

Removing the end tag<\/h3>\n

\"Removing<\/a><\/p>\n

Other Improvements<\/h2>\n

We have made some significantimprovements to the performance of the editor. Instant outlining and faster IntelliSense startup are some of the areas we focused on during this release . For example, we brought down the IntelliSense startup time of one of our large WPF test projects from over 24 seconds to 6.78.<\/p>\n

Some of the features described here will not work in Source Code mode as we require the XAML view to be built in order to resolve resources and binding references. All the improvements highlighted here will be available for all XAML platforms <\/strong>(WPF, Silverlight, Windows Phone and Windows Store) in the next public release of Visual Studio.<\/p>\n

The markup editor also provides support for other new Visual Studio editor features like:<\/p>\n