65.9K
CodeProject 正在变化。 阅读更多。
Home

Windows Phone 7 导航过渡

Azim Zahir
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (5投票s)

2012年3月12日

CPOL

2分钟阅读

viewsIcon

59562

downloadIcon

1445

本文介绍如何在 Windows Phone 7 中为页面过渡添加动画

引言

在本文中，我将描述如何在 Windows Phone 7 应用程序中创建页面过渡动画。 我创建了一个 Windows Phone 7 项目来演示这一点，该项目使用 XAML 代码来制作过渡动画。 最后，我们将看到如何使用代码隐藏代码制作过渡动画。

在使用页面过渡动画之前，必须将对 Microsoft.Phone.Controls.Toolkit.dll 文件的引用添加到任何项目中。 此文件位于以下位置

C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11\Bin

背景

页面过渡动画允许您指定页面在从一个页面导航到另一个页面期间在 Windows Phone 7 应用程序中出现或消失的方式。 页面过渡动画是使用 StoryBoard 的简单替代方案。

共有 5 种过渡类型，如下所示

  • RollTransition (滚动过渡)
  • RotateTransition (旋转过渡)
  • SlideTransition (滑动过渡)
  • SwivelTransition (旋转过渡)
  • TurnstileTransition (转门过渡)

除了 RollTransition 之外的所有过渡都有一个 Mode 属性，该属性指定您想要的过渡类型。

您可以为进入和退出页面导航指定向前和向后过渡。 以下是四种页面导航过渡的表示形式

Using the Code

首先，我在 Microsoft Visual Studio 2010 Express for Windows Phone 中创建了一个新的 Windows Phone 7 项目。 Visual Studio 将一个名为 MainPage 的默认页面添加到项目中。 我添加了一个按钮并自定义了该页面以使其具有以下外观。

然后我添加了两个页面，Page1 和 Page2，如下所示

以下是 MainPage 上用于导航到 FirstPage 的按钮的代码隐藏代码

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

以下是 FirstPage 上用于导航到 SecondPage 的按钮的代码隐藏代码

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}

我为 FirstPage 提供了 In 和 Out 过渡。 toolkit namespace 作为 FirstPage 上 <phone:PhoneApplicationPage> 根元素的属性添加，如下所示

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

以下是 FirstPage 的 XAML 代码，用于制作到 FirstPage 和从 FirstPage 转换的动画

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

上述代码为 FirstPage 上的 In 和 Out 过渡提供了 TurnstileTransition。 <toolkit:TurnstileTransition> 元素的 Mode 属性指定要应用的过渡类型。

FirstPage 的完整 XAML 代码如下

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneNavigationTransitions.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Navigation Transitions" 
                       Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="First Page" Margin="9,-7,0,0" 
                       Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Lime">
            <Button Content="Go to Second Page" Height="72" HorizontalAlignment="Left" 
             Margin="93,237,0,0" Name="button1" VerticalAlignment="Top" Width="270" 
             Click="button1_Click" />
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

在 App.xaml.cs 文件的 InitializePhoneApplication() 方法中，使用 TransitionFrame 类的新实例初始化 RootFrame，如下所示

RootFrame = new TransitionFrame();

以下是 App.xaml.cs 文件中 InitializePhoneApplication() 方法的代码

private void InitializePhoneApplication()
{
     if (phoneApplicationInitialized)
        return;

     // Create the frame but don't set it as RootVisual yet; this allows the splash
     // screen to remain active until the application is ready to render.
     // RootFrame = new PhoneApplicationFrame();
        RootFrame = new TransitionFrame();
        RootFrame.Navigated += CompleteInitializePhoneApplication;

     // Handle navigation failures
        RootFrame.NavigationFailed += RootFrame_NavigationFailed;

     // Ensure we don't initialize again
        phoneApplicationInitialized = true;
}

现在运行该项目将在从 MainPage 导航到 FirstPage 时显示过渡动画。 当您在 SecondPage 上单击手机的“后退”按钮时，将自动发生向后导航。

如果我们想使用代码隐藏代码制作过渡动画，我们必须覆盖目标页面上的 OnNavigatedTo 方法，如下所示

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    SlideTransition transition = new SlideTransition();
    transition.Mode = SlideTransitionMode.SlideRightFadeIn;
    PhoneApplicationPage page = (PhoneApplicationPage)
                                ((PhoneApplicationFrame)Application.Current.RootVisual).Content;
    ITransition trans = transition.GetTransition(page);
    trans.Completed += delegate
    {
        trans.Stop();
    };
    trans.Begin();
}

每次导航到页面时都会执行上述代码。 在此代码中，SlideTransition 类用于创建和应用 SlideRightFadeIn 效果。

关注点

我使用 Microsoft Visual Studio 2010 Express for Windows Phone 创建了这个项目。

© . All rights reserved.