First Floor Software

Animated page navigation in SL3

Silverlight 3 includes a navigation framework that allows for partitioning your application into separate pages and provides easy page navigation with integrated browser's back/forward button support. If you have the Silverlight 3 Tools for Visual Studio installed, the Silverlight Navigation Application template provides a great start for building applications using the navigation framework.

While working recently on a navigation application, there was this requirement for animated page transitions. Moving from one page to another must look pretty and if possible should include advanced animations with pages flying in, fading out, etc.

So I started investigating if and how this was possible with the navigation framework. And the answer is that it is very, very easy and it does not require a single line of code.

While devising a solution for animating transitions I immediately had this new TransitioningContentControl class (available in the SL3 Toolkit) in mind. The TransitioningContentControl is a ContentControl that provides transition animation when the Content property of the control is changed. Sounds like a perfect candidate for my animation page navigation solution, but how to incorporate the TransitioningContentControl in the navigation framework?

The answer is: using custom control templates. Pages are hosted in a Frame control and we need to replace the default template of this Frame element and include the TransitioningContentControl. Below a simplified version of the custom frame template:

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="navigation:Frame">
      <Border>
        <layout:TransitioningContentControl
           Content="{TemplateBinding Content}" />
      </Border>
    </ControlTemplate>
   </Setter.Value>
</Setter>

The default Frame template contains a ContentPresenter that is replaced with the TransitioningContentControl. The {TemplateBinding Content} is the key to smooth page transitioning. The moment the current page of the Frame (that is the Frame.Content property) changes, the TemplateBinding updates the Content of the TransitioningContentControl which causes the TransitioningContentControl to start doing its transitioning job.

And that's actually it. The above solution provides a nice default fade-in/fade-out behavior when pages are navigated. It is fairly easy to add your own custom animations by styling the TransitioningContentControl as is demonstrated in the sample application.

Download the source code of the sample application.

Update: the above solution must to be right, for David Poll provides us with an almost identical solution entirely on his own.