#setlinebreak(on);
[[WP TIPS に戻る>wp7/tips]]

*Silverlight Toolkit を使わずカスタム Transition をする。 [#f40850f9]
*Silverlight Toolkit を使わずカスタム Transition をする [#f40850f9]
サンプルプロジェクト [[CustomTransition.zip>https://skydrive.live.com/redir.aspx?cid=793b87c06d2f0cd5&resid=793B87C06D2F0CD5!1912&parid=793B87C06D2F0CD5!223]]

WP7 で画面遷移時のアニメーションと言えば、[[Silverlight Toolkit>http://silverlight.codeplex.com/]] の Transition を使用する方法が、一番簡単で確実です。

詳しくはこちら、[[TransitionService>http://ch3cooh.jp/index.php/tips/windowsphone7/formcontrol/transitionservice/]]

しかしながら [[Silverlight Toolkit>http://silverlight.codeplex.com/]] にデフォルトで用意されている Transition ではなく、もっと細かく制御した画面遷移をしたい場合もあるかと思います。

#htmlinsert(u2b,id=0k3zaXcIokg,width=480,height=360;)

**画面遷移の方法 [#g971f4f1]
[[Silverlight Toolkit>http://silverlight.codeplex.com/]] の画面遷移は、 PhoneApplicationFrame クラスを継承した TransitionFrame クラス上で実装され、アニメーションが行われています。

しかしながら [[Silverlight Toolkit>http://silverlight.codeplex.com/]] を使用しないでも、PhoneApplicationPage.OnNavigatedTo メソッドで画面を開いたときのアニメーション, OnNavigatingFrom メソッドで画面を閉じるときのアニメーションを実行することで、画面遷移のアニメーションを行うことが可能です。

まず Expression Blend で画面を開くときのアニメーションと、閉じるときのアニメーションを StoryBoard で作成しておきます。

次に画面が開くときのアニメーションは、以下のコードのようにすることで実現できます。

 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 {          
    // 戻ってきたときのアニメーション
    if (e.NavigationMode == System.Windows.Navigation.NavigationMode.Back)
        this.OpenAnimation.Begin();
    base.OnNavigatedTo(e);
 }

次に、閉じるアニメーション(他のページへと遷移するとき) は、少し工夫が必要です。
ページが閉じるとき == OnNavigatingFrom メソッド実行時なので、OnNavigatingFrom 内でアニメーションを実行すれば良いと思いがちですが、これではダメです。
アニメーション実行中に他のページに移動してしまい、結果アニメーションがされなくなります。
以下のコードのように、一度移動要求があったらそれをキャンセルして閉じるアニメーションを開始し、それが終了したときに改めて次のページに移動します。
このようにすることでアニメーション終了までまってから移動するので、正しくアニメーションをすることが可能です。

 string nextUri = "";
 
 protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
 {
    // まず初回の移動はキャンセルし、閉じるアニメーションをしてから次ページに移動する。
    if ("".Equals(nextUri))
    {
        // この移動はキャンセル
        e.Cancel = true;
 
        // 次に移動するページ URI を記録しておく
        this.nextUri = e.Uri.ToString();
 
        // アニメーション終了後移動
        this.CloseAnimation.Completed += (s, arg) =>
        {
            this.NavigationService.Navigate(new Uri(this.nextUri, UriKind.Relative));
        };
 
        // 終了アニメーションを実行
        this.CloseAnimation.Begin();
        return;
    }
 
    base.OnNavigatingFrom(e);
 }

というわけで Silverlight Toolkit を使用しなくても、画面遷移アニメーションを作成することが可能です。また StoryBoard ベースのアニメーションのため、非常に柔軟性に富んだアニメーションをすることが出来ます。

**注意点 [#r3d292e3]
大きな注意点が一つあります。
-最初のページから次のページへ行く際のアニメーションで、LayoutRoot.Opacity を 100%→0% にする
として次のページに移動し、そのページから戻ってきた際、最初のページの LayoutRoot.Opacity == 0% のままになっています。
なので最初のページに戻った際には、LayoutRoot.Opacity を 0%→100% に戻してあげる必要があります。