Silverlight for Windows Phone Toolkitに用意されているトランジションの種類

TurnstileTransition以外にもトランジションは用意されています。それぞれの使いどころも合わせて記載します。

各種トランジション

TurnstileTransition

ForwardIn, ForwardOut, BackwardIn and BackwardOut

パネルが右から左に回転したようなトランジションです。Windows Phone 7における画面遷移時の標準的なトランジションです。

    <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>

SwivelTransition

ForwardIn, ForwardOut, FullScreenIn, FullScreenOut, BackwardIn, BackwardOut

パネルを上から下へ回転させたようなトランジションです。ダイアログを表示するときに使うと良いかもしれません。

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:SwivelTransition Mode="BackwardIn" />
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:SwivelTransition Mode="ForwardIn" />
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>

    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:SwivelTransition Mode="BackwardOut" />
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:SwivelTransition Mode="ForwardOut" />
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

SlideTransition

SlideUpFadeIn, SlideUpFadeOut, SlideDownFadeIn, SlideDownFadeOut, SlideLeftFadeIn, SlideLeftFadeOut, SlideRightFadeIn, SlideRightFadeOut

最もよく使用されている横スライドのトランジションです(iPhoneのNavigationControllerのような)。一般的な使い方としては、既存の画面の内容の詳細を表示する為、一時的に表示する画面への遷移時に使用します。

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:SlideTransition Mode="SlideRightFadeIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:SlideTransition Mode="SlideLeftFadeIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:SlideTransition Mode="SlideRightFadeOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

RollTransition

半時計周りに90度回転したようなトランジションです。少し使いどころが難しそうです。トランジションとしてあまり使用しないほうが良いでしょう。

TransitionService.NavigationOutTransitionとTransitionService.NavigationInTransition両方で指定してしまうと、2回トランジションが行われてしまう事になり見た目的にNGと言えそうです。

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:RollTransition />
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:RollTransition />
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>

RotateTransition

画面全体を指定した角度へ回転しながら次の画面に遷移するトランジションです。トランジションとしてあまり使用しないほうが良いでしょう。

In90Clockwise, In90CounterClockwise, In180Clockwise, In180CounterClockwise, Out90Clockwise, Out90CounterClockwise, Out180Clockwise, Out180CounterClockwise

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:RotateTransition Mode="In180Counterclockwise" />
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:RotateTransition Mode="In180Clockwise" />
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>

    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:RotateTransition Mode="Out180Counterclockwise" />
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:RotateTransition Mode="Out180Clockwise" />
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>