プロジェクトのコントロールにスキンを作成する

コントロールの外観をカスタマイズするには、静的リソースを使用して、コントロールに適用するテンプレートを定義します。たとえば、ボタンの外観をデザインするときに、四角形の代わりに、画像を使用したボタンのテンプレートを作成することができます。

各種のコントロール テンプレートやユーザー コントロールの外観を揃えるには、個々のプロパティを静的リソースに変換し、それらをテンプレートやユーザー コントロールに適用します。たとえば、ボタン テンプレートの境界色をリソースに変換し、チェック ボックス テンプレートやカスタム ユーザー コントロールの境界プロパティにその色リソースを適用できます。

これらのテンプレートとリソースを他のプロジェクトで再利用するには、リソースをリソース ディクショナリ ファイルに移動し、そのファイルを他のプロジェクトに追加します。リソース ディクショナリ ファイルが、アプリケーションのスキンのリポジトリになります。

コントロールのテンプレートを作成するには

• コントロールのテンプレートをカスタマイズするには、「さまざまな状態に応じたシステム コントロールの外観の変更」および「状態の切り替え時間の変更」の手順に従って操作します。

  テンプレートは、[リソース] パネルにリソースとして一覧表示されます。

  作成したリソースを変更する方法については、「リソースの変更」を参照してください。

ユーザー コントロールを作成するには

• カスタム ユーザー コントロールを最初からデザインする場合は、「プロジェクトでの新しいユーザー コントロールの作成」の手順に従ってください。

プロパティを静的リソースに変換するには

1. アートボード上で、他のコントロールで再利用するプロパティ値を持つオブジェクトを選択します。

2. [プロパティ] パネルの [プロパティ] ビュー で、再利用するプロパティを見つけます。

   ヒント :
   [プロパティ] パネルの [検索] ボックスにプロパティ名の一部を入力すると、プロパティをすばやく見つけることができます。 入力した文字を含むプロパティだけが一覧表示されます。 [プロパティ] パネルを元の状態に戻すには、[検索] ボタンの横にある [クリア ] をクリックします。

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

   • [ブラシ] を再利用する場合は、ブラシのプロパティ (Fill プロパティや Background プロパティなど) の横にある [詳細オプション] をクリックして、[新しいリソースに変換] をクリックします。

   • ブラシに適用されている色を再利用するには、[単色ブラシ] の場合はそのブラシを選択します。[グラデーション ブラシ] の場合は、使用する色のグラデーションの分岐点 を選択します。次に、[色をリソースに変換] をクリックします。

     

   • 数値や他の種類の値を再利用する場合は、再利用するプロパティの横にある [詳細オプション] ボタン をクリックし、[新しいリソースに変換] をクリックします。

     

4. 表示された [<種類> リソースの作成] ダイアログ ボックスで、リソースにわかりやすい名前を付けて [OK] をクリックします。

   リソースが作成され、[リソース] パネルに表示されます。

   

   作成したリソースを変更する方法については、「リソースの変更」を参照してください。

リソースを別のプロパティに適用するには

リソースをプロパティに適用するにはさまざまな方法があります。

[リソース] パネルからドラッグしてリソースを適用するには

1. [リソース] パネルから、リソースをアートボード上のコントロールにドラッグします。

   フォント ファミリ リソースをチェック ボックス コントロールにドラッグします。

   

2. 表示されたポップアップ メニューで、リソースの適用先となるコントロールのプロパティを選択します。

   フォント ファミリ リソースをチェック ボックスの FontFamily プロパティに適用します。

   

[詳細オプション] メニューを使用してリソースを適用するには

1. [プロパティ] パネルの [プロパティ] ビュー で、リソースに設定するプロパティを見つけます。

2. [詳細オプション] をクリックして [ローカル リソース ] をポイントし、表示されたドロップダウン リストでリソース名を選択します。

ブラシ リソースを適用するには

1. [プロパティ] パネルの [プロパティ] ビュー で、リソースに設定するブラシを選択します

