(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Animated navigation between Pages

(41 votes)
Miroslav Miroslavov
>
Miroslav Miroslavov
Joined Nov 24, 2009
Articles:   8
Comments:   6
More Articles
2 comments   /   posted on Jun 08, 2010
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.

AnimationBetweenPages

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

Just click on the hyperlinks or navigate back / forward.

Get Microsoft Silverlight

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.


Subscribe

Comments

  • Ringgo

    Re: Animated navigation between Pages


    posted by Ringgo on Mar 04, 2012 09:23
    Thanks for sharing,you are awesome.
  • MelisaImuettPartII

    Re: Animated navigation between Pages


    posted by MelisaImuettPartII on Mar 11, 2015 15:36
    hay friends, now Android users very much. increasing number of users android android app the more interesting. You can download the .apk android apps in Apkandro.com which is Place to Download Android's Aplication kamu butuh informasi handphone terbaru ? kami sudah menyediakan info gadget terbaru berserta Spesifikasinya , anda dapat menemukan Info handphone terbaru di Update Harga hp Pengen selalu update musik baru dan populer bulan ini , tahun ini , dan hari ini ? Updatedulu.com menyediakan Musik terbaru dan populer Mendownload Game terbaru dan gratis memang sedikit sulit , untuk itu saya menyediakan tempat untuk anda mendownload game Gratis dan terbaru yaitu Musaanimers.com atau baca selengkapnya anda suka menonton film asia atau box offiece , tentu suka . karna filmnya keren-keren . untuk mendapatkan film terbaru silahkan cek di Update Film Semoga bermanfaat ya bro

Add Comment

Login to comment:
  *      *       

From this series