Rory Becker - DevExpress CodeRush Blog

CodeRush for Roslyn: XAML support

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.

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 Formatting

Format XAML Document

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.

FormalXAMLDocument

Of course, the formatting style is configurable, you can easily tweak it according to your own preference.

XAMLFormattingOptions

Break Apart/LineUp Attributes

One of the most useful XAML Formatting features allowing you to break apart or line-up attributes is available separately.

XAMLBreakApartAttributes


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.

XAMLConvertNestedElementToAttribute


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.

XAMLShowColor

You can even edit a color visually by clicking any preview stripe.

CodeRushColorPicker

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.

XAMLStructuralHighlighting

Region Painting

And we make regions look awesome!

XAMLRegionPainting


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.

XAMLSelectionEmbedding

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.

XAMLCopyFromBlend

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.

XAMLPasteVectorIntoStudio

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.

XAMLSmartDuplicateLine

Published Apr 24 2017, 09:02 PM by
Bookmark and Share

Comments

James Foye

This all looks great!

Unrelated question: has clipboard history made it into CRR yet? I'm addicted to it and can't really make the move from Classic until it is.

April 26, 2017 7:31 AM

Rory Becker (DevExpress)

Hey James

It's funny you should mention that.

Turns out that feature is a part of our current sprint... releasing soon :)

April 26, 2017 10:20 AM

Alen Salkovic

Nice to see new features... keep on :)

Also, I would like to see in XAML remove outer tag like in CR Classic :)

April 28, 2017 1:10 AM

richard morris

I may be the only developer working with HTML markup and Javascript/Typescript code ... or maybe not.   :)

April 28, 2017 3:39 AM

Vito (DevExpress Support)

Hi Alen,

Am I correct that you want this CodeRush Classic feature to be ported to CodeRush for Roslyn?

documentation.devexpress.com

It is not ported yet, but we do have it in our backlog and will consider it for future updates.

May 4, 2017 6:32 AM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners