コントロール テンプレートの作成または編集

Microsoft Expression Blend 2 プロジェクトのコントロール テンプレートは、コントロールに含まれる子コントロール群を定義することで、そのコントロールの外観を定義します。たとえば、TextBox のコントロール テンプレートには Bd という Border 要素が含まれ、Border 要素には PART_ContentHost という ScrollViewer 要素が含まれます。このコントロール テンプレートをアートボード上の TextBox に適用すると、ScrollViewer 要素に TextBox のコンテンツが表示されます。

TextBox コントロールのテンプレートの編集

既定のコントロール テンプレートでは、アプリケーションが Microsoft Windows XP または Windows Vista のどちらを搭載しているコンピュータで実行されているかに応じてコントロールの外観を変更する、動的テーマを使用しています。コントロール テンプレート内の要素 (コントロール パーツ) を変更し、既存の要素の配置を変えたり、コントロール内に追加の要素を描画したりすることができます。ただし、システム コントロールのテンプレートを変更する場合、最終的なコントロールの外観は Windows XP でも Windows Vista でも同じになります。詳細については、「スタイルとテンプレートの概要」の「テーマと簡易スタイル」を参照してください。

コントロール テンプレートはスタイル リソースとして保存され、同じ型の他のコントロールに適用できます。

メモ :
コントロール テンプレートには、IsMouseOver などのプロパティの変更に応答するトリガを設定できます。たとえば、TextBox に対して、マウスのカーソルが TextBox の上を移動したときに背景色を変更するプロパティ トリガを作成できます。 イベントに応答してプロパティを変更したりアニメーションを開始したりするイベント トリガを作成する場合、そのトリガはスタイル内に作成する必要があります。詳細については、「スタイルの編集」を参照してください。

注意 :
コントロールのテンプレートを変更することで、コントロールが機能しなくなることがあります。システム コントロールのコントロール テンプレートを編集する代わりに、あらかじめスタイルが設定された簡易コントロールを使用して、そのテンプレートのデザインを自由に変更することができます。詳細については、「簡易スタイルの使用」を参照してください。 要件に適合する簡易スタイルがなく、システム コントロールのテンプレートを変更する必要がある場合は、次の点に留意してください。

• 既存のトリガは、ブラシを変更するだけならかまいませんが、それ以外の方法では一切変更しないでください。

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

• [プロパティ] パネルでバインドが設定されている場合、これらをリセットまたは変更しないでください。バインドが設定されているプロパティには、周囲に黄色のハイライトが表示されるか、黄色の [詳細プロパティ オプション] ボタンが表示されます。

• テンプレートに ContentPresenter 要素または Presenter 要素が含まれている場合 (ContentPresenter 要素や ItemsPresenter 要素など)、それらの要素はテンプレートに維持してください。Presenter 要素は、コントロールに定義されているコンテンツをテンプレートを使用して表示します。

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

1. アートボード上または [オブジェクトとタイムライン] で、コントロール テンプレートの作成元とするオブジェクトを選択し、次のいずれかの操作を行います。

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

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

2. [テンプレートの編集] をポイントし、次のいずれかの操作を行います。

   • 空のテンプレートを新規作成する場合は、[空アイテムの作成] をクリックします。

   • 選択した要素で現在使用されているテンプレート (オブジェクトの既定のテンプレートまたは以前に作成したカスタム テンプレート) に基づいて新しいテンプレートを作成する場合は、[コピーの編集] をクリックします。

     メモ :
     [テンプレートの編集] オプションが選択可能な場合、そのオブジェクトには既にテンプレートが適用されています。この既存テンプレートを編集することもできます。

   [スタイル リソースの作成] ダイアログ ボックスが表示されます。これは、コントロール テンプレートがスタイル リソースに格納されるためです。

3. [リソース名 (キー)] で、次のいずれかの操作を行います。

   • 要素に対して新しい名前のスタイルを作成するには、キー名を入力します。この名前が、他の要素がこのスタイルを参照する際、つまりこのテンプレートを適用する際に使用する名前になります。

   • 同じ型のすべての要素によって使用されるスタイルを作成するには、[すべてに適用] を選択します。

     ヒント :
     このスタイル要素に対して作成される XAML では、TargetType という名前の属性に、そのスタイルの作成対象の要素の型が設定されます。x:Key 属性は、キー名 (上記の最初のオプション) を入力した場合にのみ設定されます。x:Key 属性を設定した場合は、指定したキー名でこのスタイルを指定する要素にのみ、スタイルが適用されます。x:Key 属性が設定されていない場合は、同じ型のすべての要素にスタイルが適用されます。たとえば、次のスタイル要素は、アートボード上のすべてのボタンには適用されません。 <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

