• 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="phoneApplicationPage">
    18 <EasingDoubleKeyFrame KeyTime="0" Value="-720"/>
    19 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
    20 </DoubleAnimationUsingKeyFrames>
    21 </Storyboard>
    22 </phone:PhoneApplicationPage.Resources>
    23 <phone:PhoneApplicationPage.RenderTransform>
    24 <CompositeTransform CenterX="240" CenterY="400"/>
    25 </phone:PhoneApplicationPage.RenderTransform>

    然后在Page1.xaml.cs的初始化函数里写如下代码:

    1 public Page1()
    2 {
    3 InitializeComponent();
    4
    5 this.DisplayPage.Begin();
    6 }

    就这样,一个最基本的两个页面动画跳转效果就做好了

    作者:wpf之家
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    poj1047
    poj1129
    poj1050
    C#中break、continue的用法
    关于一个不大常用的SQL数据类型-UNIQUEIDENTIFIER
    关于net2.0里面新出现的类backgroundworker的应用
    深入讲解SQL Union和Union All的使用方法
    让你一次性搞定堆、栈、值类型、引用类型 (转载)
    EXEC与sp_executesql的区别及应用(转)
    几种常用排序算法总结(转载)
  • 原文地址:https://www.cnblogs.com/wpf123/p/2342865.html
Copyright © 2020-2023  润新知