Click here to Skip to main content
13,000,982 members (64,804 online)
Click here to Skip to main content
Add your own
alternative version


Posted 2 Mar 2011

Color Highlighting in Visual Studio XAML page using ReSharper 6

Rate this:
Please Sign up or sign in to vote.
Color Highlighting in Visual Studio XAML page using ReSharper 6

You all might know about ReSharper tool. The current stable version of ReSharper is v5. The ReSharper team is currently working on their development to release the next version of ReSharper i.e. v6.

The new version of ReSharper has some cool new features like JavaScript, CSS and XAML support. It is currently in the early development stage and user has the right to try out the new features and give feedback to improve them.

Yesterday, I installed the new EAP release and tried out some cool feature. Among them one is: "Color support in XAML page". In this post, I am going to describe it to you. Read out the full post to learn about it.


Color Highlighting is a new feature in ReSharper 6 which supports both in CSS and XAML. So, if you want to try by downloading the latest release, you can do so from the below link:

imageDownload ReSharper 6 EAP Builds
Evaluation license (Pre-release software. Nothing is guaranteed)
If your evaluation has expired, please use the evaluation license below:
User Name: ReSharper EAP User License Key: 0-A60kqsqDMPkvPrLC3bz1/jmns4/DAUV6
which is valid until 31 March 2011

The free evaluation license key is also provided for you to try which will expire after a period of time.

Play with XAML and ReSharper

If you already installed the latest version of ReSharper, follow the below steps, else just read it to know more about the feature. First of all, set up the development environment by creating a new Silverlight project in Visual Studio.

Now inside Visual Studio IDE, go to "ReSharper -> Options" (as shown below) to check whether the Color highlighting feature is enabled or not.


Inside the options dialog, go to "Settings" page. There check whether the "Highlight color usages" is marked as enabled. If not, just check it as shown below:


Once done, click ok to save the settings and come back to the Visual Studio IDE.

Now open any XAML page and enter color brush in the page. For our example, we will add a background color to the layout root, which is nothing but the main grid. Let's put the background color as "Red".


You will see that the property value of "Background" is underlined with a Red color. For the first time, you may think that something wrong/error happened in the XAML code. But no, no error is there. As we entered "Red" as the background color, hence it shows Red underline just below the value.

Hover your mouse on top of the text and you will notice it will popup a tooltip in the screen with the color, ARGB and Hex value as shown in the below screenshot:


Let us replace the Red color with Green. Yup, you will see the same thing here too. Here it will show a underline with green mark. On mouse hover, it will show the tooltip with the color, argb and hex value.


So the question is, does it only support color name? No, you can enter the Hex value too and you will see the same action here.


The same applies for opacity. If we reduce the opacity value, the same color will show like this:


Wait, if you are not sure which color to specify there... you can pick it from the color palette too. Yes, ReSharper now supports color palette for your easy access. Once you add the Background color as empty, it will show a tooltip icon at the left site of the XAML editor. Click that icon and there you will see the menu item "Pick color from palette". Click the menu item if you want to choose the desired color.


This will open the following color palette in the screen. From here, you can choose the desired color that you want.


You can choose Red, Green, Blue, Hue, Sat, Brightness and even opacity from the dialog. You can also move your cursor to chose it from the palette. Have a look at it here:



Once you click "OK", this will set as the color in the XAML page as shown below:


What Next?

If you like this, you can download the evaluation version from JetBrains site. Remember that it is in the development stage, hence there is no guarantee to the software. As an EAP user, you can also get the Free evaluation license from their site.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog:
Twitter :

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Durgaprasadtb2-Mar-11 23:22
memberDurgaprasadtb2-Mar-11 23:22 
GeneralRe: My vote of 5 Pin
Kunal_Chowdhury4-Mar-11 5:56
mvpKunal_Chowdhury4-Mar-11 5:56 
GeneralMy vote of 5 Pin
Brij2-Mar-11 19:07
mvpBrij2-Mar-11 19:07 
GeneralRe: My vote of 5 Pin
Kunal_Chowdhury4-Mar-11 5:56
mvpKunal_Chowdhury4-Mar-11 5:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170624.1 | Last Updated 2 Mar 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid