How to use the Infragistics Color Tuner in XAML Applications

Jordan Tsankov / Monday, May 14, 2012

In the 12.1 release of NetAdvantage for Silverlight , developers may now start using the Infragistics Color Tuner to style their applications. The Color Tuner is a Visual Studio add-in that lets you pick a color palette that you can apply to any and all the controls within your project with just two clicks ! And the beauty of all this is that the color tuner requires no additional setup – you can instantly use it as soon as you get the 12.1 version. It integrates with already existing projects as well !

In order to bring up the Color Tuner panel , you have to do the following thing:

With your Visual Studio open , go to View > Other Windows > Infragistics Color Tuner. Having done that , you should be presented with the following window

Infragistics NetAdvantage for Silverlight XAML Color Tuner Project Selection

This is the project selection pane. In here , you will see all the currently loaded projects that the Color Tuner can apply a theme to – basically all your XAML projects.

 

 

 

 

 

 

Once you settle on which project you want to enhance visually , click away on the corresponding Modify Theme button to be taken to the second pane. That is where things get interesting !

Infragistics NetAdvantage for Silverlight XAML Color Tuner Theme Selection

What you see is the theme selector. The top part displays the themes you’ve got installed with your NetAdvantage suite. At the bottom , you have your custom themes that you have saved. The 3 distinct themes you see here can be modified by providing a different baseline color – you can then save the new theme for later use.

 

 

 

 

 

 

Now , if you select Use on any theme , you shall be taken to the controls selection. Let’s see what that window looks like…

Infragistics NetAdvantage for Silverlight XAML Color Tuner Controls

In here you see all the available XAML controls that can be styled. The ones that are present in your selected project ( and can have their appearance changed by the selected theme ) will automatically be selected for you. Bear in mind that not all controls are affected by different styles. Once you get past this window , the style will be applied – the required files will be pulled into your project and referenced within your App.xaml file.

 

 

 

 

 

Alternatively , you can also click on Color Tune / Edit on any of the themes and it will bring you to this panel:

Infragistics NetAdvantage for Silverlight XAML Color Tuner Metro

This right here is the color tuner , literally. Based on which theme you selected , you will be presented with its palette and also the option to select a baseline color. This baseline color will then be used to alter the original palette in either of the two possible options – by blending it with each color in the palette or by using its hue and saturation values and replacing the values in the palette.

 

 

 

 

 

 

 

If you look at my Themes Selection image above , you will see that I have a modified Metro palette – I used a green baseline color and then used hue/saturation replacement.

 

Hopefully , you now know how to use the Infragistics Color Tuner – and will have a lot effort cut off of your styling endeavors ! Give this a go and see how easy it is to use for yourself.