Page Animation in Windows Phone 8

Introduction

In Windows Phone 7.5, animation was introduced and it makes a Metro-Tiles look more appealing and attractive. Since at that time the Windows Phone OS was in its early days. Since then the Windows Phone API has been simplified more than enough. Unlike Windows Phone 7.5 we use a Story-Board feature (Microsoft Blend) to create a simple animation effect. In Windows Phone 8 we have a simplified Toolkit that helps us in creating page animation with a small change in your code.



So, let's try to implement it in our demo app.

Procedure

Step 1

First, add a Windows Phone 8 Toolkit using NuGet in your project reference.



After that, we get NuGet windows. Put the Windows Phone 8 toolkit in the search box.

And add the following package to your project:



After this, you need to add the XAML name space to your MainPage.xaml.

Add your namespace just above the mc:Ignorable="d".

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

Step 2

For Transition you need to change the implementation. For this, open App.xaml.cs.

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

Instead of PhoneApplicationFrame() we want TransitionFrame() that is a customized to animate.

And in the XAML page add a few lines just below the namespace declaration as in the following:

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

Note: Try to put these lines of code just above the Grid declaration.

Step3.

To test the Page navigation we need an extra page to navigate. So add a Button and navigate to a new page.

private void Button_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(newUri("/Newpage.xaml",UriKind.Relative));
}

Output

I can't show you the Page animation on paper, but you will see it when you implement it. Then, you must observe the In-Out animation while the page is navigating.



Recap 

• First, add the Toolkit
• Then, add the XAML namespace to the MainPage.xaml
• Change the RootFrame in App.xaml.cs
• Add the code to the XAML page.

Conclusion

It is not a definite thing, but when you are working on any app, then your main objective is to make your app attractive and this In-Out Page Navigation adds some Chrome to your app.

If you encounter any issue with the code then follow the attached file.