バージョン

色調整の構成を作成および適用

目的

このトピックは、 Infragistics Color Tuner を使用してカスタム カラー調整されたテーマを作成および適用する方法を説明します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

トピック 目的

このトピックでは、 ResourceWasher コンポーネントを紹介します。これを使用して、アプリケーションの配色全体を変更することができます。

このトピックは、Visual Studio 2010 の拡張機能である、Infragistics カラー チューナーを説明します。XAML カラー チューナーによって、便利な UI を使用して、 WPF コントロールの XAML テーマを適用して色を調節できます。

このトピックの内容

このトピックは以下のセクションからなります。

カスタム調整されたテーマの作成

はじめに

ここでは、カスタム カラー調整されたテーマを作成して、アプリケーション レベルで特定の Infragistics® コントロールのテーマに適用するために必要な手順を説明します。

要件

手順を完了するためには、Infragistics コントロールを使用した作業中のプロジェクトが必要です。「 xamGrid をページに追加」 のトピックに従い、プロジェクトを簡単に作成できます。

注:

Note

Infragistics Color Tuner を使用するためには、Ultimate UI for WPF アセンブリが含まれるプロジェクトが必要です。この手順は、Infragistics Color Tuner の使用を紹介するために xamGrid コントロールを使用します。同じように、他の Infragistics コントロールにもカラー チューニングを提供できます。

概要

このトピックは、カスタムカラー調整されたテーマのを作成および適用を手順ごとに説明します。以下はプロセスの概念的概要です。

  1. テーマを適用せずにアプリケーションをプレビュー

  2. 新しいテーマを作成

  3. テーマを適用

  4. テーマを適用してアプリケーションをプレビュー

手順

テーマを適用せずにアプリケーションをプレビュー

以下の画像はテーマなしのプロジェクトの描画を表示します。「 xamGrid をページに追加」のトピックの説明に沿って進むと、プロジェクトは同様になります。

Create and appy custom tuned theme 1.png

新しいテーマを作成

  1. Microsoft® Visual Studio™ を使用してカラー調整されたテーマを作成するには、[表示] -> [その他のウィンドウ] -> [Infragistics Color Tuner] の順に指定し、Infragistics Color Tuner を開始します。

Create and appy custom tuned theme 2.png

[テーマを修正] ボタンが付けられてプロジェクト名を表示するプロジェクト ウィンドウが表示します。

  1. [テーマを修正] ボタンを押します。

Create and appy custom tuned theme 3.png

ウィンドウのインストールされたテーマ領域で複数のデフォルト テーマをリストするテーマ ウィンドウが表示されます。デフォルトのテーマ名の右側に、[使用…] ボタンと [カラー チューン…] ボタンがあります。Metro テーマで、[カラー チューン…] ボタンをクリックします。

Create and appy custom tuned theme 4.png

テーマ ウォッシャー ウィンドウが表示します。

  1. テーマのベース カラー、カラー ウォッシュ モード、名前を選択します。チュートリアルでは、オレンジの Base カラー (#FFF79646)、HueSaturationReplacement ウォッシュ モードおよび Metro-Warm という名前が使用されます。

Create and appy custom tuned theme 5.png
  1. [保存] ボタンをクリックして変更を保存します。

テーマ ウィンドウが表示されます。[インストールされたテーマ] のそばに、[保存されたテーマ] という別のセクションがあり、カスタム調整されたテーマが表示されます。

テーマを適用

  1. すべての使用可能な control .xaml テーマ ファイルのリストとともに表示する [テーマを適用] ウィンドウから、テーマを適用したい control .xaml のチェックボックスにチェックを付けます。

この手順は xamGridxamMenu 、および xamDockManager を使用します。リストから Metro.xamGrid.xaml、Metro.xamMenu.xaml、および Metro.xamDockManager.xaml を選択します。

  1. 確認するために、[適用] ボタンをクリックします。

Create and appy custom tuned theme 6.png

Infragistics Color Tuner は App.xaml プロジェクト ファイルに選択を書き込みます。開いているファイルの中に App.xaml ファイルが含まれている場合、Microsoft Visual Studio ダイアログ ウィンドウが表示され、変更した App.xaml ファイルを再読み込みするかどうか確認します。[はい] を選択します。

Create and appy custom tuned theme 7.png

テーマを適用してアプリケーションをプレビュー

以下はカスタム調整されたテーマを適用したプロジェクトの表示です。

Create and appy custom tuned theme 8.png

関連コンテンツ

トピック

このトピックについては、以下のトピックも参照してください。

トピック 目的

このトピックはカラー調整の構成を共有するための説明を行います。

このトピックでは、 ResourceWasher コンポーネントを紹介します。これを使用して、アプリケーションの配色全体を変更することができます。

このトピックは、Visual Studio 2010 の拡張機能である、Infragistics カラー チューナーを説明します。Infragistics Color Tuner の便利な UI では、WPF コントロールの XAML テーマを適用して色を調節できます。