Windows Phone 7 两个页面动画跳转
fmms
13年前
两个页面之间创建带有动画的过渡效果基本步骤：
①截获当前任何表明用户正在离开当前页面的操作
②启动一个动画故事板来隐藏当前页面
③导航到下一个页面
④截获新页面的导航
⑤启动一个动画故事板来显示新页面
首先新建一个Windows Phone的应用程序
MainPage.xaml里面的动画效果代码：
<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="HidePage"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage"> <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-480"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage"> <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-800"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </phone:PhoneApplicationPage.Resources> <phone:PhoneApplicationPage.RenderTransform> <CompositeTransform/> </phone:PhoneApplicationPage.RenderTransform>
然后拖一个Button控件，并触发Click事件，导航到Page1.xaml
private void button1_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative)); }在MainPage.xaml.cs里面重写OnNavigatingFrom方法：
protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e) { base.OnNavigatingFrom(e); if (UriToNavigateTo == null) { e.Cancel = true; UriToNavigateTo = e.Uri; this.HidePage.Begin(); this.HidePage.Completed += new EventHandler(HidePage_Completed); } else { UriToNavigateTo = null; } } private void HidePage_Completed(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative)); } 接着新建一个WindowsPhone页面Page1.xaml
Page1.xaml的动画效果代码如下：
<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="DisplayPage"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="phoneApplicationPage"> <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> <EasingDoubleKeyFrame KeyTime="0:0:3" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="phoneApplicationPage"> <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="phoneApplicationPage"> <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-720"/> <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </phone:PhoneApplicationPage.Resources> <phone:PhoneApplicationPage.RenderTransform> <CompositeTransform CenterX="240" CenterY="400"/> </phone:PhoneApplicationPage.RenderTransform>
然后在Page1.xaml.cs的初始化函数里写如下代码：
public Page1() { InitializeComponent(); this.DisplayPage.Begin(); }就这样，一个最基本的两个页面动画跳转效果就做好了
下面是效果截图
