IWP 58 | Put the Standard Animations in your App

Download this episode

Download Video

Description

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

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
     assembly=Microsoft.Phone.Controls.Toolkit"

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

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

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    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
      Geertvan​Horrik

      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
      jeedo9sft

      Big Smile

    • User profile image
      FredDuarte

      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!

    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.