Windows Phone7の話。Expression Blendで作ったStoryboardをページ遷移時に動かすためのコードを書いてみた。Windows Phone ToolkitのTransitionServiceよりも、ちょっとだけ柔軟になる。
内容：
ToolkitにあるTransitionServiceクラスを使うと、ページ遷移時にアニメーションを動かせる。Windows Phoneっぽい、画面が奥に回転するアニメーションとかを指定できる。この際に指定できるアニメーションは5種類。これだけでも、動きのあるページ遷移を作れる。が、凝った動作、たとえば、要素ごとに異なる動きをするとかは無理だ。
いっぽう、Expression BlendのStoryboardを使うとFlashの如くに凝ったアニメーションも記述できる。
そこで、TransitionServiceを使いつつExpression Blendで作ったStoryboardを指定できるクラスを書いてみた。
| // see : Windows Phone Toolkit Aug 2011 in depth-v1 | |
| using System; | |
| using System.Windows; | |
| using System.Windows.Media.Animation; | |
| using Microsoft.Phone.Controls; | |
| namespace YourNamespace | |
| { | |
| public class StoryboardTransition : TransitionElement | |
| { | |
| public static readonly DependencyProperty AnimationProperty = | |
| DependencyProperty.Register( | |
| "Animation", typeof(Storyboard), | |
| typeof(StoryboardTransition), null); | |
| public Storyboard Animation | |
| { | |
| get | |
| { | |
| return (Storyboard)GetValue(AnimationProperty); | |
| } | |
| set | |
| { | |
| SetValue(AnimationProperty, value); | |
| } | |
| } | |
| public override ITransition GetTransition(UIElement element) // elementにはpageが入る。 | |
| { | |
| Storyboard storyboard = this.Animation; | |
| if (!(element is PhoneApplicationPage)) | |
| { | |
| Storyboard.SetTarget(storyboard, element); | |
| } | |
| return new Transition(element,storyboard); | |
| } | |
| } | |
| } |
こんな感じで、xamlを書く。Animation=”{StaticResource …}”にBlendで書いたStoryboardのx:Nameを記載すること。（TransitionService自体の使い方はここでは書かないので、テキトウに調べること）
| <phone:PhoneApplicationPage | |
| : | |
| xmlns:local="clr-namespace:YourNamespace" | |
| xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" | |
| : | |
| > | |
| <toolkit:TransitionService.NavigationInTransition> | |
| <toolkit:NavigationInTransition> | |
| <toolkit:NavigationInTransition.Backward> | |
| <local:StoryboardTransition | |
| Animation="{StaticResource Storyboard1}"/> | |
| </toolkit:NavigationInTransition.Backward> | |
| <toolkit:NavigationInTransition.Forward> | |
| <local:StoryboardTransition | |
| Animation="{StaticResource Storyboard2}"/> | |
| </toolkit:NavigationInTransition.Forward> | |
| </toolkit:NavigationInTransition> | |
| </toolkit:TransitionService.NavigationInTransition> | |
| <toolkit:TransitionService.NavigationOutTransition> | |
| <toolkit:NavigationOutTransition> | |
| <toolkit:NavigationOutTransition.Backward> | |
| <local:StoryboardTransition | |
| Animation="{StaticResource Storyboard3}"/> | |
| </toolkit:NavigationOutTransition.Backward> | |
| <toolkit:NavigationOutTransition.Forward> | |
| <local:StoryboardTransition | |
| Animation="{StaticResource Storyboard4}"/> | |
| </toolkit:NavigationOutTransition.Forward> | |
| </toolkit:NavigationOutTransition> | |
| </toolkit:TransitionService.NavigationOutTransition> | |
| </phone:PhoneApplicationPage> |
参考文献：
参考にしたのは、Windows Phone Toolkit Aug 2011 in Depth。というか、これに書かれているtransition3クラスでうまく動かなかった所(Storyboard.SetTargetするとエラーになる)を直しただけである。
感想とか：
Blendでアニメーションを記述すると、XAMLがすっごく長くなるんだよね。これ、xaml.csファイルみたいに別のファイルに分けれないのかな。
コメント等あればTwitterかFacebookに@ください。