Skip to main content.

公告

搜索

最新评论

windows phone下实现一个比较酷的界面切换

当你看一些Windows Phone 应用程序时,有可能你注意到比较炫的界面切换, 显然这个东西会大大增加我们的用户体验。

由于我们团队项目中美化设计需求,就做了一番调查,现在发个帖来总结下自己的心得。

界面的切换,可以用Windows Phone Toolkit中的TransitionService来搞定。

要使用TransitionService,首先需要在工程中添加一个reference引 用:Microsoft.Phone.Controls.Toolkit.dll。之后,在要进行切换的page的XAML文件里LayoutRoot外 添加如下Transition Service代码

 1 <toolkit:TransitionService.NavigationInTransition>
 2           <toolkit:NavigationInTransition>
 3               <toolkit:NavigationInTransition.Backward>
 4                   <toolkit:TurnstileTransition Mode="BackwardIn"/>
 5               </toolkit:NavigationInTransition.Backward>
 6               <toolkit:NavigationInTransition.Forward>
 7                   <toolkit:TurnstileTransition Mode="ForwardIn"/>
 8               </toolkit:NavigationInTransition.Forward>
 9         </toolkit:NavigationInTransition>
10       </toolkit:TransitionService.NavigationInTransition>
11       <toolkit:TransitionService.NavigationOutTransition>
12           <toolkit:NavigationOutTransition>
13               <toolkit:NavigationOutTransition.Backward>
14                 <toolkit:TurnstileTransition   Mode="BackwardOut"/>
15               </toolkit:NavigationOutTransition.Backward>
16               <toolkit:NavigationOutTransition.Forward>
17                   <toolkit:TurnstileTransition Mode="ForwardOut"/>
18               </toolkit:NavigationOutTransition.Forward>
19           </toolkit:NavigationOutTransition>
20     </toolkit:TransitionService.NavigationOutTransition>
里面定义了一个page的四种模式,用下面的图可以清晰的表达出来

为了实现自动切换,需要在App.cs文件里添加:

1 RootFrame = new PhoneApplicationFrame();
2 RootFrame = new TransitionFrame();
Ok, 这样就基本完工了。应用可以按照每个页面定义的格式进行界面动画切换了。

 为了更好的说明, 附上一些代码:

http://files.cnblogs.com/OMG-Team/Transitions.zip

里面可以支持  旋杆式界面切换,滑动式界面切换,旋转式界面切换

原文链接:http://www.cnblogs.com/OMG-Team/archive/2011/11/10/2244261.html

Posted by wp7_developer @ 2011-11-10 12:12:06 阅读(495) 评论(0)
上一篇:WP7 Mango HTML5实现动画效果
下一篇:WP7如何实现多语言支持

Feedback

你还可以输入600/600个字符 发表评论
称呼: (必填) 登录 | 开通博客
邮箱: (选填) 你的邮箱地址不会被公开
网站: (选填)
验证码: (必填)