Loading user information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading user information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

IWP 58 | Put the Standard Animations in your App

16 minutes, 47 seconds


Right click “Save as…”

One of the most beautiful design aspects of the Windows Phone OS is the use of motion design. Windows Phone is alive with motion, which acts as a huge differentiator in quality applications. Unfortunately, motion design can be very painstaking work and difficult to implement.

Fortunately the Windows Phone Toolkit has everything we need to implement powerful animations that bring your Windows Phone apps to life. In this video Shawn Oster walks us through the steps of adding the Windows Phone Toolkit and utilizing the transitions and tilt animations to make your app feel like a native part of the ecosystem.

To summarize our conversation, you can very easily add the basic page transition animation to your app in literally about 2 minutes.

Step 1: Install the Windows Phone Toolkit, or simple add the toolkit to your project using Nuget.

Note: If Nuget fails, check to see if an update is available from Tools > Extensions and Updates, under Updates > Visual Studio Gallery. You need Nuget >= version 2.1 to work with Windows Phone projects.

Step 2: (and we forgot to mention this in the video): In App.xaml.cs, locate:

RootFrame = new PhoneApplicationFrame;

and replace it with

RootFrame = new TransitionFrame();

Step 3: At the top of each page on which you want the transition to be used:

a. If the toolkit namespace is not defined, add it, (it will automatically be added if you have added any toolkit controls to the page previously):


Finally, add the following block fo XAML to each page, (above the LayoutRoot),

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


Follow the discussion

  • Cidny PaulCidny Paul

    Trying to get help on this on my iPhone and new space for more apps

  • It's better to teach people not to add it blindly to the whole solution. It's better to only select the projects you need it in.

  • Big Smile

  • One of my favorite features of the TiltEffect is the ability to suppress the effect for certain controls by attaching "toolkit:TiltEffect.SuppressTilt="True"" to any controls that you'd prefer to have tiltless, while still allowing all other controls to retain their tilting effects. Really great work, guys!

Remove this comment

Remove this thread


Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.