テンプレートを使用するコントロールのスタイルの設定

  • [アーティクル]

Windows Presentation Foundation (WPF) と Microsoft Silverlight のコントロールは、コントロール テンプレートやスタイルを作成したり変更したりすることでカスタマイズすることができます。その結果、アプリケーションが統一の取れた固有の外観になります。

テンプレートはコントロールを構成する部品を定義し、スタイルはコントロールの既定の動作を定義します。テンプレートとスタイルを作成するには、コントロールに対するシステムの既定のスタイルとテンプレートのコピーを作成します (システムのスタイルとテンプレートを変更することはできません)。テンプレートとスタイルの変更は、基本的に、Microsoft Expression Blend のデザイン ビューで新しいコントロールを作成して、簡単に行うことができます。コードを使用する必要はありません。

スタイルとテンプレートの違い

次の表では、コントロールのスタイルとテンプレートのどちらか一方または両方を変更する必要があるかどうかを判断するのに役立つよう、スタイルとテンプレートを比較します。

特徴 スタイル テンプレート

目的

スタイルを使用すると、そのスタイルが適用されるコントロールに設定されているプロパティの既定値を変更できます。たとえば、ボタンなどのコントロールの背景、枠線、および前景の既定の色を指定できます。

スタイルのプロパティは、アートボードへの描画時に、コントロール自体に設定されている値で上書きできます。たとえば、ボタンのスタイルで背景色を青に設定した場合、ボタンはアートボードに青で描画されますが、この色は変更できます。

設定できるのは、スタイルに既に存在するプロパティだけです。たとえば、テンプレートに追加した新しい部分に属するプロパティには、既定値を設定できません。

最後に、スタイルを使用してコントロールの既定の動作を指定できます。たとえば、ボタンのスタイルでは、ユーザーがポインターをボタンの上に移動すると背景色が変化するようにトリガーを指定できます。プロパティの変化は、瞬間的に行われます (段階的にアニメーション化することはできません)。

テンプレートを使用すると、テンプレートが適用されるコントロールの構造を変更できます。コントロール テンプレートを変更し、コントロール内のオブジェクト (またはパーツ) を調整、追加、または削除できます。たとえば、ボタンなどのコントロールに、背景画像やデザインを追加できます。

また、テンプレートが適用されるコントロールに設定されているプロパティ (背景色など) の値を変更することもできます。テンプレートの値は、アートボードへの描画時に、コントロール自体に設定されている値で上書きすることはできません。ただし、テンプレートのバインドを使用することで、アートボードへの描画時に、コントロールのプロパティの値に従ってテンプレートのプロパティを設定できます。

スタイルを変更するより、テンプレートを変更する方が、コントロールのより多くの部分を変更できます。たとえば、アイテム テンプレートを変更することで、コンボ ボックスのポップアップ リストの表示方法を変更したり、コンボ ボックスのポップアップ リストをトリガーするボタンの外観を変更したりできます。一部のテンプレートは次の部分から構成されます。

  • ContentPresenter   テンプレートが適用されるコントロールのコンテンツを表示するための、コントロール テンプレート内のプレースホルダーです。コンテンツ プロパティ (ボタンなど) やテキスト プロパティ (テキスト ボックスの場合) の値です。

  • Header   一部のコントロールには、コンテンツを保持するプロパティが複数あります。このような場合、ヘッダーとして使用するコンテンツの種類に対するプレースホルダーとして、追加のコンテンツ プレゼンターをテンプレートで使用できます。タブ アイテム コントロールはヘッダー付きコントロールの例であり、この場合のヘッダーはタブのラベルで、コンテンツはヘッダーの下に表示されます。

  • ItemsHost   コントロールの子オブジェクトのプレースホルダーとして使用されます。テンプレートのアイテム ホストの部分は、[プロパティ] パネルの IsItemsHost = True で示されます。

  • ItemContainerTemplate   Menu コントロールや List コントロールなどのアイテムを含むコントロールに適用されます。このテンプレートはアイテムをリストに追加するときに使用します。

最後に、トリガーを使用することで、テンプレート内の新規部分および既存部分の動作を指定できます。たとえば、ユーザーがポインターをボタンの上に移動したら、いずれかの部分の色が変化するようにトリガーを指定できます。プロパティの変更は、瞬時に行うことも、アニメーション化して滑らかに変化させることもできます。

Noteメモ :
テンプレートにバインドされたプロパティまたは色リソースの値から別の値への変更をアニメーション化することはできません。トリガーでアニメーションを使用するときは、特定のプロパティ値を使用する必要があります。

編集方法

スタイルの編集モードは、次の方法で開始できます。

メニューを使用する

  1. [オブジェクトとタイムライン] パネルで、コントロールを選択します。

  2. [オブジェクト] メニューの [スタイルの編集] をポイントします。

  3. 次のいずれかの操作を行います。

    • [現在のスタイルの編集] をクリックします (コントロールに現在適用されているスタイルを変更する場合)。

    • [コピーして編集] をクリックします (コントロールに現在適用されているスタイルの新しいコピーを同時に作成し、コントロールに新しいスタイルを適用する場合)。

