Magellan Transitions

Back to: Magellan Home

When navigating between pages, transitional animation can provide a powerful means of communicating context with the user. The Transitionals library from Microsoft is a popular way to set up transitions when content changes, and comes with a number of out of the box transitions such as 3D cube, blinds, dissolve and star wipe.

When it comes to page navigation, we often want transitions to relate to the navigation we are performing. For example, if we click a "Next" button, we might expect a transition that 'slides' the next page into view. If we then clicked "Back", we would expect a slide in the opposite direction.

Magellan has out of the box support for the Microsoft Transitionals library. Here I will assume that you have a Magellan project ready (you can create one manually using this Quickstart, or just use the Magellan project template).

You will need to add a reference to the following DLL's:

  • Magellan.Transitionals.dll
  • Transitionals.dll

You will then need to update the entry point of your application (usually App.xaml.cs) to set up the transition mappings:

NavigationTransitions.Table.Add("Back", "Forward", () => new SlideTransition(SlideDirection.Back));
NavigationTransitions.Table.Add("Forward", "Back", () => new SlideTransition(SlideDirection.Forward));
NavigationTransitions.Table.Add("ZoomIn", "ZoomOut", () => new ZoomInTransition());
NavigationTransitions.Table.Add("ZoomOut", "ZoomIn", () => new ZoomOutTransition());

These entries define a transition, as well as the 'reverse' transition that will be used when navigating "Back".

To enable the transitions, you can edit the control template of any Frame elements to use the transitional navigation element. Below is an example:

<Frame Name="mainFrame">
    <Frame.Template>
        <ControlTemplate TargetType="{x:Type Frame}">
            <DockPanel ClipToBounds="True">
                <NavigationTransitionPresenter Content="{TemplateBinding Content}" />
            </DockPanel>
        </ControlTemplate>
    </Frame.Template>
</Frame>

Finally, you will need to change any code which performs a navigation request to specify the transition to use. Procedurally, code like this:

Navigator.For(mainFrame).Navigate("Home", "Index");

Should become:

Navigator.For(mainFrame).NavigateWithTransition("Home", "Index", "ZoomIn");

And likewise, Behaviors like this:

<Button Content="Try Again">
    <i:Interaction.Behaviors>
        <NavigateBehavior Controller="Home" Action="Index" />
    </i:Interaction.Behaviors>
</Button>

Should become:

<Button Content="Try Again">
    <i:Interaction.Behaviors>
        <NavigateWithTransitionBehavior Transition="Forward" Controller="Home" Action="Index" />
    </i:Interaction.Behaviors>
</Button>

And that is all! Navigating between pages should now make use of transitions.

When defining your transitions using the TransitionTable, you can provide any transition from the WPF Transitionals library, or one of the four out of the box Magellan transitions designed specifically for navigation applications (slide forward, slide backward, zoom in and zoom out). For example, below is a roll transition in action:

Roll transition

NavigationTransitions.Table.Add("Forward", "Back", () => new Transitionals.Transitions.RollTransition());

Writing your own transitions is also relatively easy - see the Transitionals source code for examples.

Back to: Magellan Home

A picture of me

Welcome, my name is Paul Stovell. I live in Brisbane and work on Octopus Deploy, an automated deployment tool for .NET applications.

Prior to founding Octopus Deploy, I worked for an investment bank in London building WPF applications, and before that I worked for Readify, an Australian .NET consulting firm. I also worked on a number of open source projects and was an active user group presenter. I was a Microsoft MVP for WPF from 2006 to 2013.

05 Mar 2010

Paul, is there any facility for defining a default transition used all navigations that don't have an explicit navigation defined?

05 Mar 2010

Hi Scott,

Currently there isn't, but it's an easy feature to add - I'll see about writing it in tonight.

Paul

Yoni
Yoni
26 Apr 2010

Hi, I get error on the designer

Frame' ControlTemplate TargetType does not match templated type 'PlaceHolderControl'.

Could you help me with this? Thanks.