- 追加された行はこの色です。
- 削除された行はこの色です。
#setlinebreak(on);
[[WP TIPS に戻る>wp7/tips]]
*Silverlight Toolkit を使わずカスタム Transition をするビヘイビア [#r1e93ff7]
サンプルプロジェクト [[CustomTransition.zip>https://skydrive.live.com/redir.aspx?cid=793b87c06d2f0cd5&resid=793B87C06D2F0CD5!1912&parid=793B87C06D2F0CD5!223]]
サンプルプロジェクト [[CustomTransitionBehavior.zip>https://skydrive.live.com/redir.aspx?cid=793b87c06d2f0cd5&resid=793B87C06D2F0CD5!1913&parid=793B87C06D2F0CD5!223]]
WP7 で画面遷移時のアニメーションと言えば、[[Silverlight Toolkit>http://silverlight.codeplex.com/]] の Transition を使用する方法が、一番簡単で確実です。
[[Silverlight Toolkit を使わずカスタム Transition をする>wp7/tips/custom_transition]] で紹介した、Silverlight Toolkit を使用しないトランジション方法ですが、紹介した方法だとコードビハインドでアニメーションの制御をしなければなりません。
これでは再利用が難しくコードの見通しも良くありませんので、ビヘイビアにまとめました。
詳しくはこちら、[[TransitionService>http://ch3cooh.jp/index.php/tips/windowsphone7/formcontrol/transitionservice/]]
※生意気にも Reactive Extentions を使用していますが、コードが汚いです。綺麗にして頂ける方いらっしゃったら参考にさせて下さい。m(_ _)m
しかしながら [[Silverlight Toolkit>http://silverlight.codeplex.com/]] にデフォルトで用意されている Transition ではなく、もっと細かく制御した画面遷移をしたい場合もあるかと思います。
#htmlinsert(u2b,id=LXd1eojNEbQ,width=480,height=360;)
#htmlinsert(u2b,id=0k3zaXcIokg,width=480,height=360;)
**CustomTransitionBehavior の動き [#o872084c]
まず CustomTransitionBehavior には、ストーリーボードを持つ 4つの依存関係プロパティがあります。
|ForwardIn|画面を開いた時のアニメーション|
|ForwardOut|新しいページを開いた際のアニメーション|
|BackwardIn|他のページから戻ってきた際のアニメーション|
|BackwardOut|元のページに戻る際のアニメーション|
※ Silverlight Toolkit の Transition と同じです。
CustomTransitionBehavior は、これらの依存関係プロパティに設定されたストーリーボードを画面遷移に合わせて実行します。
アニメーションが実行される順番は、
-MainPage から NextPage への画面遷移時
+MainPage.ForwardOut アニメーション実行
+NextPage.ForwardIn アニメーション実行
-NextPage から MainPage へ戻る際の画面遷移時
+NextPage.BackwardOut アニメーション実行
+MainPage.BackwardIn アニメーション実行
となります。
**CustomTransitionBehavior の使用方法 [#t47093d1]
+プロジェクトに追加とコンパイル
Visual Studio で CustomTransitionBehavior.cs をプロジェクトに追加して、コンパイルが通るのを確認します。
&br;
+Expression Blend で上記 4種類の画面遷移用ストーリーボードの作成します。
+Blend の「アセット」→「ビヘイビアー」にある CustomTransitionBehavior を PhoneApplicationPage にドラッグ＆ドロップします。
#ref(customtransitionbehavior-01.jpg,nolink);
&br;
+ドラッグ＆ドロップした CustomTransitionBehavior の ForwardIn プロパティに作成した、ストーリーボード名を設定します。
ForwardIn プロパティをクリックし「カスタム式」で作成したストーリーボードを指定します。
{StaticResource ストーリーボード名} とします。
#ref(customtransitionbehavior-02.jpg,nolink);
&br;
+後は起動すれば、画面遷移アニメーションが行われます。
サンプルプロジェクトが上にありますので、確認してみて下さい。
