Oct 10

WP7 – Page Transitions Sample

I posted a few methods for doing page transitions in the past that were based on some older versions of the SDK and don’t work anymore. In the post I’ll go over another method which uses a base page to handle all transitions.

[Download Sample]

Before going into the code, here are some thoughts I have on page transitions and animations on the phone in general:

  • Animations are a key part of the metro experience. With the focus on text and minimal chrome it’s important to add animations to make the UI have some life. They also “surprise and delight the user” as the Metro marketing material would say.
  • Aside from the visual wonder created by animations, they also server some other purposes:
    • The type of transition conveys meaning: The continuum animations provide context when drilling into a detail screen or task, sliding animations signify the creation of something new, etc. Matching the way the OS does transitions makes your app seem intuitive and it can conveys ideas without taking up the limited space on a mobile device.
    • Transitions can improve perceived responsiveness of the application
  • Don’t over -animate.
    • Avoid long, gratuitous animations just because you can easily create storyboards in xaml. The native apps use some well thought out, subtle animations so try to follow that example for UX consistency. The timings on the native animations are fairly short – usually less than 350 ms. If you have much longer animations you are probably doing something that is going to look weird and make the app seem slow (some exceptions are the pano slide in animation which is around 1 – 1.5 seconds and the feather might have a longer total duration depending on the amount of items that feather in/out).
    • Animations should enhance the user’s experience, not become distracting or annoying.
    • If something needs to rotate out like a turnstile, you don’t actually have to rotate a full 90 degrees. You can just rotate partially and then change the opacity to 0. Your mind will fill in the missing part of the animation. Cutting the amount of time actually animating frees the phone up to load the new UI while it appears that you are still animating. Look carefully at the native app transitions. They actually animate less than you probably think and use somewhat simple storyboards. For example the turnstile animation is somewhat close to forward out: 0 to 50 and forward in: –80 to 0. In summary, use animations to help create the illusion of performance.
  • When animating between pages, it’s really important that the pages load as fast as possible. There are a few ways to do this:
    • Minimize code in the constructor and loaded event. Ideally you should do nothing until the animation is complete.
    • Data binding is really slow on the phone and lots of it will just cut any transition. Try to not databind until after the transition is done. For example, pass data in the querystring from the previous page and set it directly on the next page. You want to have some visuals on the page to transition to,but just enough so there is something to actually transition to. If you need to fetch more data,do it after the animation is complete. Keeping lean xaml will help the page load faster.
    • Image downloading / decoding just hammers the UI thread. It’s going to be hard to animate a page in smoothly if you are setting some giant background image from a url.
  • Make sure your animations run on the compositor thread. This is covered in detail in the Creating High Performing Silverlight Applications for Windows Phone. So just to be clear, if part of your storyboard does something that is not supported on the compositor thread, then your storyboard will not run on the compositor thread. (I could be wrong on that point, although it seems to be the case)
  • Pick an easing function and stick with it. There are several easing function to choose from, but it looks weird if you start to mix and match. If you use exponential easing (and you should since that is the closest approximation to what the native apps do), just use that and vary the mode, duration, timing. Obviously you should use some type of easing if you want avoid an oddly robotic looking transition.

Since transitions are so important on the phone it would be great if future versions of the wp7 sdk included some prebuilt animations and events that would help actually running the transitions. At least that is what I’d prefer. Since that doesn’t exist I created a little helper framework that allows me specify a type of transition with the right elements when a page is about to navigate.

Types of animations on the phone

The phone has 4 animation directions: forward in, forward out, backward in, backward out. So if you transition to a page and click the back button, you need to have the reverse animation or at least something different that what you did on the way in.

The types of animations are:


The default animation you see when an app launches and rotates in or when switching between tasks (choosers, launchers, certain pages)

When to use

Switching context from one task to another like opening a map for directions or when switching from one page to another that is not really a drill down detail or continuing context

Approximate storyboard

forward in: rotate on y-axis from –80 to 0 for 350ms, exponential out(exponent 6)

forward out: rotate on y-axis from 0 to 50 for 250ms, exponential in (exponent 6)

backward in: rotate on y-axis from 50 to 0 for 350ms, exponential out(exponent 6)

backward out: rotate on y-axis from 0 to -80 for 250ms, exponential in(exponent 6)

Notice the difference in timings and easing mode on the forward out of one page to the forward in of the other page. You don’t have to animate to from 90 to get that turnstile effect. Switching the easing mode creates the illusion for the swinging effect. As mentioned before, it’s really important the next page loads quickly so it appears to be one continuous motion. By not animating the full 90 and animating toward the outside portion of the viewport your mind should fill in the missing parts of the animation (the rest of the rotation that you would see and the part of the rotation that would be off-screen anyway) giving you almost a second to load the next page.

turnstile feather

The turnstile feather is basically like the turnstile except that list items each rotate out in succession. The start menu list on the phone does a turnstile feather to launch an app.

When to use

Same place as the turnstile, but for pages that are lists.

