Animated navigation between Pages

Submit Article

(41 votes)

Miroslav Miroslavov

Joined Nov 24, 2009

Articles: 8

Comments: 6

1 comments / posted on Jun 08, 2010

Tags: animations , navigation , completit , miroslav-miroslavov

Categories: White Papers , General

This article is compatible with the latest version of Silverlight.

This is part 8 of the series “Silverlight in Action”

Here, we’re sharing our experience from the amazing CompletIT web site.

Introduction

In this session, we will cover one quite popular, but still very useful, technique for adding interaction to your web-site - "How to enable animations between pages using the Silverlight Navigation Framework". So, whenever we navigate to a page using HyperlinkButton, Browser history, Back / Forward browser buttons or just navigate to a deep-link, we'll be able to run animation between the content of the pages. This technique is very useful for both - Line Of Business (LoB) Applications and Rich Internet Applications (RIA). It also gives a lot of interactivity and enhance the overall User Experience of the web-site.

Plenty of different animations can be defined between the pages content. And here is one example of an animated transition between two pages.

A snapshot of the transition between Contacts page and Services page.

Try a simple transition between The ThreeDWorld page and The Book Folding Effect

Just click on the hyperlinks or navigate back / forward.

Implementation

The idea is pretty simple: in order to have animation between two contents, we need to have them both live before the whole transition finishes.

First, let’s start with inheriting from the Frame class and let’s name it TransitioningFrame. The Frame class is a simple ContentControl with enabled some Navigation features. And as a normal ContentControl, when the user navigates to another page (changes the Content), the old content will be thrown away (and that is what we need to workaround). We’ll do this with having two ContentPresenters in the ControlTemplate of the TransitioningFrame class. This idea is vey common and broadly used, for example, in the toolkit’s TransitionContentControl.

The TransitioningFrame class

 public class TransitioningFrame : Frame

 {

     private ContentPresenter currentContentPresentationSite;

     private ContentPresenter previousContentPresentationSite;

     public TransitioningFrame()

    {

         DefaultStyleKey = typeof(TransitioningFrame);

    }

     public override void OnApplyTemplate()

     {

         base.OnApplyTemplate();

         previousContentPresentationSite = GetTemplateChild("PreviousContentPresentationSite") as ContentPresenter;

         currentContentPresentationSite = GetTemplateChild("CurrentContentPresentationSite") as ContentPresenter;

         if (currentContentPresentationSite != null)

         {

             currentContentPresentationSite.Content = Content;

         }

     }

     protected override void OnContentChanged(object oldContent, object newContent)

     {

         base.OnContentChanged(oldContent, newContent);

         if ((currentContentPresentationSite != null) && (previousContentPresentationSite != null))

         {

             currentContentPresentationSite.Content = newContent;

             previousContentPresentationSite.Content = oldContent;

             VisualStateManager.GoToState(this, "Normal", false);

             VisualStateManager.GoToState(this, "Transition", true);

         }

     }

 }

The trick is to run an animation (go to “transition” state) when the content is changed.

The TransitioningFrame ControlTemplate

The control template is also very straight forward. It will keep the two content presenters and will also define the transition animations. We will use VisualStateManager for dealing with the animations. And let’s define two states:

Transition state - run the animation between pages. (You will need to change this in order to make custom animations)
Normal state - enables the control to go back to Transition state, when needed.

 <ControlTemplate TargetType="TransitionFrame:TransitioningFrame">

    <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

            Background="{TemplateBinding Background}"

            BorderBrush="{TemplateBinding BorderBrush}"

            BorderThickness="{TemplateBinding BorderThickness}">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="PresentationStates">

                <VisualState x:Name="Normal" />

                <VisualState x:Name="Transition">

                      <Storyboard>

                          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="PreviousContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Visibility)">

                           <DiscreteObjectKeyFrame KeyTime="00:00:00">

                                 <DiscreteObjectKeyFrame.Value>

                                     <Visibility>Visible</Visibility>

                                 </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                            <DiscreteObjectKeyFrame KeyTime="00:00:01.300">

                                 <DiscreteObjectKeyFrame.Value>

                                     <Visibility>Collapsed</Visibility>

                                 </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="CurrentContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Opacity)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="0" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="1" />

                         </DoubleAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="CurrentContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="100" />

                            <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="0" />

                         </DoubleAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="PreviousContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Opacity)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="1" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="0" />

                         </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                       Storyboard.TargetName="PreviousContentPresentationSite"

                                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="0" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="-100" />

                        </DoubleAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

      <Grid>

             <ContentPresenter x:Name="PreviousContentPresentationSite"

                               Content="{x:Null}"

                               ContentTemplate="{TemplateBinding ContentTemplate}"

                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                <ContentPresenter.RenderTransform>

                     <CompositeTransform />

                </ContentPresenter.RenderTransform>

             </ContentPresenter>

             <ContentPresenter x:Name="CurrentContentPresentationSite"

                               Content="{x:Null}"

                               ContentTemplate="{TemplateBinding ContentTemplate}"

                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                 <ContentPresenter.RenderTransform>

                    <CompositeTransform />

                 </ContentPresenter.RenderTransform>

            </ContentPresenter>

        </Grid>

     </Border>

 </ControlTemplate>

Conclusion

Animations are one of the very powerful tools, provided by the Silverlight engine. And it’s great that we can use them to animate the transition between pages. This can give our web-site, so much interactivity, richness and good impressions. The good news is that is as easy as creating a custom animation and add it to Transition state of TransitioningFrame template.

Download the code

Stay tuned for more articles from this series coming up next week.

Comments

Re: Animated navigation between Pages

posted by Ringgo on Mar 04, 2012 09:23

Thanks for sharing,you are awesome.

Add Comment

Username: * Password: * Remember me

Forgotten Password? Registration Why register?