既存のオブジェクトからのコントロールの作成

  • [アーティクル]

Microsoft Expression Blend の [コントロールの作成] 機能を使用して、アートボードの任意のオブジェクトからコントロール テンプレートを作成できます。[コントロールの作成] ツールは、再利用できるオブジェクトをスタイル リソースにまとめます。

tip noteヒント :

Expression Blend のオブジェクトとは、アートボードに配置するすべての要素を指します。たとえば、レイアウト パネル、図形、テキスト コントロール、イメージ、ボタン、コントロール テンプレートなどのユーザー インターフェイス (UI) デザイン要素が挙げられます。UI 要素をアートボードに配置すると、アプリケーションに要素のオブジェクト インスタンスが作成されます。

楕円からボタンを作成するには

  1. プロジェクトが開かれていない場合は、新しいプロジェクトを開くか、または作成します。

    詳細については、「新しいプロジェクトを作成する」を参照してください。

  2. [ツール] パネルの [楕円] Cc295271.d7a04618-e35a-44f9-b78c-1f22e38016c1(ja-jp,Expression.40).png を使用して、アートボードに円を描画します。楕円を見やすくするには、[プロパティ] パネルの [ブラシ] にあるプロパティを修正して外観を変更します。

    詳細については、「オブジェクトの塗りつぶしまたはストロークに単色ブラシやグラデーション ブラシを適用する」を参照してください。

  3. 楕円を右クリックして、[グループ化設定] をポイントし、Grid などレイアウト コンテナーの名前をクリックします。

  4. [オブジェクトとタイムライン] パネルでグリッドを選択した状態で、[ツール] メニューの [コントロールの作成] をクリックし、グリッドをボタンに変換します。

    [コントロールの作成] ダイアログ ボックスが表示されます。

  5. [コントロールの種類] で、[Button] コントロールなど、作成するコントロールの種類をクリックします。

  6. [名前 (キー)] で、最初のラジオ ボタンをクリックし (既定)、ボタン スタイルの名前を入力します。あるいは、[すべてに適用] オプションを選択し、アートボード上にあってまだ名前でスタイルを参照していないすべてのボタンにスタイルを適用します。

  7. [定義先] で、いずれかのオプションをクリックし、ボタン スタイルを定義する場所を指定します。アプリケーションのドキュメントにボタン スタイルを使用できるようにするには、[アプリケーション] をクリックします。ボタン スタイルを現在のドキュメントにのみ使用できるようにするには、[このドキュメント] ([Window: Window]) をクリックします。アプリケーションのリソース ディクショナリにボタン スタイルを定義するには、[リソース ディクショナリ] をクリックします。

  8. [OK] をクリックして [スタイル リソースの作成] ダイアログ ボックスを終了し、ボタン スタイルを作成します。

    [オブジェクトとタイムライン] パネルで楕円オブジェクトがボタン オブジェクトに変換され、スタイルが新しいボタン スタイルに設定されることに注意してください。

    また、ボタン スタイルは、定義したノードの [リソース] タブに表示されます (たとえば、[Window] ノードなどに表示されます)。

    Expression Blend の [リソース] タブに表示される新しいボタン スタイル

    Cc295271.53d9464b-bf8b-4dcb-90c0-6fb85b0df530(ja-jp,Expression.40).png

