Windows Phone 7 兩個頁面動畫跳轉
兩個頁面之間創建帶有動畫的過渡效果基本步驟：
①截獲當前任何表明用戶正在離開當前頁面的操作
②啟動一個動畫故事板來隱藏當前頁面
③導航到下一個頁面
④截獲新頁面的導航
⑤啟動一個動畫故事板來顯示新頁面
首先新建一個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();
}就這樣，一個最基本的兩個頁面動畫跳轉效果就做好了
下面是效果截圖
本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！