試してみよう : ボタンへのアニメーションの追加
.png "This page applies to WPF projects only")
SimpleButton スタイルでは、状態の変化がアニメーション化されません。その代わりに、状態の変更があるときにブラシ リソースを設定します。Microsoft Expression Blend では、ブラシ リソースから色へのアニメーション化ができません。その代わりとして、次の手順で、プロパティ トリガーを使用してアニメーション タイムラインを開始する方法を示します。
ボタンをアニメーション化するには
Expression Blend のアートボードに [SimpleButton] オブジェクトを描画します。
.gif "ヒント")
ヒント :Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。
[オブジェクトとタイムライン] パネルでボタンを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。
コピーの作成の詳細については、「リソースの作成」を参照してください。
ヒント :テンプレートの編集モードを終了して、ドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [上へスコープ]
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png")
をクリックします。既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。
コントロール テンプレートの編集スコープで、[Grid] の子オブジェクトの [Border] を削除します。
[Grid] オブジェクトをダブルクリックしてアクティブにし、子オブジェクトを追加できるようにします。
グリッドに [四角形]
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(JA-JP,Expression.30).png")
を描画します。[Rectangle] オブジェクトを右クリックして [順序] をポイントし、[最背面に移動] をクリックして [ContentPresenter] オブジェクトの後ろ側に動かします。
[プロパティ] パネルの [ブラシ] で、四角形の [Fill] プロパティに新しい値を設定します。これがボタンの既定の色になります。
ヒント :元のテンプレートの [Border] 子オブジェクトは、テンプレートのバインドを使用して、テンプレートが適用されるコントロールの [Background] プロパティに、テンプレートの [Fill] プロパティをバインドします。テンプレートのバインドによって、オブジェクト プロパティをテンプレートに流用できます。これにより、同じテンプレートを使用して、背景色が異なる複数のボタンを作成できます。ただし、テンプレートにバインドされたプロパティから特定の色へのアニメーション化はできません。これは、[Fill] プロパティの既定の色がテンプレートに設定されているためです。
[トリガー] パネルで [IsMouseOver = True] トリガーをクリックし、トリガーの記録をアクティブにします。次に、[アクティブ化する際のアクション] の横にある [新しいアクションの追加]
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(JA-JP,Expression.30).png")
をクリックして、アニメーション タイムラインを追加します。ポインターをボタンに合わせたときにトリガーするタイムラインが存在しない場合、[タイムラインが必要です] ウィンドウが表示されます。[OK] をクリックして新しいタイムラインを作成し、記録を開始します。ヒント :[トリガー] パネルにあるすべてのトリガーとアクションを見るには、ウィンドウのサイズを変更しなければならない場合があります。ウィンドウのサイズを変更するには、マウスを使用します。
[オブジェクトとタイムライン] パネルで、再生ヘッド
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(JA-JP,Expression.30).png")
を 1 秒のマークに移動した後、[プロパティ] パネルの [ブラシ] にある [Fill] プロパティに新しい値を設定します。[Fill] プロパティの値を変更すると、タイムラインにキーフレーム
.png "Cc294783.fa3c696d-5463-4000-8a6b-650fe6759bf7(JA-JP,Expression.30).png")
が表示されます。キーフレームは、0 秒に設定する必要はありません。ポインターがボタン上に移動すると、タイムラインでは以前の塗りつぶしから 1 秒に設定された塗りつぶしに移行するアニメーション化を行います。[トリガー] パネルで、[IsMouseOver = True] トリガーを再度クリックしてアニメーション タイムラインを終了し、トリガーの記録モードに戻ります。[非アクティブ化する際のアクション] の横にある [新しいアクションの追加]
をクリックします。ポインターがボタンから離れたときに実行するアニメーション タイムラインを作成または選択します。たとえば、前のタイムラインを使用して、タイムラインに [Stop] メソッドを選択することができます。必要に応じて、[トリガー] パネルで他の状態のアニメーション タイムラインを作成することができます。
F5 キーを押してアプリケーションをテストし、変更結果を確認します。