|
In this article I will talk one of the key feature of metro guidelines or you can say metro experience and that is Page Transition or you can say Page Transition between pages. This is simple and must implement between page transition to provide metro experience to end user.
Let's write some code.
Download Silverlight Windows Phone Toolkit
Step 1: Create a silverlight for Windows Phone project.
Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll
Step 3: Add one more page and name it SecondPage.xaml.
Step 4: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml and SecondPage.xaml.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Step 5: Add below code in MainPage.xaml and SecondPage.xaml, just above Grid LayoutRoot.
In the below snippet there are two parts
First is NavigationInTransition which provide page transition animation when you visit the page.
Second is NavigationOutTransition which provide page transition animation when you go out of the page (like pressing back button).
< 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>
Step 6: Add a application bar in MainPage.xaml to navigate to SecondPage.xaml to experience the page transition effect. I have added appbar.arrow.right.png image in application bar you can place you own image. Don't forget to change the image Build Action to content from image properties.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/appbar.arrow.right.png" Click="ApplicationBarIconButton_Click" Text="Button 1"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Step 7: Add ApplicationBarIconButton_Click method in MainPage.xaml.cs to navigate to SecondPage.xaml.
private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}
Step 8: Open App.xaml.cs, go to InitializePhoneApplication method and
Replace
RootFrame = new PhoneApplicationFrame();
with
RootFrame = new TransitionFrame();
Step 9: Now run the application and click on the application button you will notice the page transition effect. Now press hardware back button and again you will see page transition effect.
This ends the article of Page Transition in Windows Phone.
|