Windows Phone: Frame/Page navigation and transitions using the TransitioningContentControl

Windows Phone 7 supports the built-in Silverlight Frame/Page navigation system, which is easy to use and maintain. Unfortunately, it’s not as slick-looking as the panorama navigation shown in all the phone demos.

Sooner or later there will be a few panorama implementations floating out there, but I still think that Frame/Page navigation has its place; firstly, not all applications suit the panorama concept (eg; master-details relationships), and secondly, it just feels like a cleaner separation of UI elements.

The problem is that the built-in navigation is boring – the page just flicks in/out.

However, there’s a cool control in the Silverlight Tooklit that can apply transitions to the navigation: The TransitioningContentControl.

Applying this to normal Silverlight 3 projects is described well in Jesse Liberty’s article. Applying it to a Windows Phone project requires only minor changes.

Here’s the step-by-step:

Step 1:

After installing the toolkit, add a reference to the System.Windows.Controls.Layout.Toolkit.dll assembly. It’s likely located in C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin.

 

Step 2:

In your App.xaml, Create a template that uses this control:

 <ControlTemplate x:Key="TransitioningFrame"
  TargetType="navigation:PhoneApplicationFrame">
  <Border>
    <toolkit:TransitioningContentControl
     Content="{TemplateBinding Content}"
     Transition="DownTransition" />
  </Border>
</ControlTemplate>

Note that you need to set the TargetType to match the PhoneApplicationFrame control.

 

Step 3:

Reference the template in your main frame using the Template property. If your PhoneApplicationFrame element is located somewhere other than your app.xaml, then this could be as simple as this:

 <Application.RootVisual>
  <navigation:PhoneApplicationFrame x:Name="RootFrame"
   Source="/Views/MainPage.xaml"
   Template="{StaticResource TransitioningFrame}"
  />
</Application.RootVisual>

However, if your RootVisual element is defined in the App.xaml along with your template, you might have a problem if the former attempts to instantiate before the latter has been loaded. If that’s the case, you can move the template assignment to the codebehind:

 public App()
{
  Startup += new StartupEventHandler(App_Startup);
  InitializeComponent();
}

void App_Startup(object sender, StartupEventArgs e)
{
  // Set the root visual to use the transitioning control.
  var ct = (ControlTemplate) this.Resources["TransitioningFrame"];
  (RootVisual as PhoneApplicationFrame).Template = ct;
}

Finally:

The types of transitions you can use for the Transition element can be gleaned from the source of the TransitioningContentControl; they’re just visual states in the XAML. At the time of writing, there are only UpTransition, DownTransition and DefaultTransition.

If you want to add new transitions, you can include the source (rather than reference the binary) of the control, and add your own visual states. There might be a bunch of file/resource dependencies to consider, though.

 

Avi

Comments

• Anonymous
  June 16, 2010
  don't forget you can add animations by editing the control template for the transitioning content control in blend.  that copies the current "source" xaml for the control, and allows you to add more transitions to it, and doesn't require adding the source code to your project.