Silverlight 2 プロジェクトでのコントロール用のスキンの作成

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

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

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

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

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

  テンプレートは、[リソース] パネルにリソースとして一覧表示されます。作成したリソースを変更する方法については、「リソースの変更」を参照してください。

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

• カスタムのユーザー コントロールをテンプレートを最初から新規に作成するには、「Silverlight 2 プロジェクトでの新しいユーザー コントロールの作成」の手順に従って操作します。

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

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

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

   ヒント :
   [プロパティ] パネルの [検索] ボックスにプロパティ名の一部を入力すると、プロパティをすばやく見つけることができます。 入力した文字により、プロパティの一覧がフィルタ処理されます。 [プロパティ] パネルを復元するには、[検索] ボタンの隣にある [クリア]  ボタンをクリックします。

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

   • ブラシを再利用する場合は、目的のブラシを選択し、[ブラシをリソースに変換]  ボタンをクリックします。

     

   • ブラシに適用されている色を再利用する場合は、ブラシが [単色ブラシ]  のときはブラシを選択し、[グラデーション ブラシ]  のときは再利用する色のグラデーション境界  を選択します。次に、[色をリソースに変換]  ボタンをクリックします。

     

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

     

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 コミュニティ Web サイト (英語の可能性あり) に用意されている "How Do I?" ビデオ チュートリアルを利用できます。