Note: This is probably obvious, but the transition out from one page should match the transition in on the next page. So don’t turnstile a page out and slide the next one in. That is just awkward. Although you can pair a turnstile with a turnstile feather since they are similar.

Approximate storyboard

forward in: rotate on y-axis from –80 to 0 for 350ms, exponential out(exponent 6)

forward out: rotate on y-axis from 0 to 50 for 250ms, exponential in (exponent 6)

backward in: rotate on y-axis from 50 to 0 for 350ms, exponential out(exponent 6)

backward out: rotate on y-axis from 0 to -80 for 250ms, exponential in(exponent 6)

Each item turnstiling out is delayed 50 ms from the previous one. It also looks cool if you save the selected item to last when you animate out. The start menu does this.


The continuum animation is used to create a sense of continuing context from one screen to another. The music + videos app does this when you click one of the initial menu options like “music” or “podcasts” and the text animates to the secondary page to become the title.

When to use

Lists of summary info like a name that when clicked go to a detail screen. Task menu options that become the pivot title of the next screen.

Approximate storyboard

The continuum animation is a little more complex than a storyboard. It has some code that creates a copy of the selected element so it can move without fading like the rest of the page.

Basically it’s something like:

forward out: the selected item drops 73px and slides 225 over with an expo ease in(exp 3 or 6) over 150ms. Page slides down 70px and the opacity goes to 0 with the same easing and time.

forward in: the page slides up 50px with and expo ease out over 150ms. The continuous element slides down 70px and over 130px with the same easing.

backward out: whole pages slides down 50px, expo ease in over 150 ms. The opacity also goes from 1 to 0. The native apps like the marketplace have a slightly different style where the continuous element slides and fades, but the whole page does not. Adjust to your liking.

backward in: The element that animated out slides in from –70px to the left with an expo ease out over 150ms


The slide animations slide/fades some content over the existing content. This is used in the native apps to signify the creation of something new.

When to use

Creating or adding new items in your app. You can slide up/down left right. Whatever works for your layout. If you use separate pages, you can still slide, but the effect isn’t as good. Ideally the sliding element would be a control so it can be in a popup. In the attached example i use a fake popup that is just an element on the frame. There are 3 reasons for this:

  • Animations on popups don’t seem to be on the gpu
  • Sometimes i want the popup to handle both orientations and it’s easier if it’s in the frame.
  • If you have larger input boxes, an element in the frame will handle scrolling better to accept input. The SIP doesn’t work the same on popups vs elements in the frame.

Approximate storyboard

forward in: 150 (left, right, up or down), exponential out(exponent 6), 350ms, opacity 0 to 1

backward out: 150 (left, right, up or down), exponential in(exponent 6), 250ms, opacity 0 to 1


Rotating is used to change orientations form landscape to portrait. David Anson has a good post on this. Otherwise the UI should rotate from 0 to +- 90 over 500ms using exponentialeaseInOut. the rotation angle should be counter to the direction hat the device was rotated.

The easing exponents might have to be adjusted. Most of the ones that are 6 could be 3. If your app lags a little between page navigations you might not see animations with an exponent of 6 clearly.

For all of these storyboards you can just look in the code.


This sample uses a base page. The reason I used a base page instead of a frame is because i wanted more control of animating actual elements on the page. In general the base page cancels all navigations, does some animation and recalls the navigation method that was originally passed. The base page requires some animation context for a page (usually layoutroot, but depends on your app)

The base page adds two overrides, GetAnimation and AnimationComplete. GetAnimation lets you specify and animator like continuum or turnstile based on a direction and uri of the next page. AnimationComplete let’s you reset some things on back navigation. Ideally you would just databind on forward navigation and reuse the page from the back stack on back navigation and only do binding on forward navigations. Not doing any work before AniamtionComplete allows you to have smoother, uncut page transitions. Otherwise you are fighting for cpu/gpu time.

So it looks like:

        protected override GetAnimation(AnimationType animationType, Uri toOrFrom)
if (animationType == AnimationType.NavigateForwardIn)
return new TurnstileFeatherForwardInAnimator() { ListBox = List, RootElement = LayoutRoot };
return new TurnstileFeatherBackwardOutAnimator() { ListBox = List, RootElement = LayoutRoot };

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

        protected override void AnimationsComplete(AnimationType animationType)
switch (animationType)
case AnimationType.NavigateForwardIn:
//set data contexts

case AnimationType.NavigateBackwardIn:

AnimationList.SelectedIndex = -1;


.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

By default if you just inherit from the base page and set an animation context in the constructor, it will turnstile those pages.

The base page model might be a little more intrusive, but we’ve already been using base pages to centralize a lot of common logic we are doing like saving state.

This is definitely a work in progress and could be more efficient, but I wanted to post something since some people seem to struggle with getting started with page animations. Contact me if you have any thoughts.

