当前位置:编程学习 > wap >>

Windows Phone 7两个页面动画跳转

两个页面之间创建带有动画的过渡效果基本步骤:
①截获当前任何表明用户正在离开当前页面的操作
②启动一个动画故事板来隐藏当前页面
③导航到下一个页面
④截获新页面的导航
⑤启动一个动画故事板来显示新页面
 
首先新建一个Windows Phone的应用程序
MainPage.xaml里面的动画效果代码:
 1 <phone:PhoneApplicationPage.Resources>
 2         <Storyboard x:Name="HidePage">
 3             <DoubleAnimationUsingKeyFrames
 4                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
 5                 Storyboard.TargetName="phoneApplicationPage">
 6                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 7                 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-480"/>
 8             </DoubleAnimationUsingKeyFrames>
 9             <DoubleAnimationUsingKeyFrames
10                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
11                 Storyboard.TargetName="phoneApplicationPage">
12                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
13                 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-800"/>
14             </DoubleAnimationUsingKeyFrames>
15         </Storyboard>
16     </phone:PhoneApplicationPage.Resources>
17     <phone:PhoneApplicationPage.RenderTransform>
18         <CompositeTransform/>
19     </phone:PhoneApplicationPage.RenderTransform>

然后拖一个Button控件,并触发Click事件,导航到Page1.xaml
1 private void button1_Click(object sender, RoutedEventArgs e)
2         {
3             this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
4         }

在MainPage.xaml.cs里面重写OnNavigatingFrom方法:
 1 protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
 2         {
 3             base.OnNavigatingFrom(e);
 4
 5             if (UriToNavigateTo == null)
 6             {
 7                 e.Cancel = true;
 8                 UriToNavigateTo = e.Uri;
 9                 this.HidePage.Begin();
10                 this.HidePage.Completed += new EventHandler(HidePage_Completed);
11             }
12             else
13             {
14                 UriToNavigateTo = null;
15             }
16         }
17
18         private void HidePage_Completed(object sender, EventArgs e)
19         {
20             this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
21         }

接着新建一个WindowsPhone页面Page1.xaml
Page1.xaml的动画效果代码如下:
 1 <phone:PhoneApplicationPage.Resources>
 2         <Storyboard x:Name="DisplayPage">
 3             <DoubleAnimationUsingKeyFrames
 4                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
 5                 Storyboard.TargetName="phoneApplicationPage">
 6                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 7                 <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
 8             </DoubleAnimationUsingKeyFrames>
 9             <DoubleAnimationUsingKeyFrames
10                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
11                 Storyboard.TargetName="phoneApplicationPage">
12                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
13                 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
14             </DoubleAnimationUsingKeyFrames>
15             <DoubleAnimationUsingKeyFrames
16                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
17                 Storyboard.TargetName=&q

补充:移动开发 , Windows Phone ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,