Windows PhoneでTransitionServiceを使って画面遷移時にアニメーションを行う

スマートフォンのアプリケーションと言えば、画面遷移時にページ間に繋がりを持たせる為にアニメーションを挿入するのが一般的です(iPhoneの場合ですとNavigationControllerによる横スライドなど)。画面遷移時のアニメーションのことは一般的に「トランジション」と呼ばれます。

Windows Phone SDKだけを使用した場合では、画面遷移時にトランジションアニメーションが行われません。……というよりは、OSとしてトランジション機能を提供していません。Windows Phone Toolkitを使用して、開発者が明示的にどのようなアニメーションをさせるのかを指定する必要があります。

前準備

Visual StudioのWizardでテンプレートプロジェクトを作成します。MainPage.xamlは既にあると思いますので、画面遷移先のページを追加してください。ここでは名前をSubPage.xamlをします。

MainPage.xaml、SubPage.xamlのそれぞれに下記の様なボタンを配置します。

MainPage.xamlに配置したボタンの名前はbtnMoveNextにしました。タップ時の動作としてSubPage.xamlへ遷移するように指定しています。

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

SubPage.xamlに配置したボタンの名前はbtnMovePrevにしました。タップ時の動作としてMainPage.xamlへ遷移するように指定しています。

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

以上にて、本筋と関係ないお話は終わりです。

トランジションアニメーションを行う

ソリューションエクスプローラのReferencesを右クリックして、[Add References...]を選択します。Silverlight for Windows Phone ToolkitのアセンブリであるMicrosoft.Phone.Controls.Toolkitを追加します。

App.xaml.csのInitializePhoneApplicationメソッドを、PhoneApplicationFrameクラスからTransitionFrameクラスに変更します。この変更を忘れてしまうとアニメーションされませんので気をつけてください。

    //RootFrame = new PhoneApplicationFrame();
    RootFrame = new TransitionFrame();

トランジションアニメーションを行いたいページのxamlの名前空間にtoolkitを追加します。

    shell:SystemTray.IsVisible="True"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

名前空間を追加したら次にトランジションの定義を行います。大きく分けて、画面へ入ってきた時と画面から出て行く時で定義を行います。更に詳細に「裏面に隠れてしまう画面のアニメーション」と「前面に出てくる画面のアニメーション」を定義します。

    shell:SystemTray.IsVisible="True"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">
    
    <!-- 画面に入ってきた時のアニメーション -->
    <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>

TransitionService.NavigationInTransitionにて画面が入ってきた時のトランジションを定義します。TransitionService.NavigationOutTransitionにて反対に画面から出て行く場合のトランジションを定義します。

若干判りにくいのですが、MainPageからSubPageへ遷移する場合には、MainPageのForwardOutとSubPageのForwardInのトランジションが行われ、SubPageからMainPageに戻る場合には、SubPageのBackwardInとMainPageのBackwardOutが行われます。

サンプルプロジェクトがToolkitに含まれていますので実際に動かして見た方が良いかもしれません。