IWP 58 | Put the Standard Animations in your App

Play IWP 58 | Put the Standard Animations in your App
Sign in to queue


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



Download this episode

The Discussion

  • User profile image
    Cidny Paul

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

  • User profile image

    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.

  • User profile image

    Big Smile

  • User profile image

    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!

Add Your 2 Cents