試してみよう: ボタンへのアニメーションの追加

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

SimpleButton では、状態の変更をアニメーション化しません。その代わりに、状態の変更があるときにブラシ リソースを設定します。Microsoft Expression Blend では、ブラシ リソースから色へのアニメーション化ができません。次の手順では、その代わりに、プロパティ トリガーを使用してアニメーション タイムラインを開始する方法を示します。

ボタンをアニメーション化するには

  1. Expression Blend のアートボード上に SimpleButton を描画します。

    tip noteヒント :

    Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。

  2. [オブジェクトとタイムライン] パネルでボタンを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。

    コピーの作成の詳細については、「リソースの作成」を参照してください。

    tip noteヒント :

    テンプレートの編集モードを終了して、ドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [スコープを <オブジェクト名> に戻す] Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。

    既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

  3. コントロール テンプレートの編集スコープで、Grid の子オブジェクトの Border を削除します。

  4. Grid オブジェクトをダブルクリックしてアクティブにし、子オブジェクトを追加できるようにします。

  5. グリッドに RectangleCc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(ja-jp,Expression.40).png を描画します。

  6. Rectangle オブジェクトを右クリックして [順序] をポイントし、[最背面に移動] をクリックして ContentPresenter オブジェクトの後ろ側に動かします。

  7. [プロパティ] パネルの [ブラシ] で、四角形の Fill プロパティに新しい値を設定します。これがボタンの既定の色になります。

    tip noteヒント :

    元のテンプレートの Border 子オブジェクトは、テンプレートのバインドを使用して、テンプレートが適用されるコントロールの Background プロパティに、テンプレートの Fill プロパティをバインドします。テンプレートのバインドによって、オブジェクト プロパティをテンプレートに流用できます。これにより、同じテンプレートを使用して、背景色が異なる複数のボタンを作成できます。ただし、テンプレートにバインドされたプロパティから特定の色へのアニメーション化はできません。これは、Fill プロパティの既定の色がテンプレートに設定されているためです。

  8. [トリガー] パネルで IsMouseOver = True トリガーをクリックし、トリガーの記録をアクティブにします。次に、[アクティブ化する際のアクション] の横にある [新しいアクションの追加] Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックして、アニメーション タイムラインを追加します。ポインターをボタンに合わせたときにトリガーするタイムラインが存在しない場合、[タイムラインが必要です] ウィンドウが表示されます。[OK] をクリックして新しいタイムラインを作成し、記録を開始します。

    tip noteヒント :

    [トリガー] パネルにあるすべてのトリガーとアクションを見るには、ウィンドウのサイズを変更しなければならない場合があります。ウィンドウのサイズを変更するには、マウスを使用します。

  9. [オブジェクトとタイムライン] で、再生ヘッド Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.40).png を 1 秒に移動し、[プロパティ] パネルの [ブラシ] で、Fill プロパティに新しい値を設定します。

    Fill プロパティの値を変更すると、タイムラインにキーフレーム Cc294783.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,Expression.40).png が表示されます。キーフレームは、0 秒に設定する必要はありません。ポインターがボタン上に移動すると、タイムラインでは以前の塗りつぶしから 1 秒に設定された塗りつぶしに移行するアニメーション化を行います。

  10. [トリガー] パネルで、IsMouseOver = True トリガーを再度クリックしてアニメーション タイムラインを終了し、トリガーの記録モードに戻ります。[非アクティブ化する際のアクション] の横にある [新しいアクションの追加] Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。ポインターがボタンから離れたときに実行するアニメーション タイムラインを作成または選択します。たとえば、前のタイムラインを使用して、タイムラインに Stop メソッドを選択することができます。

  11. 必要に応じて、[トリガー] パネルで他の状態のアニメーション タイムラインを作成することができます。

  12. F5 キーを押してアプリケーションをテストし、変更結果を確認します。

関連項目

タスク

WPF コントロールのトリガーの追加と削除
単純なアニメーションの作成

概念

SimpleButton
トリガーを使用した WPF コントロールのビヘイビアーの定義

Copyright ©2011 by Microsoft Corporation. All rights reserved.