スタイルとテンプレートの概要

  • [アーティクル]

このページは WPF および Silverlight 2 に適用されます

Windows Presentation Foundation (WPF) コントロールと Silverlight 2 コントロールは、コントロール用のテンプレートとスタイルを作成するなど、さまざまな方法でカスタマイズできます。その結果、アプリケーションに固有の統一された外観を作成できます。

Cc295273.alert_note(ja-jp,Expression.10).gifメモ :

スタイルとテンプレートは Microsoft Silverlight 1.0 プロジェクトではサポートされていませんが、JavaScript クラスを作成して再利用可能なコントロールを定義することはできます。例については、[ヘルプ] メニューの [ようこそ画面] の [サンプル] タブからアクセスできる ButtonGallery サンプルの Button クラスを参照してください。詳細については、Silverlight ラーニング センターのページ (英語の可能性あり) を参照してください。

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

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

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

特徴

スタイル

テンプレート

目的

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

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

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

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

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

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

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

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

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

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

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

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

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

編集方法

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

メニューを使用する

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

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

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

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

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

システム スタイルがコントロールに適用されている場合、[スタイルの編集] オプションは使用できません。例については、「スタイル リソースの作成」を参照してください。

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

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

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

メニューを使用する

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

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

    • [オブジェクト] メニューの [コントロール パーツ (テンプレート) の編集] をポイントします。

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

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

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

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

  2. [オブジェクトとタイムライン] で、スタイル要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

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

適用方法

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

メニューを使用する

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

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

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

  1. [アセット ライブラリ] Cc295273.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png を開きます。

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

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

    • リソース ディクショナリでスタイルを作成した場合 (WPF のみ) は、[コントロール] タブをクリックして、ディクショナリを選択します。

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

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

メニューを使用する

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

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

    • [オブジェクト] メニューの [コントロール パーツ (テンプレート) の編集] をポイントします。

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

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

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

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

  2. [オブジェクトとタイムライン] で、スタイル要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

    主ドキュメントの編集スコープに戻るには、[上へスコープ] Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png ボタンを 2 回クリックする必要があります。1 回目のクリックでは、スタイルの編集モードに戻ります。

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

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

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

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

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

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

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

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

ベスト プラクティス

Cc295273.alert_caution(ja-jp,Expression.10).gif注意 :

スタイルおよびテンプレートの変更時には、スタイルまたはテンプレートの適用先のシステム コントロールの機能を損なわないようにするために、次のような注意事項があります。

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

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

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

  • [プロパティ] パネルでバインドが設定されている場合、これらをリセットまたは変更しないでください。バインドが設定されているプロパティには、周囲に黄色のハイライトが表示されるか、黄色の [詳細プロパティ オプション] Cc295273.41b6d73e-9be5-48d9-aebf-12a284314457(ja-jp,Expression.10).png ボタンが表示されます。テンプレートのバインドは、テンプレートのプロパティと、テンプレートが適用されるコントロールのプロパティをバインドするときに使用されます。

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

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

テーマ

テーマは、ユーザー インターフェイス コントロールに一貫した外観を与える、スタイルとテンプレートのセットです。たとえば、Windows Presentation Foundation は、Microsoft Windows XP で動作する WPF アプリケーションに対してあるテーマを使用し、Windows Vista で動作する WPF アプリケーションには別のテーマを使用します。このため、同じボタンの外観が 2 つのオペレーティング システムでは異なります。

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

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

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

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

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

Cc295273.alert_note(ja-jp,Expression.10).gifメモ :

簡易スタイルとリソース ディクショナリは Silverlight 2 プロジェクトではサポートされていません。

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

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

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

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

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

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

簡易スタイルの使用例については、「簡易スタイル」の各トピックを参照してください。リソースの管理方法の詳細については、「リソースの概要」を参照してください。

Cc295273.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る