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 ,