Windows Phone 7 is beginning to spread all over the world and modern developers need to make application more stylish. By default, Windows Phone page transitions really aren’t transitions at all. The new PhoneNavigationPage is just popped into the root PhoneNavigationFrame.
The most common solution to this problem is to manage the transitions yourself. You commonly see a “pattern” used in WP7 apps where events in your current page launch a Storyboard animation. When that animation is complete, the actual navigation to the new page is invoked and the new page then runs its own Storyboard once it is loaded. It looks something like this…
// CURRENT PAGE
//We are pressing some button
private void CurrentPage_Click(object sender, EventArgs e)
{
//Adding Completed Event
SomeStoryboard.Completed += new EventHandler(SomeStoryboard_Completed);
//Starting our animation
SomeStoryboard.Begin();
}
// On Completed Event
void SomeStoryboard_Completed(object sender, EventArgs e)
{
//Navigating to the other page
NavigationService.Navigate(new Uri("/Favorites.xaml", UriKind.Relative));
}
// NEWPAGE
protected override void OnNavigatedTo(Microsoft.Phone.Navigation.PhoneNavigationEventArgs e)
{
base.OnNavigatedTo(e);
//Beginning new animation
SomeNewStoryboard.Begin();
}
It’s a straightforward solution, and if your app only has a few pages, it works just fine. If you have lots of pages in your application, however, it becomes quite hard to maintain all of them.
A better solution can be found by turning to the Silverlight Toolkit. The great thing about having Silverlight on WP7 is that you can leverage many existing Silverlight assets. In this case, we will leverage the TransitioningContentControl from the Toolkit. The TransitioningContentControl was created to solve the same problem we are facing for traditional navigation-based Silverlight application.
If you are not familiar with the TransitioningContentControl, its a fairly simple control. The TCC is comprised of twoContentPresenters viz., current and previous. When you update the Content property of the TCC, it will take the content of the CurrentContentPresenter (if present) and move it to thePreviousContentPresenter. The new content is loaded into theCurrentContentPresenter. The TCC, however, manages the visibility of the previous and Current ContentPresenters so that theold content is visible and the new content is hidden. It then uses a Storyboard that is defined as part of the TCC’s VisualStateManager to transition from theold content to the new content. If you are not familiar with Storyboards, the Visual State Manager, or other designer-type topics, have no fear. The TCC comes with a set of standard transitions that you can use out of the box.
Getting the TCC to work with our WP7 app is a simple process. First, we need to modify the ControlTemplate for our PhoneNavigationFrame to use the TCC. By doing so, we automatically enable transitions between any PhoneNavigationPages we add to our app. To change the PhoneNavigationFrame, open the App.xaml file. First, add a couple of namespaces to our xaml:
xmlns:layout="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Now, modify the PhoneNavigationFrame as shown below:
<phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml">
<phoneNavigation:PhoneApplicationFrame.Template>
<ControlTemplate>
<layout:TransitioningContentControl Content="{TemplateBinding Content}" Style="{StaticResource TransitioningStyle}"/>
</ControlTemplate>
</phoneNavigation:PhoneApplicationFrame.Template>
</phoneNavigation:PhoneApplicationFrame>
The TCC has its Style property set to a StaticResource. This Style provides the default transitions and is also where you would add your own VisualStates and Storyboards if you would like to add custom transitions. This Style can be found in the Silverlight Toolkit in the TCC Sample Application, or you can get it from the sample WP7 application linked to this article. The Style is long so I won’t show the entire thing here, but the first parts of the Style are below to give an idea of what the Style contains and how it is used by the TCC.
<Style x:Key="TransitioningStyle" TargetType="layout:TransitioningContentControl">
<Setter Property="Transition" Value="DefaultTransition" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="layout:TransitioningContentControl">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="PresentationStates">
<vsm:VisualState x:Name="DefaultTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CurrentContentPresentationSite"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:02.300" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="PreviousContentPresentationSite"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:02.300" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="PreviousContentPresentationSite"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>
Collapsed
</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
All information about VusualStates can be found in related topics of MSDN. And you can always use Expression blend to create all animations, but it will works only with few of them. Or by wasting some time on each page they can be turned into unique piece of art. It’s all depends on your needs.
Other useful thing: you can combine some pages to Panoramic View. At lest 3 pages can be a very pretty panoramic scene. This page can be found in the Toolkit also. Design-time will help you to compose your pages. Be aware that you can change the current Panoramic page in code. Only default page can be set, other properties like Current Item are read-only.