XAML is an XML-based language developed by Microsoft, which is widely used in WPF and UWP applications. Visual Studio 2017 helps a lot with editing XAML: features like IntelliSense, tag auto-close and code fold are very useful and increase productivity, but what if your IDE could help you even more?
With the help of CodeRush for Roslyn, Visual Studio will better understand the relationship between the markup and the code. This will help you in many aspects, especially, navigation.
Let’s take a look at the most useful CodeRush for Roslyn features for XAML. Most examples are shown using the source code of the Material Design In XAML Toolkit.
Navigation Features
Find References
You can use the References window in XAML. It will search for references in code and markup files across the solution.
Tab to Next Reference
What’s the fastest way to find symbol references within a file? You can use search, but it’s not very smart and may find too much. We invented the fastest way to find symbol references in a file. Just hit Tab while you are on an identifier and you will immediately jump to the next reference to it. Keep hitting tab and jumping to successive references. If you accidentally overshoot the reference you’re looking for, don’t panic. Just use Shift+Tab to move back through the references already seen. All references are highlighted for you to have a clear vision of your code while moving among symbol usages.
Jump to Resource
Seeing an image or resource dictionary in your code and wondering what is it? With CodeRush for Roslyn, you can press F12 to instantly open it.
Jump to Symbol Declaration
Navigates to the declaration of an identifier (in markup or Code Behind) from any reference in XAML file: tag, markup extension, templated parent, etc.
Templates
The whole power of CodeRush Templates is available in XAML! You can use templates from the template library and even create your own to maximize your productivity.
Let’s see some examples in action.
XAML markup often has deep and complex structure, and if, while editing, the formatting is less than optimal, you may experience difficulties understanding its structure. You can fix it manually, but that can take a lot of work. You could use an online XML formatter, but that would involve copy/pasting and switching out to a browser. Now there’s a better option: you can format any XAML document right from the Visual Studio in a single click.
Of course, the formatting style is configurable, you can easily tweak it according to your own preference.
Break Apart/LineUp Attributes
One of the most useful XAML Formatting features allowing you to break apart or line-up attributes is available separately.
Refactorings
Import Type/All Types
From time to time we all need to reuse some code or markup from the Internet or from older projects. With the CodeRush for Roslyn, you can paste a piece of markup into your file and make it work with a single call to Import All Types refactoring.
Optimize Namespace References
The best code not only works flawlessly, but also looks great. Namespace References is the very first section in every code file and often it leaves space for improvement. The Optimize Namespace References refactoring can make it perfect in a single click: it automatically sorts references and removes the unused ones.
Convert Nested Element to Attribute/Attribute to Nested Element
Using these refactorings, you can extract an attribute from a XAML tag and make it a child element. You can also perform the reverse operation — inline a child element as an attribute of the parent tag. This refactoring can increase XAML readability when there are excessive attributes or when the nesting level gets too deep.
Visualization Features
Show Color
Computers and humans understand colors differently and in most cases a computer can show colors the way we used to them. But in software development we still have to speak with the computer in its language.
To change this state of affairs, we have the Show Color feature that adds a color preview to all colors you use in code.
You can even edit a color visually by clicking any preview stripe.
Structural Highlighting
Structure is an essential part of all XML-based languages, and sometimes the formatting is not enough to see the structure clearly. Structural highlighting draws lines to aid visualization of this hierarchy.
Region Painting
And we make regions look awesome!
Markup Creation Assistance
Selection Embedding
Surround something with a tag or region in a single click. You can even use Ctrl+W (Selection Expand) to select the whole block from its opening or closing tag.
Paste Vector Drawing as XAML
Imagine you have a vector drawing which you want to use in your app. For instance, you have it in Adobe® Illustrator®. With CodeRush for Roslyn, you can copy the drawing (or part of it) and paste it right into a XAML file.
Select the required pieces and copy them to the clipboard.
Then switch to Visual Studio and paste the clipboard contents into a XAML file. The drawing will be pasted in a vector format ready for you to scale and modify it as you need.
We support Microsoft® Visio®, Microsoft® PowerPoint® and Adobe® Illustrator®, but other vector editors also have a good chance to work.
Smart Duplicate Line
Use Shift+Enter to duplicate the current line. The Smart Duplicate Line feature watches and learns from your changes to improve the duplicate line experience, creating text fields for the parts of the line we expect you to change, and automatically incrementing numeric values if we detect an incrementing pattern.