ボタンのスタイルを変更するには

  1. 作成したボタン スタイルを変更するには、[オブジェクトとタイムライン] パネルで新しい Button オブジェクトを右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。

    アートボードはコントロール テンプレートの編集スコープに切り替わります。

    tip noteヒント :

    コントロール テンプレートの編集スコープに移行するには、いくつかの方法があります。たとえば、[リソース] タブでボタンのスタイルを表示し、リソース名の横にある [リソースの編集] ボタンをクリックできます。これにより、スタイルの編集スコープに入ります。ここから、[オブジェクトとタイムライン] パネルでスタイル オブジェクトを右クリックし、[テンプレートの編集] をポイントし、[現在のテンプレートの編集] をクリックすることにより、コントロール テンプレートの編集スコープに移行できます。

    コントロール テンプレートの編集スコープを終了するには、[オブジェクトとタイムライン] パネルで [スコープを <オブジェクト名> に戻す] Cc295271.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。スタイルの編集スコープからコントロール テンプレートの編集スコープに入った場合は、スタイルに戻ります。ドキュメントの編集モードに戻るには、[スコープを <オブジェクト名> に戻す] ボタンをもう 1 回クリックします。
    tip noteヒント :

    [コントロールの作成] ツールは、元のオブジェクト (楕円) を、コントロール テンプレートを含むスタイル リソースにラップします。スタイルは、スタイルを適用するオブジェクト (この場合、ボタン オブジェクト) に設定されるプロパティを定義します。コントロール テンプレートは、オブジェクトの状態、構造、および外観を定義します。

  2. コントロール テンプレートの内部には、元のオブジェクト (楕円) を含む Grid パネル、およびボタンのコンテンツを表示する ContentPresenter オブジェクトがあります。Grid パネル内にオブジェクトを配置すると、他のオブジェクトの追加や配置が簡単になります。

    新しいボタン スタイルのコントロール テンプレートの構造

    Cc295271.d16a098c-d0c2-4f72-8e2f-19ce6469c4f8(ja-jp,Expression.40).png

    リソースの Extensible Application Markup Language (XAML) を確認すると、スタイルとコントロール テンプレートを関連付ける方法がわかります。たとえば、ボタン スタイルの構造は次のようになります。

      <Window.Resources>
    <Style x:Key="ButtonStyle1" ...>  
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">  
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>
          </ControlTemplate>  
        </Setter.Value>
      </Setter>
    </Style>  
  </Window.Resources>

  3. [トリガー] パネルで、必要に応じてボタンの状態を定義します。たとえば、ユーザーがボタンの上にマウスを移動したときの状態のトリガー記録をアクティブにするには、IsMouseOver = True をクリックします。[オブジェクトとタイムライン] パネルで楕円を選択し、[プロパティ] パネルの [外観] で、楕円の [Fill] プロパティを別の色に変更します。次の図に示すように、[ellipse.Fill] に対する新しいプロパティ変更は、[アクティブな際のプロパティ] の [トリガー] に追加されます。

    Noteメモ :

    [アクティブな際のプロパティ] が表示されない場合は、[トリガー] パネルのサイズを調整する必要があります。サイズを調整するには、パネルの境界とパネル内の境界をクリックしてからドラッグします。

    ポインターをボタンの上に移動したときの楕円の Fill プロパティを変更した [トリガー] パネル

    Cc295271.6be5825d-f291-410b-bc75-423fee8f5d00(ja-jp,Expression.40).png

  4. ボタンにアニメーションを追加することもできます。たとえば、[トリガー] パネルの IsPressed = True をクリックすると、ユーザーがボタンをクリックしたときの状態のトリガー記録がアクティブになります。[オブジェクトとタイムライン] パネルで楕円を選択した状態で、Shift キーと Alt キーを押しながら、楕円の角をドラッグします(Shift + Alt キーボード ショートカットでは、オブジェクトの中心点が維持されます)。

    また、IsPressed イベントのイベント トリガーから新しいストーリーボードとトリガーを作成することで、より複雑なアニメーションを追加できます。

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

  5. 必要に応じてボタンの状態を定義した後、[オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す] Cc295271.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックして、ドキュメントの編集スコープに戻ります。

  6. 状態をテストするには、[プロジェクト] メニューの [プロジェクトの実行] をクリックし (または F5 キーを押し)、ボタンの状態が正しく機能することを確認します。たとえば、ボタンの上にポインターを移動すると、塗りつぶしの色が変更されます。

ボタンのスタイルをボタンに適用するには

  1. 必要な編集スコープに移行していることを確認します。スタイルは、コントロール テンプレートのスコープ内など、任意のスコープのボタンに適用できます。

  2. [ツール] パネルの Button Cc295271.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,Expression.40).png を使用して、アートボードにボタンを描画します。

  3. [オブジェクトとタイムライン] パネルで新しいボタン オブジェクトを右クリックし、[テンプレートの編集]、[リソースの適用] の順にポイントして、一覧からボタン スタイルを選択します。

    [オブジェクト] メニューの [スタイルの編集] コマンドと [テンプレートの編集] コマンドを使用して、スタイル リソースを適用することもできます。

    右クリック操作による、ボタン オブジェクトへのボタン スタイルの適用

    Cc295271.dc12debc-7711-47d9-84ce-10322a384397(ja-jp,Expression.40).png

ボタンのスタイルを削除または変更するには

関連項目

タスク

既存のオブジェクトからのユーザー コントロールの作成

概念

一般的な Silverlight コントロールのスタイル処理のヒント
Silverlight コントロール テンプレートのパーツのスタイル指定

Copyright ©2011 by Microsoft Corporation. All rights reserved.