XAML Editing Tools

With ReSharper, you get additional assistance editing XAML files whenever you work with Silverlight, WPF, Metro or Windows Phone applications, including code quality analysis on-the-fly, refactorings, code generation and rearrangement, as well as quick soluton-wide navigation.

Code Quality Analysis

ReSharper's code quality analysis features help you quickly locate and correct errors in your XAML files. Let's see how it works using a few examples.

Example 1. XAML Language Level Errors

Say, you're working on a WPF project where only XAML 2006 is allowed. If ReSharper encounters a generic object from XAML 2009, it highlights the object as a language error. Should you press Alt+Enter on the highlighting, ReSharper displays a quick-fix suggesting to declare a type inherited from System.Collections.Generic.List<string> instead:

ReSharper detects and fixes invalid language constructs

When you apply the quick-fix, ReSharper:

  • Creates a new .cs file where it declares a new wrapper type that inherits from List.
  • In the original XAML file, it deletes the TypeArguments attribute, changes the type of the object to the new wrapper type, and inserts a new namespace directive if necessary.
Example 2. Nonexistent Resources

If you're using a resource that is not yet declared, ReSharper error highlighting won't let you forget about that:

ReSharper highlights non-existent XAML resources

When you press Alt+Enter, ReSharper suggests several possible locations for creating the missing resource:

ReSharper helps create XAML resources from usage

If the type of the generated resource is not yet declared, no problem: ReSharper will offer you the option to create either a CLR type or a XAML type (i.e., a UserControl) from usage. Choosing one of the two options creates a file with the default implementation.

ReSharper suggests creating a type or a XAML type
Example 3. Misplaced Comments

Accidentally placing a comment within an element will result in ReSharper highlighting it...

Misplaced comment in XAML

...and offering options for resolving the error:

Quick-fixing a misplaced comment in XAML

Extended XAML IntelliSense

You can make use of ReSharper's code completion in XAML tags. Support for CamelHumps will help you quickly add attributes: simply enter a few symbols and press Ctrl+Space to show the list of relevant suggestions that ReSharper's Symbol Completion provides:

ReSharper speeds up coding in XAML with its CamelHumps-enabled code completion

Invoking Smart Completion (Ctrl+Shift+Space) will offer additional context-sensitive options depending where you are in code. For example, invoking smart completion in an event handler declaration will offer to generate the handler method:

ReSharper's Smart Completion generates event handler methods

By using Smart Completion inside an attribute, you can quickly create a new resource (static or dynamic), a binding or a reference to a static element:

ReSharper defines XAML resources for you

Another exciting advantage of ReSharper code completion is that it displays colors for brushes that are expected in attributes such as Background or OpacityMask. Here's how the Smart Completion suggestion list looks like in this situation, but Symbol Completion is able to visualize colors, too:

ReSharper smart completion helps pick the right colors

ReSharper also supports Import Symbol Completion in XAML. That means, you can complete types from assemblies that are referenced in your solution but don't have corresponding namespace import directives in the current file:

ReSharper's Import Symbol Completion helps import types from namespaces that are not yet referenced in your XAML file

Of course, once you've used ReSharper code completion this way, the required namespace import directive will be inserted automatically.

Alternatively, if you have a type inside a XAML file that is not imported for some reason, ReSharper will offer you the option to quickly create the namespace directive:

If there's a symbol in a XAML file that is used without a namespace import directive, ReSharper will automatically insert it

XML Editing Helpers

ReSharper supports various context actions which simplify working with XML structures and are usable in XAML. To mention just a few, you can:

  • Replace a tag name with a different name. You can do this individually or collectively, for example replacing all TextBox tags with TextBlock ones.
  • Convert any attribute to a nested element.
  • Remove a tag entirely, promoting its children up a level. This also works either individually or collectively.
  • Expand an empty tag, i.e., add a closing tag.

These context actions are available on every node in the XAML file.

