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         }

就這樣，一個最基本的兩個頁面動畫跳轉效果就做好了

 

下面是效果

想了想還是附帶上源碼吧：

http://dl.dbank.com/c0hcs4rabx