- 追加された行はこの色です。
- 削除された行はこの色です。
[[WP7 に戻る>wp7]]
#setlinebreak(on);
[[WP TIPS に戻る>wp7/tips]]
#lsx(linkstr=headline,sort=date);
*Silverlight Toolkit を使わずカスタム Transition をする [#f40850f9]
サンプルプロジェクト [[CustomTransition.zip>https://skydrive.live.com/redir.aspx?cid=793b87c06d2f0cd5&resid=793B87C06D2F0CD5!1912&parid=793B87C06D2F0CD5!223]]
*その他 [#t19ce0df]
WP7 で画面遷移時のアニメーションと言えば、[[Silverlight Toolkit>http://silverlight.codeplex.com/]] の Transition を使用する方法が、一番簡単で確実です。
**DataTemplate 内から ViewModel のコマンドを実行する方法 [#c45b67f3]
詳しくはこちら、[[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% に戻してあげる必要があります。
