WP7应用开发笔记(12) 添加页面动画

页面动画就是页面的切换的动画过度效果。

平时使用Wp手机的系统程序都是像翻页一样的过度效果,我下面就准备完成简单的添加这样的效果。

 

使用Windows Phone Toolkit

其实这个动画效果不需要自己实现,Windows Phone Toolkit 已经封装好了现成库,我们只需要调用就可以了。

这里可以下载:

http://silverlight.codeplex.com/

安装后可以在C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit 找到[32位系统去掉(x86)],

引用到项目中就可以了,里面还有不少增强控件也非常实用,相信大家都用过了。

不过这里主要使用的是TransitionService.NavigationInTransition

 

为页面添加过度效果

第一步,必须要有一个不可缺少的准备工作,就是找到app.xaml.cs里面

找到    RootFrame = new PhoneApplicationFrame();

替换成 RootFrame = new TransitionFrame();

 

第二步,在页面上添加效果代码

先添加名称空间xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 

然后再<phone:PhoneApplicationPage>元素下添加

 

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

 

OK简单2步就完成了一个页面的翻页动画效果。

Toolkit 提供了很多动画效果都在Microsoft.Phone.Controls.Toolkit\Transitions\Transitions 里面,

还可以继承TransitionElement实现自己的动画。

不过我觉得默认的TurnstileTransition最满意,太炫了影响使用。

 

将过度效果作为页面样式

如果页面比较多每个页面都想要效果,那么可以将效果作为样式添加到系统资源文件里或者直接写在App.xaml里。

方法也很简单

 

<Application.Resources>
<Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</Setter.Value>
</Setter>
<Setter Property="toolkit:TransitionService.NavigationOutTransition">
<Setter.Value>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>

需要效果的页面添加一个属性Style="{StaticResource TransitionPageStyle}"就可以了

posted @ 2012-01-26 22:02  kiminozo  阅读(2015)  评论(7编辑  收藏  举报