Windows Phone 7 App Development

Page Transitions

leave a comment »

This is a quick note on getting page transitions to work.  Animation is a subtle but key feature of Windows Phone apps and I wanted to experiment with the process.  It turned out to be pretty simple…

The Windows Phone Toolkit on Codeplex ( provides some really useful components, one of which is called Transitions.

The toolkit is easy to install and is referenced in pages by adding this to the header:


In order to use it this XAML is added to the start of each page (just before the page layout)…

                <toolkit:TurnstileTransition Mode="BackwardIn"/>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>


The XAML manages the animation of the page as it is entered and exited. The Mode attribute controls the animation style – in this case its called ‘Turnstyle’.

In order to make the process work the RootFrame style has to be changed in App.xmal.cs:

        private void InitializePhoneApplication()
            if (phoneApplicationInitialized)

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

That’s it!


Written by metadevblog

December 21, 2011 at 8:37 am

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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 )

Connecting to %s

%d bloggers like this: