Reusable page transition animations in Windows Phone 7/8 Silverlight

March 4, 2011, (updated on September 14, 2014), Software Development

I searched a while finding a simple solution to add transition animations for my Windows Phone 7 application. There is a simple solution using the Silverlight for Windows Phone Toolkit. After the installation of the toolkit (using traditional installer or NuGet) and referencing it in your project, open your App.xaml and insert the following code:

        <Style x:Key="Transition" TargetType="phone:PhoneApplicationPage">
            <Setter Property="toolkit:TransitionService.NavigationInTransition">
                            <toolkit:TurnstileTransition Mode="BackwardIn"/>
                            <toolkit:TurnstileTransition Mode="ForwardIn"/>
            <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                            <toolkit:TurnstileTransition Mode="BackwardOut"/>
                            <toolkit:TurnstileTransition Mode="ForwardOut"/>

This XAML code contains the style, every page can embed to use the animation. In the first link below you can find other animations. After inserting the XAML, open the file

App.xaml.cs and change the following line in the InitializePhoneApplication method:

// RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();

The class TransitionFrame can be found in the “Microsoft.Phone.Controls.Toolkit” assembly from the Silverlight for Windows Phone Toolkit in the namespace Microsoft.Phone.Controls. To enable the transition animation in a page, simply add this code to your page XAML:

<phone:PhoneApplicationPage ... Style="{StaticResource Transition}">

Additional links:

Tags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see

This site uses Akismet to reduce spam. Learn how your comment data is processed.