Version

Creating And Applying Color Tuning Configurations

Purpose

This topic walks you through creating and applying custom color tuned themes using the Infragistics Color Tuner.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic Purpose

This topic introduces you to the ResourceWasher component where you can learn to change the overall color schemes of your application.

This topic introduces you to Infragistics Color Tuner, an extension to Visual Studio 2010. It allows you to apply and color tune XAML themes of the controls using convenient UI.

In this topic

This topic contains the following sections:

Creating Custom Tuned Theme

Introduction

This procedure describes the necessary steps for creating and applying custom color tuned themes for specific application level Infragistics® controls.

Requirements

To complete this procedure, you need to have a working project using Infragistics controls. You can easily create one following the Adding xamGrid to Your Page topic.

Note
Note

To use Infragistics Color Tuner, you need a project with Infragistics assemblies. This walkthrough uses a xamGrid control to display the Infragistics Color Tuner’s usage. Using the same approach, you can apply color tuning to any Infragistics control.

Overview

This topic takes you systematic through creating and applying custom color tuned themes. The following is a thumbnail overview of the process:

  1. Preview the application without the theme applied

  2. Create the new theme

  3. Apply the theme

  4. Preview the application with theme applied

Steps

Preview the application without theme applied

The following screenshot demonstrates how a project renders without any theme applied. If you have followed the walkthrough in the Adding xamGrid to Your Page topic, your project should look similar.

Create and appy custom tuned theme 1.png

Create the new theme

  1. To create a color tuned theme using Microsoft® Visual Studio™, navigate to View->Other Windows -> Infragistics Color Tuner and start the Infragistics Color Tuner.

    Create and appy custom tuned theme 2.png

    A Project window appears with the name of your project and a Modify Themes button.

  1. Press the Modify Themes button.

    Create and appy custom tuned theme 3.png

    A Themes window appears, listing several default themes in the Installed Themes area of the window. On the right side of the default theme name there is the– Use… button and the Color Tune… button. For the Metro theme, click the Color Tune button.

    Create and appy custom tuned theme 4.png

    A Theme washer window appears.

  1. Choose a base color, color wash mode and name for your theme. For this tutorial use Orange Base color (#FFF79646), HueSaturationReplacement wash mode and the Metro-Warm name.

    Create and appy custom tuned theme 5.png

  1. Click the Save button to save your changes.

    The themes window reappears. Besides the Installed Themes there is another section, called Saved Themes, which is where your custom tuned themes are displayed.

Apply the theme

  1. From the Apply Theme window displaying a list of all available control .xaml theme files, check a check box for the control .xaml, to which you want to apply the theme.

    This tutorial uses xamGrid , xamMenu and xamDockManager , so you can select Metro.xamGrid.xaml, Metro.xamMenu.xaml and Metro.xamDockManager.xaml from the list.

  1. To confirm, click the Apply button.

    Create and appy custom tuned theme 6.png

    Infragistics Color Tuner writes your choice in App.xaml project file. If the App.xaml file is amongst the open files a Microsoft Visual Studio dialog window appears asking you whether or not you want to reload the changed App.xaml file; Select Yes.

    Create and appy custom tuned theme 7.png

Preview the application with theme applied

Following is the view of the project with your custom tuned theme applied.

Create and appy custom tuned theme 8.png

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic is a walkthrough for sharing color-tuning configurations.

This topic introduces you to the ResourceWasher component where you can learn to change the overall color schemes of your application.

This topic introduces you to Infragistics Color Tuner, an extension to Visual Studio 2010. It allows you to apply and color tune XAML themes of the WPF controls using convenient UI.