45 comments , permalink

  • http://

    in a page derived from AnimatedBasePage,if u put a datepicker form windows phone toolkit the application crashes when tap on data control

  • http://

    I have two issues with the Page Transitions code

    1) Whenever I have WP7 silverlight toolkit”s datepicker control in the page and if I trys to open it it throws the below error.

    at Microsoft.Phone.Controls.DataSource.GetPrevious(Object relativeTo)
    at Microsoft.Phone.Controls.Primitives.LoopingSelector.Balance()
    at Microsoft.Phone.Controls.Primitives.LoopingSelector.UpdateData()
    at Microsoft.Phone.Controls.Primitives.LoopingSelector.LoopingSelector_SizeChanged(Object sender, SizeChangedEventArgs e)
    at System.Windows.FrameworkElement.OnSizeChanged(Object sender, SizeChangedEventArgs e)
    at MS.Internal.JoltHelper.RaiseEvent(IntPtr target, UInt32 eventId, IntPtr coreEventArgs, UInt32 eventArgsTypeIndex)

    2) this one is more serious and it happen when i use the TurnstileFeather. When I scroll the listbox the list item get mixed up and over layed. It happen even in your sample.

  • http://

    Hi, Thanks for the awesome resource, I”ve been looking for this, for a long time now… I just have one small problem. I”m a designer, and can barely code.

    I want to implement this example in Expression Blend. For example, changing between states, I want to know how to create a storyboard with the continuum animation and then call it with the gotostate behavior in blend, then change the to the next state. Can you please explain how this can be achieved in blend.

  • http://


    I”ve compiled your C# code into a class library and using it in my VB.NET project. It works great but with one exception: The fade-in animation on the target page is not working. The original page animates out and the target page just appears without animation. When going back, both animations are working perfectly on both pages. Do you have an idea?

    When I override the GetAnimation function on the target page, it”s not called when navigating to the page. It is called only when navigating back.

  • Marmouset

    Thank you for this useful piece of code. I found your transition framework more flexible and scalable than Silverlight Toolkit”s one.

    There is an issue in feather animation, that is messing up the listbox items when scrolling.

    To fix it you need to remove, in the createAnimation method :

    pp.GlobalOffsetY = offsetAmount * -1;


    ct.TranslateY = offsetAmount;

    Btw, are you aware that GPU”s not working on Popup animation ?

  • http://

    i am try to re-use the SlideControl mechanism for having a similar popup in my application.
    But unfortunately i am getting NullReferenceException in Line 188 in DialogService.cs:

    PopupContainer.Content = _overlay;

    Can you just see, what all needs to be done if you create a new project and copy all of the code from your project for having the similar SlideControl mechanism.

    I am trying to figure out where is the problem but not successful, but my doubts are in App.xaml with “CustomFrame” resource. Again can”t figure out where are you using this in your project.

    any help would be appreciated.

  • http://

    I like this however… can I implement this page transition effect in a wpf project (not silverlight). Can anybody provide some sample code

  • http://

    Whats the license on the code? Can we extend/use in apps released on the marketplace?

  • http://

    Do you have any animations like the descriptions that animate for each ListItem within the default WP7 settings app? You will see as you flick between each pivot there is a subtle animation on each description that describes what the setting does.

  • http://

    Hi Kevin,

    I encountered a problem while I was integrating Turnstile Feather into an app, and I discovered that it also happens with the sample app. However, I have found a fix.

    To observe the problem (try on the emulator first): Launch the sample app and select turnstile feather. On the turnstile feather page, scroll the ListBox up or down. When you release your finger, the list items suddenly end up very widely spaced apart. Item 7 disappears, and Items 8 and 9 are out of position. Now press the back key to go back to the main page. Again scroll the ListBox, and see the same problem also happen on the main page.

    On the emulator, the problem easily reproduces every time. On the phone, I may need to swipe the ListBox a few times before it happens.

    The problem and fix is the following. When the turnstile feather Storyboard is created, new Projection and RenderTransform properties are created for each ListBoxItem. The fix is to delete (set to null) Projection and RenderTransform for each ListBoxItem after the Storyboard animation is completed.

  • http://

    Any reason to have the XAML storyboards as strings instead of as XAML files as the WP7 Toolkit has?

  • Pingback: My Homepage()

  • Pingback: asta canon()

  • Pingback:

  • Pingback: 30 day millionaire software()

  • Pingback: Number One Sex Toy()

  • Pingback: online smoke shop()

  • Pingback: news times wordpress theme free download()

  • Pingback: Handballshop()

  • Pingback: rental management()

  • Pingback: property management company()

  • Pingback: residential electrical services()

  • Pingback: property management company()

  • Pingback: Bar Guide()

  • Pingback: LCWSoft - Web Hosting in Canada()

  • Pingback: buy backlinks()

  • Pingback: Digitaler Bilderrahmen Vergleich()


  • Pingback: top article()

  • Pingback: singing waiters()

  • Pingback: center for sight las vegas()

  • Pingback:

  • Pingback: delhi metro map download()

  • Pingback: PDT-2x1015()

  • Pingback: actions()

  • Pingback: how to make money online course()

  • Pingback: adult traffic()

  • Pingback:

  • Pingback:

  • Pingback: Carbon wheels()

  • Pingback:

  • Pingback: this page()

  • Pingback: Mileage expenses()

  • Pingback: company director responsibilities()

  • Pingback: website SEO boost()