4. [定義元] で、スタイルを定義する場所に該当するオプションを選択します。

   • アプリケーション内の任意ドキュメントでスタイルを使用できるようにする場合は、[アプリケーション] を選択します。

   • スタイルを現在のドキュメントでのみ使用できるようにする場合は、[このドキュメント] ([Window: Window]) を選択します。

   • 他のプロジェクトで再利用できるリソース ディクショナリ ファイルにスタイルを定義する場合は、[リソース ディクショナリ] を選択します。次に、既存のリソース ディクショナリ ファイルを選択するか、[新規] ボタンをクリックしてファイルを新規作成することができます。

     メモ :
     リソース ディクショナリは、Silverlight 2 ではサポートされていません。

5. [OK] をクリックしてダイアログ ボックスを閉じ、スタイルを開いて編集します。

   ヒント :
   事実上、スタイルの内部に新しいテンプレート リソースを作成することになります。このリソースはローカル リソースとなり、[リソース] パネルを使用して簡単に表示および変更することができます。

6. アートボードの上部に新しい Expression Blend 2 階層リンク バーが表示されます。

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

   

   階層リンク バーのボタンをクリックすることで、選択済みのオブジェクトに対するテンプレート編集モード、スタイル編集モード、およびオブジェクト編集スコープを簡単に切り替えることができます。階層リンク バーは、選択したオブジェクトにカスタム スタイルまたはテンプレートが適用されている場合に表示されます。

7. [組み合わせ] パネルで、子要素の追加や再配置、またはプロパティ トリガの追加を行って、テンプレートを変更します。システム コントロールのテンプレートを変更する場合は、前述の注意に従ってください。

8. スタイルの編集スコープを終了するには、[オブジェクトとタイムライン] の [上へスコープ] ボタンをクリックします。この操作を行うと、ドキュメントの編集スコープに戻ります。

   ヒント :
   オブジェクトに対してスタイル リソースを作成または適用すると、選択したオブジェクトの [プロパティ] パネルで、Style プロパティが 緑色でハイライトされます。これは、オブジェクトがこのスタイル リソースにバインド (リンク) されていることを示します。

先頭に戻る

アートボードに描画されているオブジェクトのテンプレートを編集するには

• アートボード上または [オブジェクトとタイムライン] で、オブジェクトをクリックして選択し、次のいずれかの操作を行います。

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

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

  • [プロパティ] パネルで Style プロパティ (この要素には既にスタイルが適用されているため、このプロパティは緑色でハイライトされています) をクリックし、ショートカット メニューの [リソースの編集] をクリックします。スタイルの編集スコープに移行したら、[オブジェクトとタイムライン] で Style オブジェクトを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

  メモ :
  [テンプレートの編集] オプションを選択できない場合、そのオブジェクトにはテンプレートが適用されていません。

  Microsoft Expression Blend がテンプレートの編集スコープに移行します。

先頭に戻る

テンプレート リソースを編集するには

• [リソース] パネルで、目的のリソース名を探し、その名前の横にある [リソースの編集] ボタンをクリックします。

  Expression Blend がテンプレートの編集スコープに移行します。

先頭に戻る

テンプレートを変更するには

1. テンプレートの編集スコープに移行した状態で、[組み合わせ] パネルにプロパティ トリガを追加するか、テンプレートに子要素を追加します。システム コントロールのテンプレートを変更する場合は、前述の注意に従ってください。

2. テンプレートの編集スコープを終了するには、[オブジェクトとタイムライン] の [上へスコープ] ボタンをクリックします。

   この操作を行うと、ドキュメントの編集スコープに戻ります。

   ヒント :
   オブジェクトに対してテンプレート リソースを作成または適用すると、選択したオブジェクトの [プロパティ] パネルで、Style プロパティが 緑色でハイライトされます。これは、該当するスタイル リソースにオブジェクトがバインド (リンク) されていることを示します。

先頭に戻る

関連項目

概念

簡易スタイルの使用

試してみよう : ビットマップ効果を使用したボタンの作成