WP7应用开发笔记(12) 添加页面动画
2012-01-26 22:02
465 查看
页面动画就是页面的切换的动画过度效果。
平时使用Wp手机的系统程序都是像翻页一样的过度效果,我下面就准备完成简单的添加这样的效果。
这里可以下载:
http://silverlight.codeplex.com/
安装后可以在C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit 找到[32位系统去掉(x86)],
引用到项目中就可以了,里面还有不少增强控件也非常实用,相信大家都用过了。
不过这里主要使用的是TransitionService.NavigationInTransition
找到 RootFrame = new PhoneApplicationFrame();
替换成 RootFrame = new TransitionFrame();
第二步,在页面上添加效果代码
先添加名称空间xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
然后再<phone:PhoneApplicationPage>元素下添加
OK简单2步就完成了一个页面的翻页动画效果。
Toolkit 提供了很多动画效果都在Microsoft.Phone.Controls.Toolkit\Transitions\Transitions 里面,
还可以继承TransitionElement实现自己的动画。
不过我觉得默认的TurnstileTransition最满意,太炫了影响使用。
方法也很简单
需要效果的页面添加一个属性Style="{StaticResource TransitionPageStyle}"就可以了
平时使用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}"就可以了
相关文章推荐
- WP7应用开发笔记(12) 添加页面动画
- WP7应用开发笔记 TiltEffect为控件添加倾斜的触控响应效果
- WP开发笔记——WP APP添加页面跳转动画
- WP7应用开发笔记 继承BitmapSource并使用独立存储来缓存远程的图片
- WP7应用开发笔记-技巧 使用VisualState布置屏幕方向处理
- WP7应用开发笔记(15) 推送通知
- 精通JavaScript开发课时12(DOM操作应用)笔记
- WP7应用开发笔记(16) 本地Toast 提示
- 基于MT7688模块的开发笔记12——给MT7688开发板添加WiFi功能
- Android应用开发笔记(12):Android应用的自动升级、更新模块的实现
- Django 开发学习笔记(8)- 开发表单页面,让用户添加内容
- WP7中为页面跳转添加动画效果
- iOS开发笔记--添加cell动画
- 【Xamarin开发 Android 系列 12】 创建一个Json读取数据应用-添加定位服务
- STM32F412应用开发笔记之二:基本GPIO控制
- Android应用开发笔记(12):Android应用的自动升级、更新模块的实现
- Chrome扩展及应用开发 入门笔记(七)带选项页面的扩展与本地存储
- Android应用开发笔记(12):Android应用的自动升级、更新模块的实现
- android应用开发揭秘examples_04-12笔记(Button的使用)
- STM32F412应用开发笔记之一:初识NUCLEO-F412ZG