Previously, I have published some information about page transitions available in Windows Phone 7. I would recommend to read this post to get a summary of what has already been discussed.

As I have mentioned before, there are many transitions available from the Silverlight toolkit:

  • Turnstile Transition
  • Swivel Transition
  • Slide Transition
  • Roll Transition
  • Rotate Transition
Lets take a look at all of these transitions in detail.

Turnstile Transition 

This transition is similar to turning a page from one corner. A turnstile transitions is the most common and simplest to use.
It has four modes BackwardIn, ForwardIn, BackwardOut and ForwardOut. Like the name suggests these modes are applicable for while navigating in and navigating out.
    <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>

Swivel Transition

A Swivel Transition is exactly similar to a turnstile transition from a developers point of view. When this transition is applied it appears as if the page comes to the front or from the back vertically.

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

Slide Transition

A Slide Transition makes the page disappear or appear in the direction specified  by the mode. This transition has many modes, making it complex to use.
The different modes are as follows:
  • SlideUpFadeIn
  • SlideUpFadeOut
  • SlideDownFadeIn
  • SlideDownFadeOut
  • SlideLeftFadeIn
  • SlideLeftFadeOut
  • SlideRightFadeIn
  • SlideRightFadeOut
Here is a sample slide transition applied to a page:

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:SlideTransition  Mode="SlideDownFadeIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:SlideTransition Mode="SlideRightFadeIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:SlideTransition Mode="SlideUpFadeOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

Roll Transition

Honestly, I did not like the Roll Transition. It is not at all smooth, at least in the emulator. This transition does not have any modes. Its usage is also fairly simple and can be understood my modifying one of the samples in this post.

Rotate Transition

A Rotate Transition produces a nice effect which you can control very easily using the modes that it provides. Like the Slide transition, the Rotate Transition also has a variety of modes:

  • In90Clockwise
  • In90Counterclockwise
  • In180Clockwise
  • In180Counterclockwise
  • Out90Clockwise
  • Out90Counterclockwise
  • Out180Clockwise
  • Out180Counterclockwise
The rotate transitions although similar to roll transition, is smooth and very much configurable. Here’s a sample:
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:RotateTransition Mode="In90Clockwise" />
            </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="Out90Counterclockwise" />
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

There are many other effects and animations applied directly or indirectly in the Windows Phone 7 platform. I would be providing more insight on them in my future posts.

A sample application using all these transitions is available at code plex.

Related Links

Advertisements

3 thoughts on “Page Transitions in Windows Phone 7 – Part 2

Leave a Reply to Trần Duy Thanh Cancel reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s