Page Transition Animations and Windows Phone 7

November 9 2010

So you want your Windows Phone 7 application to have nifty transitions similar to how the native apps on the phone work. Most commonly you see the turnstile effect or the slide effect.

4341.WpTkOct10_2D00_TransitionFrame[1]

With the Silverlight Toolkit for Windows Phone, it is pretty darned easy. Download sample code. Here’s how:

 

  1. Download and install the toolkit. It gets installed to C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll if you were wondering. It should automatically appear as an option  as Microsoft.Phone.Controls.Toolkit when you go to add a reference.
  2. Change your app.xaml.cs file in the InitializePhoneApplication() method so that RootFrame is of type TransitionFrame:
  3. Then, under the root element of each page (which should be <phone:PhoneApplicationPage> add the transition you want. You'll need to add the xmlns to dll, like this: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    1. If you want Turnstile transtion, it would look like this:
    2. If you want Slide transitions, it would look like this:

And that’s it! You can also play around with the other transition modes supported, which are roll, swivel and rotate.

Download sample code.

Comments (26) -

11/9/2010 7:20:46 PM #

anehra63

Good code with appropriate description

anehra63

11/23/2010 2:36:54 PM #

Harsh

This is awesome.  Thanks much for the info!

Harsh

1/5/2011 11:13:47 PM #

WinAppDev

Great! Much easier than the channel9 video which led me here.

WinAppDev

1/19/2011 2:39:49 PM #

alek

Bummer:

The type 'ic:NavigateToPageAction' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.  

alek

1/19/2011 2:42:02 PM #

alek

Bummer:

The type 'ic:NavigateToPageAction' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.  

alek

2/5/2011 10:05:55 AM #

Nirmit Kavaiya

Thank You !!

Nirmit Kavaiya

2/6/2011 12:24:54 PM #

Rafael Ramos

Great!

Is it possible to set these transitions on app.xaml so the project will use it for every page?

Rafael Ramos

2/6/2011 12:25:27 PM #

Rafael Ramos

Great!

Is it possible to set these transitions on app.xaml so the project will use it for every page?

Rafael Ramos

2/7/2011 7:52:43 AM #

irhetoric

Hi Rafael -- I don't think so -- you have to explicitly add it to each page as far as I know.

Best,
Karsten

irhetoric

3/1/2011 5:13:27 PM #

Glen

I've tried this but it either isn't working or is performing so badly I can't see the transitions. The transition in seems to be working, but transition out doesn't... the screen just freezes for a half a second and then the next page pops in

Glen

3/16/2011 8:44:21 AM #

Byron Peterson

I am guessing that there is no real customization, like timing, easing, etc...it works pretty nice though, right outta the box!
byron

Byron Peterson

4/18/2011 3:47:05 AM #

robert hellestrae

Excellent tutorial, and page transitions(s) add nice polish to a Windows Phone 7 app!

robert hellestrae

5/9/2011 10:15:26 PM #

Paul Sinnema

I've created the class below. Have your pages inherit this class instead of the PhoneApplicationPage class and then there's no need to use the XAML anymore.

using System.Windows;
using Microsoft.Phone.Controls;

namespace MCRemote.Controls
{
  public class PhoneApplicationPageWithTransition : PhoneApplicationPage
  {
    public PhoneApplicationPageWithTransition()
    {
      SetTransition(this);
    }

    private void SetTransition(UIElement element)
    {
      SetInTransition(element);
      SetOutTransition(element);
    }

    private static void SetInTransition(UIElement element)
    {
      NavigationInTransition inTransition;
      TurnstileTransition backwardTurnstileTransition;
      TurnstileTransition forwardTurnstileTransition;

      inTransition = new NavigationInTransition();
      backwardTurnstileTransition = new TurnstileTransition();
      backwardTurnstileTransition.Mode = TurnstileTransitionMode.BackwardIn;
      forwardTurnstileTransition = new TurnstileTransition();
      forwardTurnstileTransition.Mode = TurnstileTransitionMode.ForwardIn;
      inTransition.Backward = backwardTurnstileTransition;
      inTransition.Forward = forwardTurnstileTransition;
      TransitionService.SetNavigationInTransition(element, inTransition);
    }

    private static void SetOutTransition(UIElement element)
    {
      NavigationOutTransition outTransition;
      TurnstileTransition backwardTurnstileTransition;
      TurnstileTransition forwardTurnstileTransition;

      outTransition = new NavigationOutTransition();
      backwardTurnstileTransition = new TurnstileTransition();
      backwardTurnstileTransition.Mode = TurnstileTransitionMode.BackwardOut;
      forwardTurnstileTransition = new TurnstileTransition();
      forwardTurnstileTransition.Mode = TurnstileTransitionMode.ForwardOut;
      outTransition.Backward = backwardTurnstileTransition;
      outTransition.Forward = forwardTurnstileTransition;
      TransitionService.SetNavigationOutTransition(element, outTransition);
    }
  }
}

Paul Sinnema

5/24/2011 12:57:21 AM #

Ingrid

Hello

is it possible to add a transition just on a specific content part of the page ?

Ingrid

5/29/2011 11:22:12 AM #

Sundaram

Thanks a lot! Helped me to show transitions with simple XAML code, without editing the source at all Smile

Sundaram

8/18/2011 2:33:25 AM #

cheap fashion clothes

This is a really quality post.I find this information through Google. Great job.http://www.belowbulk.com

cheap fashion clothes

10/26/2011 12:39:26 AM #

supra shoes

Thanks for the posting! sneakers' evaluation posts from impartial evaluation web-sites. http://www.suprashoesu.com

supra shoes

10/30/2011 9:27:00 PM #

LED Ceiling Light

Very helpful sharing. It would be great to recommend for our customers.
http://www.imigyled.com/product/mian

LED Ceiling Light

12/28/2011 8:52:52 AM #

giridharan

it says,
transitionPage(); function is missing..where am i wrong..?thank you for your answers..

giridharan

12/28/2011 9:58:34 AM #

rhizohm

I believe that's in the sdk

rhizohm

2/2/2012 9:11:11 PM #

Wind Turbines


Really nice post thanks, I have added this to my bookmarks

Wind Turbines

5/30/2012 7:37:24 PM #

Realtime Online Casino Games

Awesome post!

Realtime Online Casino Games

8/12/2012 8:41:09 AM #

Roman

Awesome tutorial. short and working code.

Roman

12/23/2012 9:15:47 PM #

Suresh

My first result in bing was this post. This answered my problem. Thanks a lot!

Suresh

Pingbacks and trackbacks (6)+

Add comment

biuquote
  • Comment
  • Preview
Loading