ReSharper's context actions help edit XML items in XAML files

Code Reordering

Using ReSharper's code reordering features, you can move around elements within a XAML file or even attributes within these elements. Both operations are performed by pressing Ctrl+Alt+Shift keys and arrow keys.

When working with attributes, these key combinations let you move the attributes around within the tag, so that the Left and Right arrow keys change the position of the attribute. If, however, you press the Up and Down keys, your actions will affect the entire tag.

The Up and Down keys move the whole tag in relation to other tags. If you extend a selection (using Ctrl+W) to encompass the tag with everything in it, you can also use the Left and Right keys to the same extent, with the only difference that these combinations will also "demote" your current selection, putting it inside any tag that you come across.

ReSharper helps reorder XAML code

Navigation and Search

ReSharper's Navigate To menu works on XAML code elements in the same way as it does in C# code files. Pressing Ctrl+Shift+G on a symbol declaration or usage opens a menu with multiple possible navigation destinations:

Rich context-sensitive navigation in XAML code

Navigation via Go To File Member works in a XAML file the same as in a C# file, allowing the user to navigate to an element with a particular type, name or key. Once again, you don't have to type the whole name — support for lowercase CamelHumps lets you find WatchList by only typing wl:

ReSharper helps you instantly land at any member in a XAML file

When you press Ctrl+Shift+Alt+G in a XAML file, you get a list of all related files: for example, the code-behind file, any resources referenced in the current XAML file, or images used in your controls:

ReSharper helps navigate to all files that are somehow related to the current XAML files

Go to Declaration (Ctrl+B) and Ctrl-click navigation also works the same way in a XAML file as it does in an ordinary C# code file. For example, while holding Ctrl, you can hover over the name of a particular class. ReSharper will underline the class name, and clicking the link will take you straight to the class definition.

Go to Declaration in a XAML file by ctrl-clicking a usage

Also, just like with code files, the File Structure window displays the structure of the XAML file, letting the user quickly navigate to the necessary code element.

File Structure in XAML files

You can look for usages of a particular XAML element by using the Find Usages command (Alt+F7). ReSharper will display all locations where the element is being used:

Searching for all usages of a XAML element with ReSharper

You can also use Highlight Usages (Ctrl+Shift+F7) for a quick overview of locations where a particular symbol is being used in the current file:

ReSharper helps highlight all usages of a symbol in a XAML file

Refactoring XAML Code

Since XAML elements are, essentially, equivalent to ordinary class members, some of the refactorings which work in C# also work in XAML. For example, one can rename or safely delete a resource just by opening the Refactor This menu:

ReSharper helps safely rename or delete a resource

When you navigate over a reference to a property or method in XAML, the range of refactorings presented in the Refactor This menu matches what you would expect if you opened that menu in C# or VB.NET code:

ReSharper presents all applicable refactorings right in XAML files

Generating Dependency Properties

Creating WPF and Silverlight dependency properties can be ridiculously boring. That's another problem that ReSharper can fix: its live template engine is powerful enough to let you create fine-grained snippets that deploy into dependency properties in a couple of keystrokes. You just type the name of a live template in the editor...

Out of a few symbols...

... and you get the pair of a property and the corresponding dependency property deployed, with intelligent code completion available in all placeholders that you need to fill:

...ReSharper deploys the entire dependency property

Similarly, you can make ReSharper deploy attached properties, which are even more cumbersome than regular dependency properties.

Another usage of live templates in XAML would be...

Upon deployment of the live template, you can pass through all its variables (in this case there are 6 of them) and use ReSharper code completion where applicable:

...deploying an attached property

Although live templates for dependency property and attached property are not currently included in ReSharper out of the box, you can download and import them.

Note:

All keyboard shortcuts provided in the "Features" section are taken from ReSharper 2.x / IDEA keyboard scheme. For details on ReSharper's two default keymaps, see Documentation and Demos.