テンプレートをサポートするコントロールのスタイル処理
Windows Presentation Foundation (WPF) と Microsoft Silverlight のコントロールは、コントロール テンプレートやスタイルを作成したり変更したりすることでカスタマイズすることができます。その結果、アプリケーションが統一の取れた固有の外観になります。
テンプレートはコントロールを構成する部品を定義し、スタイルはコントロールの既定の動作を定義します。テンプレートとスタイルを作成するには、コントロールに対するシステムの既定のスタイルとテンプレートのコピーを作成します (システムのスタイルとテンプレートを変更することはできません)。テンプレートとスタイルの変更は、基本的に、Microsoft Expression Blend の [デザイン] ビューで新しいコントロールを作成して、簡単に行うことができます。コードを使用する必要はありません。
スタイルとテンプレートの違い
次の表では、コントロールのスタイルとテンプレートのどちらか一方または両方を変更する必要があるかどうかを判断するのに役立つよう、スタイルとテンプレートを比較します。
特徴 |
スタイル |
テンプレート |
|---|---|---|
目的 |
スタイルを使用すると、そのスタイルが適用されるコントロールに設定されているプロパティの既定値を変更できます。たとえば、ボタンなどのコントロールの背景、枠線、および前景の既定の色を指定できます。 スタイルのプロパティは、アートボードへの描画時に、コントロール自体に設定されている値で上書きできます。たとえば、ボタンのスタイルで背景色を青に設定した場合、ボタンはアートボードに青で描画されますが、この色は変更できます。 設定できるのは、スタイルに既に存在するプロパティだけです。たとえば、テンプレートに追加した新しい部分に属するプロパティには、既定値を設定できません。 最後に、スタイルを使用してコントロールの既定の動作を指定できます。たとえば、ボタンのスタイルでは、ユーザーがポインターをボタンの上に移動すると背景色が変化するようにトリガーを指定できます。プロパティの変化は、瞬間的に行われます (段階的にアニメーション化することはできません)。 |
テンプレートを使用すると、テンプレートが適用されるコントロールの構造を変更できます。コントロール テンプレートを変更し、コントロール内の要素 (または部分) を調整、追加、または削除できます。たとえば、ボタンなどのコントロールに、背景画像やデザインを追加できます。 また、テンプレートが適用されるコントロールに設定されているプロパティ (背景色など) の値を変更することもできます。テンプレートの値は、アートボードへの描画時に、コントロール自体に設定されている値で上書きすることはできません。ただし、テンプレートのバインドを使用することで、アートボードへの描画時に、コントロールのプロパティの値に従ってテンプレートのプロパティを設定できます。 スタイルを変更するより、テンプレートを変更する方が、コントロールのより多くの部分を変更できます。たとえば、アイテム テンプレートを変更することで、コンボ ボックスのポップアップ リストの表示方法を変更したり、コンボ ボックスのポップアップ リストをトリガーするボタンの外観を変更したりできます。一部のテンプレートは次の部分から構成されます。
最後に、トリガーを使用することで、テンプレート内の新規部分および既存部分の動作を指定できます。たとえば、ユーザーがポインターをボタンの上に移動したら、いずれかの部分の色が変化するようにトリガーを指定できます。プロパティの変更は、瞬時に行うことも、アニメーション化して滑らかに変化させることもできます。 .gif "メモ") メモ :
テンプレート バインドされたプロパティまたは色リソースの値から別の値への変更をアニメーション化することはできません。トリガーでアニメーションを使用するときは、特定のプロパティ値を使用する必要があります。
|
編集方法 |
スタイルの編集モードは、次の方法で開始できます。 メニューを使用する
システム スタイルがコントロールに適用されている場合は、[スタイルの編集] オプションを使用できません。 例については、「スタイルの作成」を参照してください。 [リソース] パネルの使用 (既存スタイルの変更)
メモ :
スタイルとテンプレートは、異なる方法でコントロールに適用できるリソースであり、アプリケーションの異なる場所に格納されます。スタイルの作成の例については「スタイルの作成」を参照してください。
|
コントロール テンプレートの編集モードは、次の方法で開始できます。 メニューを使用する
[リソース] パネルを使用する (既存テンプレートの編集)
.gif "ヒント") ヒント :
コントロールに適用されるスタイルがコントロールの外観 (パーツ) と動作の両方を含むよう、コントロール テンプレートはスタイルの内部にラップされています。[コピーして編集] ではなく [現在のテンプレートの編集] をクリックします。スタイルのコピーにはテンプレートが含まれているためです。メイン ドキュメントの編集スコープに戻るには、[上へスコープ]
.png "Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png") を 2 回クリックする必要があります。1 回目のクリックでは、スタイルの編集モードに戻ります。
メモ :
スタイルとテンプレートは、異なる方法でコントロールに適用できるリソースであり、アプリケーションの異なる場所に格納されます。テンプレートの作成の例については「テンプレートの作成または変更」を参照してください。
|
適用方法 |
アートボードのコントロールへの既存のスタイルの適用は、以下の方法で行います。 メニューを使用する
[アセット] パネルを使用し、スタイルを適用したコントロールをアートボードに描画する
|
既存のテンプレートをアートボードのコントロールに適用するには、次のようにします。 メニューを使用する
[アセット] パネルを使用し、テンプレートを適用したコントロールをアートボードに描画する テンプレートはスタイルに含まれています。テンプレートをアートボードのコントロールに適用するには、スタイルの適用と同じ方法を使います。 |
.png "Cc295273.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png")
をクリックして[アセット] パネルを開きます。Expression Blend には一連の Simple スタイルとテンプレートが付属しており、WPF プロジェクト内でリソース ディクショナリにパッケージ化されています。リソース ディクショナリを使用して、アプリケーション用のテーマをデザインできます。詳細については、このトピックの後半の「Simple スタイルとリソース ディクショナリ」を参照してください。
スタイルとテンプレートの変更
Expression Blend でスタイルまたはテンプレートの編集スコープにいる場合は、階層リンク ナビゲーション バーがアートボードの左上に表示されます。
テンプレート編集モード選択時の階層リンク バー
.png "Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(JA-JP,Expression.30).png")
階層リンク バーのボタンをクリックして、選択したオブジェクトのテンプレート編集モード、スタイル編集モード、およびオブジェクト編集スコープ内をすばやく移動できます。階層リンク バーは、選択したオブジェクトにカスタム スタイルまたはテンプレートが適用されている場合に表示されます。
スタイルまたはテンプレートを変更する方法については、「スタイルの編集」および「テンプレートの作成または変更」を参照してください。
ベスト プラクティス
スタイルまたはテンプレートを変更する場合は、次のベスト プラクティスを採用してください。
既存のトリガーは、色ブラシのみ変更する場合を除き、一切変更しないでください。
名前が "PART_" で始まる要素は、名前または内容を変更しないでください。これらの要素は、コントロールを実装するコードから参照されているためです。
[SimpleTabControl] の [TabPanel] や [SimpleScrollBar] の [Track] などのヘルパー要素は削除しないでください。これらの要素は、コントロールの機能を保持するために必要です。
[プロパティ] パネルでバインドが設定されている場合、これらをリセットまたは変更しないでください。バインドが設定されているプロパティには、黄色い枠が表示されるか、黄色の [詳細プロパティ オプション] ボタン
.png "Cc295273.e3343378-f63e-4d8f-9847-97c1a58aadc5(JA-JP,Expression.30).png")
が表示されます。テンプレートのバインドは、テンプレートのプロパティと、テンプレートが適用されるコントロールのプロパティをバインドするときに使用されます。テンプレートにプレゼンター要素 ([ContentPresenter] 要素や [ItemsPresenter] 要素など) が含まれる場合は、必ずその要素をテンプレートに保持してください。プレゼンター要素は、テンプレートの適用先コントロールで定義される内容を表示するものです。
.gif "注意") 注意 : |
|---|
スタイルおよびテンプレートの変更時に、スタイルまたはテンプレートの適用先のシステム コントロールの機能を損なわないようにするために、上記の注意事項に従ってください。 |
テーマ
テーマは、ユーザー インターフェイス コントロールに一貫した外観を与える、スタイルとテンプレートのセットです。たとえば、WPF は、Windows XP で動作する WPF アプリケーションと、Windows Vista で動作する WPF アプリケーションには、それぞれ異なるテーマを使用します。このため、同じボタンの外観が 2 つのオペレーティング システムでは異なります。
コントロール (ボタンなど) の外観を決定するために、アプリケーションでは次の場所が参照されます。
コントロールで設定されるプロパティ たとえば、Expression Blend でボタンを作成した後、ボタンで背景色を直接変更するような場合です。コントロールでプロパティを直接設定すると、そのプロパティに対して他の場所で設定されている値を上書きします。
コントロールが使用するカスタム スタイルまたはテンプレートで設定されるプロパティ たとえば、Expression Blend でボタンを作成した後、テンプレートのコピーを変更して、テンプレートで背景色を設定するような場合です。ボタンで背景プロパティが直接設定されていない場合、この背景色がボタンに使用されます。リソースの定義は、コントロールを含むドキュメント内、またはアプリケーション レベル (リソースはアプリケーション内のすべてドキュメントで使用可能になります) で行うことができます。ドキュメント レベルのリソースは、アプリケーション レベルのリソースを上書きします。
コントロールが使用するシステム テンプレートで設定されているプロパティ WPF がテーマに基づいて (オペレーティング システムに基づいて) システム テンプレートを決定します。
Simple スタイルとリソース ディクショナリ
| メモ : |
|---|
Silverlight プロジェクトでは、Simple スタイルを使用できません。 |
リソース ディクショナリと呼ばれる個別のファイルでプロパティ、スタイル、およびテンプレートを作成することで、テーマを効率よく作成できます。リソース ディクショナリを使用すると、複数のアプリケーションでテーマを再利用できます。また、同じリソースの種類で値が異なる複数のリソース ディクショナリを定義して、交換できるテーマを作成することもできます。たとえば、Expression Blend アプリケーション自体は、ダーク テーマとライト テーマに異なるリソース ディクショナリを使用しています。テーマを切り替えるには、[ツール] メニューの [オプション] をクリックし、[ワークスペース] の [テーマ] を変更します。
ユーザー独自のアプリケーション用に、Expression Blend では SimpleStyles.xaml という名前のすぐに使用できるリソース ディクショナリが提供されており、ボタンやリスト ボックスなどの一般的なコントロールに対するスタイルのセットが収められています。これらのスタイルは、[アセット] パネル の [スタイル] カテゴリの [Simple Styles] にあります。いずれかの Simple スタイルを使用してアートボードにコントロールを描画すると、コントロールのシステム バージョンが同時に作成され、Simple スタイルが適用されます。たとえば、アートボードにシステム ボタンを作成すると、結果として次のような Extensible Application Markup Language (XAML) が生成されます。
<Button Content="Button" ... />
アートボードに [SimpleButton] を作成すると、結果の XAML には SimpleButton スタイルへの参照が含まれます。
<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />
Simple スタイル コントロールをアートボードに追加すると、SimpleStyles.xaml リソース ディクショナリ ファイルがプロジェクトに追加され、app.xaml ファイルにリンクされて、そのスタイルはアプリケーションのスコープで定義されます。すべてのスタイルは [リソース] パネルで確認できます。
リソースの管理方法の詳細については、「再利用可能リソースの作成」を参照してください。