システム スタイルがコントロールに適用されている場合は、[スタイルの編集] オプションを使用できません。

例については、「スタイルの作成」を参照してください。

[リソース] パネルの使用 (既存スタイルの変更)

  • [リソース] パネルでスタイルを見つけて、その横にある [リソースの編集] ボタンをクリックします。

Noteメモ :
スタイルとテンプレートは、異なる方法でコントロールに適用できるリソースであり、アプリケーションの異なる場所に格納されます。スタイルの作成の例については「スタイルの作成」を参照してください。

コントロール テンプレートの編集モードは、次の方法で開始できます。

メニューを使用する

  1. [オブジェクトとタイムライン] パネルで、コントロールを選択します。

  2. 次のいずれかの操作を行います。

    • [オブジェクト] メニューの [テンプレートの編集] をポイントします。

    • コントロールを右クリックして、[テンプレートの編集] をポイントします。

  3. [現在のテンプレートの編集] (コントロールに現在適用されているテンプレートを変更する場合) または [コピーして編集] (コントロールに現在適用されているテンプレートの新しいコピーを同時に作成し、コントロールに新しいテンプレートを適用する場合) をクリックします。システム スタイルがコントロールに適用されている場合は、[現在のテンプレートの編集] オプションを使用できません。

    例については、「テンプレートの作成または変更」を参照してください。

[リソース] パネルを使用する (既存テンプレートの編集)

  1. [リソース] パネルで、テンプレートを含むスタイルを探し、スタイルの隣の [リソースの編集] ボタンをクリックします。

  2. [オブジェクトとタイムライン] パネルの [Style] オブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

tip noteヒント :
コントロールに適用されるスタイルがコントロールの外観 (パーツ) と動作の両方を含むよう、コントロール テンプレートはスタイルの内部にラップされています。[コピーして編集] ではなく [現在のテンプレートの編集] をクリックします。スタイルのコピーにはテンプレートが含まれているためです。メイン ドキュメントの編集スコープに戻るには、[スコープを <オブジェクト名> に戻す] Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png を 2 回クリックする必要があります。1 回目のクリックでは、スタイルの編集モードに戻ります。
Noteメモ :
スタイルとテンプレートは、異なる方法でコントロールに適用できるリソースであり、アプリケーションの異なる場所に格納されます。テンプレートの作成の例については「テンプレートの作成または変更」を参照してください。

適用方法

アートボードのコントロールへの既存のスタイルの適用は、以下の方法で行います。

メニューを使用する

  1. [オブジェクトとタイムライン] パネルで、コントロールを選択します。

  2. [オブジェクト] メニューの [スタイルの編集] をポイントし、[リソースの適用] をポイントして、表示されるドロップダウン リストでスタイルをクリックします。ドロップダウン リストには、選択されているコントロールで使用できるスタイルのみが表示されます。たとえば、テキスト ボックスのスタイルをボタンに適用することはできません。

[アセット] パネルを使用し、スタイルを適用したコントロールをアートボードに描画する

  1. [アセット] Cc295273.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).png をクリックして[アセット] パネルを開きます。

  2. 次のいずれかの操作を行います。

    • 作業中のドキュメントでスタイルを作成した場合は、[スタイル] カテゴリをクリックします。

    • リソース ディクショナリでスタイルを作成した場合は、[スタイル] カテゴリを展開し、ディクショナリの名前をクリックします。

  3. 目的のスタイルを選択し、アートボードに描画します。

既存のテンプレートをアートボードのコントロールに適用するには、次のようにします。

メニューを使用する

  1. [オブジェクトとタイムライン] パネルで、コントロールを選択します。

  2. [オブジェクト] メニューの [テンプレートの編集] をポイントし、[リソースの適用] をポイントして、表示されるドロップダウン リストでテンプレートを選択します。ドロップダウン リストには、選択されているコントロールで使用できるテンプレートのみが表示されます。たとえば、テキスト ボックスのテンプレートをボタンに適用することはできません。

[アセット] パネルを使用し、テンプレートを適用したコントロールをアートボードに描画する

テンプレートはスタイルに含まれています。テンプレートをアートボードのコントロールに適用するには、スタイルの適用と同じ方法を使います。

Expression Blend には一連の簡易スタイルとテンプレートが付属しており、WPF プロジェクト内でリソース ディクショナリにパッケージ化されています。リソース ディクショナリを使用して、アプリケーション用のテーマをデザインできます。詳細については、このトピックの後半の「Simple スタイルとリソース ディクショナリ」を参照してください。

スタイルとテンプレートの変更

Expression Blend でスタイルまたはテンプレートの編集スコープにいる場合は、階層リンク ナビゲーション バーがアートボードの左上に表示されます。

テンプレート編集モード選択時の階層リンク バー

Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(ja-jp,Expression.40).png

階層リンク バーのボタンをクリックして、選択したオブジェクトのテンプレート編集モード、スタイル編集モード、およびオブジェクト編集スコープ内をすばやく移動できます。階層リンク バーは、選択したオブジェクトにカスタム スタイルまたはテンプレートが適用されている場合に表示されます。

