ページの遷移時のTransitionとしてStoryboardを使う。

hirobe — Tue, 17 Jan 2012 13:29:29 +0000

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);
	}
	}

	}

view raw StoryboardTransition.cs hosted with ❤ by GitHub

こんな感じで、xamlを書く。Animation=”{StaticResource …}”にBlendで書いたStoryboardのx:Nameを記載すること。（TransitionService自体の使い方はここでは書かないので、テキトウに調べること）


	:
	xmlns:local="clr-namespace:YourNamespace"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	:
	>





	Animation="{StaticResource Storyboard1}"/>



	Animation="{StaticResource Storyboard2}"/>








	Animation="{StaticResource Storyboard3}"/>



	Animation="{StaticResource Storyboard4}"/>

view raw Test.xaml hosted with ❤ by GitHub

参考文献：

参考にしたのは、Windows Phone Toolkit Aug 2011 in Depth。というか、これに書かれているtransition3クラスでうまく動かなかった所(Storyboard.SetTargetするとエラーになる)を直しただけである。

感想とか：

Blendでアニメーションを記述すると、XAMLがすっごく長くなるんだよね。これ、xaml.csファイルみたいに別のファイルに分けれないのかな。

コメント等あればTwitterかFacebookに@ください。

hirogram » Windows Phone7

ページの遷移時のTransitionとしてStoryboardを使う。