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

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

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

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

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

    Cc294783.alert_tip(ja-jp,Expression.10).gifヒント :

    簡易スタイルを使用するには、アセット ライブラリ Cc294783.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [コントロール] タブで [簡易スタイル] をクリックします。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

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

    Cc294783.alert_tip(ja-jp,Expression.10).gifヒント :

    テンプレートの編集モードを終了し、ドキュメントのスコープに戻るには、[上へスコープ] ボタン Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png をクリックします。このボタンは、[組み合わせ] パネルの要素ツリーの上にあります。

    既存テンプレートのテンプレート編集モードに戻るには、[オブジェクトとタイムライン] でテンプレートを編集する要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をクリックして、[テンプレートの編集] をクリックします。

  3. コントロール テンプレートの編集スコープで、Grid の子要素である Border を削除します。

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

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

  6. Rectangle 要素を右クリックして [順序] をポイントし、[最背面に移動] をクリックして ContentPresenter 要素の後ろに重ねます。

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

    Cc294783.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

    Cc294783.alert_tip(ja-jp,Expression.10).gifヒント :

    [トリガ] のすべてのトリガとアクションを表示するには、[組み合わせ] パネルの各ウィンドウの調整が必要な場合があります。ウィンドウのサイズを変更するには、マウスを使用します。

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

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

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

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

  12. アプリケーションを実行して (F5)、効果を確認してください。

関連項目

概念

SimpleButton

トリガの追加と削除

トリガの概要

単純なアニメーションの作成