スタイルまたはテンプレートを変更する方法については、「スタイルの編集」および「テンプレートの作成または変更」を参照してください。

ベスト プラクティス

スタイルまたはテンプレートを変更する場合は、次のベスト プラクティスを採用してください。

  • 既存のトリガーは、色ブラシのみ変更する場合を除き、一切変更しないでください。

  • 名前が "PART_" で始まるオブジェクトはコントロールを実装するコードから参照されているので、その名前または内容を変更しないでください。

  • ヘルパー オブジェクト (SimpleTabControl の TabPanel や SimpleScrollBar の Track など) は削除しないでください。これらのオブジェクトは、コントロールの機能を保持するために必要です。

  • [プロパティ] パネルでバインドが設定されている場合、これらをリセットまたは変更しないでください。バインドが設定されているプロパティには、黄色い枠が表示されるか、黄色の [詳細オプション] ボタン Cc295273.e3343378-f63e-4d8f-9847-97c1a58aadc5(ja-jp,Expression.40).png が表示されます。テンプレートのバインドは、テンプレートのプロパティと、テンプレートが適用されるコントロールのプロパティをバインドするときに使用されます。

  • テンプレートにプレゼンター オブジェクト (ContentPresenter オブジェクトや ItemsPresenter オブジェクトなど) が含まれる場合は、必ずそのオブジェクトをテンプレートに保持してください。プレゼンター オブジェクトは、テンプレートの適用先コントロールで定義される内容を表示するものです。

Caution note注意 :

スタイルおよびテンプレートの変更時に、スタイルまたはテンプレートの適用先のシステム コントロールの機能を損なわないようにするために、上記の注意事項に従ってください。

テーマ

テーマは、ユーザー インターフェイス コントロールに一貫した外観を与える、スタイルとテンプレートのセットです。

コントロール (ボタンなど) の外観を決定するために、アプリケーションでは次の場所が参照されます。

  1. コントロールで設定されるプロパティ   たとえば、Expression Blend でボタンを作成した後、ボタンで背景色を直接変更するような場合です。コントロールでプロパティを直接設定すると、そのプロパティに対して他の場所で設定されている値を上書きします。

  2. コントロールが使用するカスタム スタイルまたはテンプレートで設定されるプロパティ   たとえば、Expression Blend でボタンを作成した後、テンプレートのコピーを変更して、テンプレートで背景色を設定するような場合です。ボタンで背景プロパティが直接設定されていない場合、この背景色がボタンに使用されます。リソースの定義は、コントロールを含むドキュメント内、またはアプリケーション レベル (リソースはアプリケーション内のすべてドキュメントで使用可能になります) で行うことができます。ドキュメント レベルのリソースは、アプリケーション レベルのリソースを上書きします。

  3. コントロールが使用するシステム テンプレートで設定されているプロパティ   WPF がテーマに基づいて (オペレーティング システムに基づいて) システム テンプレートを決定します。

Simple スタイルとリソース ディクショナリ

Noteメモ :

Silverlight プロジェクトでは、Simple スタイルを使用できません。

リソース ディクショナリ**と呼ばれる個別のファイルでプロパティ、スタイル、およびテンプレートを作成することで、テーマを効率よく作成できます。リソース ディクショナリを使用すると、複数のアプリケーションでテーマを再利用できます。また、同じリソースの種類で値が異なる複数のリソース ディクショナリを定義して、交換できるテーマを作成することもできます。たとえば、Expression Blend アプリケーション自体は、ダーク テーマとライト テーマに異なるリソース ディクショナリを使用しています。テーマを切り替えるには、[ツール] メニューの [オプション] をクリックし、[ワークスペース] の [テーマ] を変更します。

ユーザー独自のアプリケーション用に、Expression Blend では SimpleStyles.xaml という名前のすぐに使用できるリソース ディクショナリが提供されており、ボタンやリスト ボックスなどの一般的なコントロールに対するスタイルのセットが収められています。これらのスタイルは、[アセット] パネル の [スタイル] カテゴリの [Simple Styles] にあります。いずれかの Simple スタイルを使用してアートボードにコントロールを描画すると、コントロールのシステム バージョンが同時に作成され、Simple スタイルが適用されます。たとえば、アートボードにシステム Button を作成すると、結果として次のような Extensible Application Markup Language (XAML) が生成されます。

<Button Content="Button" ... />

アートボードに SimpleButton を作成すると、結果の XAML には SimpleButton スタイルへの参照が含まれます。

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

Simple スタイル コントロールをアートボードに追加すると、SimpleStyles.xaml リソース ディクショナリ ファイルがプロジェクトに追加され、app.xaml ファイルにリンクされて、そのスタイルはアプリケーションのスコープで定義されます。すべてのスタイルは [リソース] パネルで確認できます。

リソースの管理方法の詳細については、「再利用可能リソースの作成」を参照してください。

関連項目

概念

WPF 簡易スタイルのスタイル処理のヒント
一般的な Silverlight コントロールのスタイル処理のヒント

Copyright ©2011 by Microsoft Corporation. All rights reserved.