次の方法で共有

Blend でテンプレートを作成または変更する

  • [アーティクル]

コントロールの外観は、アートボードでコントロールに適用されるテンプレートで定義します。 テンプレートには、コントロール内にあるオブジェクトが含まれます。 たとえば、TextBox のコントロール テンプレートには、"Bd" という名前の Border オブジェクトが含まれています。このオブジェクトには、"PART_ContentHost" という名前の ScrollViewer オブジェクトが含まれています。 ScrollViewer オブジェクトは、コントロール テンプレートがアートボード上の TextBox に適用されたときに TextBox のコンテンツを表示します。

システム コントロールの既定のテンプレートは、アプリケーションを実行する Windows のバージョンによって外観が変化する動的テーマを使用します。 ただし、システム コントロールのテンプレートを変更する場合、コントロールはすべてのバージョンで同じになります。

詳細については、「Blend でテンプレートをサポートするコントロールをスタイル処理する」を参照してください。

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

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

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

    • [オブジェクト] メニューの [テンプレートの編集] をポイントします。

    • オブジェクトを右クリックして、[テンプレートの編集] をポイントします。

    • アートボードの上端にある階層リンク バーで、オブジェクトの名前をクリックします。

  2. 表示されたドロップダウン メニューで、以下のいずれかを実行します。

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

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

      注意

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

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

  3. [名前 (キー)] で、以下のいずれかを実行します。

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

    • 同じ種類のすべてのオブジェクトによって使用されるスタイルを作成するには、[すべてに適用] を選択します。

      ヒント

      このスタイル オブジェクトに作成される XAML では、TargetType という名前の属性に、そのスタイルの作成対象のオブジェクトの種類が設定されます。

      x:Key 属性は、キー名 (この手順の最初のオプション) を入力した場合にのみ設定されます。x:Key 属性を設定した場合は、指定したキー名でこのスタイルを指定するオブジェクトにのみ、スタイルが適用されます。x:Key 属性が設定されていない場合は、同じ種類のすべてのオブジェクトにスタイルが適用されます。たとえば、次のコードのスタイル オブジェクトは、アートボードのすべてのボタンに適用されません。

      <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

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

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

    • スタイルを現在のドキュメントでのみ使用できるようにする場合は、[このドキュメント] を選択し、ドロップダウン メニューからオプションを選択します。

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

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

    ヒント

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

  6. アートボードの上端に Blend for Visual Studio の階層リンク バーが表示されます。

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

    JJ170272.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(ja-jp,VS.120).png

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

  7. 子オブジェクトを追加または再配置してテンプレートを変更します。

  8. ユーザーの操作に基づいてオブジェクトのビヘイビアーまたは外観が変わるようにするには、次の操作のいずれかを行います。

    • Windows Presentation Foundation (WPF) プロジェクトで作業している場合は、[トリガー] パネルでトリガーを選択してトリガーの記録をオンにし、テンプレートのオブジェクトを変更します。 必要なトリガーが存在しない場合は、新しく作成します。 たとえば、[Button] オブジェクトのクリックに反応するトリガーを作成するには、[プロパティ トリガーの追加] をクリックし、トリガーを IsPressed=True に設定して、新しいトリガーを選択してから変更を行います。

      トリガーの詳細については、「トリガーを使用した WPF コントロールのビヘイビアーの定義 (Blend SDK for WPF)」を参照してください。

      詳細については、「Blend での WPF 簡易スタイルのスタイル処理のヒント」を参照してください。

      注意

      コントロールのテンプレートの一部を変更すると、コントロールが機能しなくなることがあります。

      詳細については、「Blend でテンプレートをサポートするコントロールをスタイル処理する」の「ベスト プラクティス」を参照してください。

    • Microsoft Silverlight プロジェクトで作業している場合は、[状態] パネルで状態を選択して状態の記録をオンにし、テンプレートのオブジェクトを変更します。 オブジェクトでパーツを使用できる場合は、異なるオブジェクトにテンプレートのパーツを割り当てることができます。 たとえば、アートをイメージ オブジェクトとしてインポートし、新しいオブジェクトをテンプレートのパーツに変換することができます。 状態とテンプレートのパーツを設定し、ユーザーの操作に応答してオブジェクトの外観が変わるようにします。

      詳細については、「Blend で Silverlight コントロール テンプレートのパーツをスタイル指定する」および「Blend での一般的な Silverlight コントロールのスタイル処理のヒント」を参照してください。

    • オブジェクトにさらにインタラクティビティを追加するには、[状態] パネルで新しい状態を作成し、GoToStateAction ビヘイビアーを使ってイベントに基づいて状態が切り替わるようにします。

      詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」を参照してください。

    • イベントに応答して実行するコードを記述できます。 [プロパティ] パネルの [イベント] で、イベント名の横にある入力フィールドをダブルクリックして、ドキュメントの分離コード ファイルにイベント ハンドラー メソッドを追加します。

      詳細については、「イベントに応答するコードを記述」を参照してください。

  9. スタイルの編集スコープを終了するには、[オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す] JJ170272.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックします。 この操作を行うと、ドキュメントの編集スコープに戻ります。

    ヒント

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

既存のカスタム テンプレートの編集

アートボードまたは [オブジェクトとタイムライン] パネルで、オブジェクトをクリックして選択し、以下のいずれかを実行します。

既存のカスタム テンプレートを編集するには

  • アートボードの上端にある階層リンク バーの 3 番目のボタンをクリックします。

    JJ170272.5bb586ea-6adc-4672-b316-0fab8215ff8c(ja-jp,VS.120).png

  • [オブジェクト] メニューの [テンプレートの編集] をポイントし、[現在のテンプレートの編集] をクリックします。

  • オブジェクトを右クリックして [テンプレートの編集] をポイントし、[現在のテンプレートの編集] をクリックします。

  • [プロパティ] パネルで [Style] プロパティ (このオブジェクトには既にスタイルが適用されているため、このプロパティには緑の枠が付いています) の横にある [詳細オプション] JJ170272.ac1bd7f6-f5e6-494c-bca7-7a57ab314eab(ja-jp,VS.120).png をクリックし、ショートカット メニューの [リソースの編集] をクリックします。 スタイルの編集スコープ内で [オブジェクトとタイムライン] パネルの [Style] オブジェクトを右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。

    注意

    [現在のテンプレートの編集] オプションが無効になっている場合は、そのオブジェクトにテンプレートが適用されていません。

    ヒント

    [プロパティ] パネルのプロパティの横にある [詳細オプション] をクリックし、[テンプレート バインディング] をクリックすると、テンプレート編集モードからテンプレートをすばやくバインドできます。

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

[リソース] パネルからテンプレートを開くには

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

    Blend がスタイルの編集スコープに移行します。

  2. スタイルの編集スコープ内で [オブジェクトとタイムライン] パネルの Style オブジェクトを右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。

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

参照

処理手順

Blend で既存のオブジェクトからコントロールを作成する

概念

Blend での一般的な Silverlight コントロールのスタイル処理のヒント

Blend での WPF 簡易スタイルのスタイル処理のヒント