如何做一个比较酷的界面切换【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文件里添加:

// RootFrame = new PhoneApplicationFrame();  //注释掉
2 RootFrame = new TransitionFrame();
 

Ok, 这样就基本完工了。应用可以按照每个页面定义的格式进行界面动画切换了。

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

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

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

posted @ 2011-11-10 11:47  OMG! 日记  阅读(3519)  评论(5编辑  收藏  举报