Rory Becker - DevExpress CodeRush Blog

The DXCore Visualize Toolbar

You’ve just installed CodeRush, you’ve started Visual Studio and opened one of your solutions.

You’ll quickly notice that CodeRush has decorated your code with a few graphical additions.

image[7]

First things first… Don’t panic. CodeRush is just showing you some of the ways it can enhance your coding experience.

This is the DXCore Visualize Toolbar:

image

It sits, like other toolbars, at the top of your code editor, and it’s the simplest way to customise which extras are enabled at any given time.

These additions are completely optional, but before you rush for the off switch, lets take a quick spin through them and find out what they’re for and why you might want to leave them on.

Lets take a look at these one by one.

Code IssuesIconCodeIssuesCodeIssuesVerticalBar
CodeIssues is a feature that deserves an entire post of it’s own. However the quick summary, is that it’s a graphical interface which consists of a vertical bar beside the scrollbar containing indications of Errors, Warnings and Suggestions about the code at that relative position in the editor.

When you hover over these indications, they expand to show you in greater detail, what the problem might be. Many of these Issues also link to Refactorings and CodeProviders which provide sensible ways of dealing with the problem at hand. Examples of these Issues include references to undeclared elements and empty catch blocks.

CodeIssueUndeclaredElementCodeIssuesEmptyCatchBlock

Spell check
IconSpellCheckToggles the inline Spell Checker. When active, this feature is capable of checking comments, string, XML Comments, HTML and HTML attributes, indicating them inline with a familiar squiggly underline graphic.

Member Icons
IconMemberIconsProvides a graphical (at a glance) representation of the member’s Type MemberIconMenu(FieldMemberIconField / Method MemberIconMethod/ Property MemberIconProperty etc). The glyph also acts as the gateway to the ‘Member Icons’ context menu. This which will allow you to alter the visibility of the member, ‘Cut, Copy Comment and Select the member’ or Move the method to a nominated region.

Flow Break Evaluation 
IconFlowBreakEvaluationToggles the visibility of a couple of extra glyphs within the code editor.
This glyph FlowBreakBreak appears next to keywords like break and return to indicate a change in program flow.
This glyph imageappears next to thrown exceptions, and indicates a more radical departure from the normal program flow.
If you hover your mouse over either of these, then a further graphic FlowBreakArrowwill appear, and animate to indicate where program flow will divert to, in the case of hitting this statement.

Metrics
IconMetricsToggles the presence of inline metrics. These glyphs imageappear on the left or right of members (as space permits) and serve 2 purposes. The first is their numeric imagevalue. It represents the result of a calculation called a metric. Depending on which metric is active, this value might represent the number of lines a member has, it’s Cyclomatic Complexity or some other metric (you can even create your own using the DXCore). The second function of this glyph is to provide an inline contextual menu, which let’s you change the active inline metric.

Structural Highlighting
IconStructuralHighlightingToggles the display of graphical lines which show connections between elements of the same statement. Graphically shows matching braces, blocks and illustrates how nested your code has become.

image

Region Painting 
IconRegionPaintingPeople are split on whether regions are a good or bad thing, but we can all agree that the region directives themselves aren’t what you should be focusing on. When region directives are present, this feature paints over them with some subtle colouring, making them contrast less and fade into the background.

Compare…
RegionPaintingOff
…with…
RegionPaintingOn
Isn’t that much better.

Right Margin Line image
IconRightMarginLineDraws a vertical line down the right hand side of your editor at a predetermined location. This line defaults to the 80th character but this can be configured from it’s options page (DevExpress \ OptionsEditor \ Painting \ Right Margin Line)

Line Highlighter
IconLineHighlighterHighlights the line imagethe caret is on, allowing it to stand out from the rest. This is particularly useful when working at larger resolutions and you need to be able to quickly find where you are working. A full line of colour is much easier to find that a single flashing caret. As you might expect, options are available (DevExpress \ OptionsEditor \ Painting \ Line Highlighter) to allow you to change both the colour and opacity of this highlight bar.

XML Doc Comment
IconXMLDocCommentThis repaints the XML Doc Comments so that they’re easier to read, removing all of those angle brackets and picking out the really useful information.

This results in a conversion from this:XMLDocComment

…to this…

XMLDocCommentPretty

All colours are fully customisable from the options (DevExpress \ OptionsEditor \ Painting \ XML Doc Comments)

Step Into Member
imageThe ‘Step into Member’ function (Ctrl+Shift+F11 by default) is not a graphical function. It’s purpose is, as it’s name suggests, to assist during debugging . It’s VS version companion (Step into…) will step into the next sequential function, in order to let  you step through that function and discover what happens. this function will advance the debugger into the member on which the caret is currently positioned.

In the screenshot below, if we were to hit F11 (Step into) the debugger would naturally step into the ‘Add1’ function. however if we were to use ‘Step into Member’, CodeRush would determine that we wanted to step over both ‘Add1’ and ‘Add2’ and instead step into ‘CustomConcat’ because this is the location at which our caret is positioned.

image

…and so our little summary is at an end.

Each of these features may provide it’s own additional options, typically found beneath the Editor\Painting folder in the options screen (accessible via the DevExpress\Options menu or the Ctrl+Shift+Alt+O shortcut). If you feel so inclined, the DXCore Visualize toolbar is always available to allow you to toggle any of them on on-the-fly.

I hope this post has provided some additional understanding, as to the function of the graphical additions provided by CodeRush. My recommendation is that you leave them on, for at least a little while, in order to familiarise yourself with how useful each can be, then you’ll be well equipped to make a decision about which suit your particular needs.

Published Jul 26 2010, 03:32 PM by
Filed under: , ,
Bookmark and Share

Comments

Steven Rasmussen

Great post!  This has been very useful in understanding the toolbar and each of its functions.

July 26, 2010 11:51 AM

James S K Makumbi

Fantastic post!!

July 26, 2010 1:24 PM

Boris Bosnjak

Thanks for the brief reminder :)

July 26, 2010 9:50 PM

Hideaki Kusaka

Nice Post!! Thanks!

July 27, 2010 10:09 PM
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