Rico Suter's blog.
 


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:

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

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:



Discussion