首先要安装WPToolkit
然后将App.xaml.cs中 InitializePhoneApplication() 函数里的RootFrame修改成
RootFrame=new TransitionFrame();
其次在XAML中添加
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
最后在Page元素下添加
<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>
toolkit提供了5种动画效果 1.RollTransition 2.RotateTransition 3.SlideTransition 4.SwivelTransition 5.TurnstileTransition;我们还可以通过继承TransitionElement实现自己的动画。
如果很多页面需要这些效果的话,也可以将效果作为样式添加到资源文件中以提供其他页面使用
<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>
0 Comments