2. [ブラシ リソース] タブ で、リソースの名前を選択します。

   

色リソースを適用するには

1. [プロパティ] パネルの [プロパティ] ビュー で、リソースに設定する色のブラシを選択します。[グラデーション ブラシ] の場合は、目的の色のグラデーションの分岐点 を選択します。

2. [色リソース] タブで、リソースの名前を選択します。

   

テンプレートを同じ種類の別のコントロールに適用するには

コントロールにテンプレートを適用するには、さまざまな方法があります。

[アセット] パネルでテンプレートを選択して新しいコントロールに適用するには

1. [ツール] パネルの [アセット] をクリックします。

2. [アセット] パネルの [スタイル] カテゴリで、作成済みのテンプレートを選択します。

3. アートボードで、ポインターを使用して境界ボックスを描きます。

   選択したテンプレートと同じ新しいコントロールが描画され、テンプレートが自動的に適用されます。

[リソース] パネルからドラッグしてテンプレートを適用するには

1. [リソース] パネルから、テンプレート リソースをアートボード上のコントロールにドラッグします。

2. 表示されたドロップダウン メニューで、[スタイル] プロパティを選択します。

[詳細オプション] メニューを使用してテンプレートを適用するには

1. テンプレートを適用するオブジェクトを選択します。

2. [プロパティ] パネルの [プロパティ] ビュー で、[Style] プロパティを見つけます。

3. [Style] プロパティの横にある [詳細オプション] をクリックして [ローカル リソース] をポイントし、表示されたドロップダウン リストで目的のテンプレートの名前を選択します。

リソースを App.xaml ファイルに移動するには

• リソースの作成時にリソースを App.xaml ファイルに定義しなかった場合、リソースを [リソース] パネルにドラッグすることによって、App.xaml ファイルに移動できます。

  ヒント :
  リソースが見当たらない場合は、ドキュメント ノード (通常は Page.xaml) の下のノードを展開すると見つかることがあります。

リソースを別のプロジェクトにコピーするには

1. [プロパティ] パネルで、App.xaml ファイルをダブルクリックし、アートボードに開きます。

2. App.xaml ファイルは [デザイン] ビューには表示されないため、アートボードの右側で [XAML] タブをクリックします。

3. リソースは、<Application.Resources> タグの間で定義されています。

   <Application.Resources>
   </Application.Resources>
   

   このタグの内側にあるプロパティ リソースの定義には、そのプロパティの種類を表すタグが付いています。Key 属性は、リソースに付けた名前を表します。

     <FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
     <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#FF000000"/>
       <GradientStop Color="#FFC64545" Offset="1"/>
     </LinearGradientBrush>
   

   テンプレートは、<Style> タグの間で定義されています。Key 属性は、テンプレートに付けた名前を表します。

     <Style x:Key="ImageButton" TargetType="Button">
       <Setter Property="Background" Value="#FF1F3B53"/>
       <Setter Property="Template">
         ...
       </Setter>
     </Style>
   

4. 別のプロジェクトに移動するリソースを表す XAML を強調表示し、Ctrl キーを押しながら C キーを押します。リソースがコピーされます。

5. Expression Blend で別のプロジェクトを開き、アートボードの [XAML] ビューに App.xaml ファイルを表示します。<Application.Resources> タグのすぐ後ろにポインターを置き、Ctrl キーを押しながら V キーを押します。リソースが、ポインターを置いた場所に貼り付けられます。

6. 既存のリソースに、重複しているキー名がないことを確認します。

7. Ctrl + Shift + B キーを押してプロジェクトをビルドし、新しいリソースが正しくコピーされていることを確認します。

   ヒント :
   または、App.xaml ファイルを丸ごと新しいプロジェクトにコピーし、x:Class 属性内の名前を新しいプロジェクトの名前に変更する方法もあります。 <Application xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="ProjectName.App" ...

次のステップ

• ボタンとチェックボックスのスキンを作成する方法を、「Expression Community Web サイト 」のビデオ チュートリアルで確認します。

関連項目

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.