WP7Contrib Transitions – Easy Page Transitions for Windows Phone 7, Part 1

WP7Contrib offers an alternative to the WP7 Silverlight Toolkit transitions, and in my humble opinion, the alternative is significantly better in this case. The Silverlight toolkit offers easy integration of transitions via a little XAML markup and a minor change to the root frame. The biggest problem with the toolkit transitions are that they’re slow and exceedingly memory intensive with complex layouts consuming copious amounts of memory. In my latest app the transitions alone could use up to 40MB. Don’t forget, there is a 90MB limit for all apps when operating on devices with 256MB RAM.

WP7Contrib offers an alternative that’s code-based rather than markup-based. This may be preferable, or it may not depending on your internal setup. Personally for something like transitions I prefer code-based so transitions are the ‘default’ rather than the exception.

The greatest thing about WP7Contrib Transitions, is that they’re a doddle to implement if you just want to have transitions between pages. In WP7 the ‘standard’ transition is the turnstile transition – this is where each screen appears and disappears as if they’re pages in a book. Here’s how to get this transition into your app:

Simple Transitions

If you want to see the transitions for yourself, click here to download the demo app. Otherwise , download WP7Contrib and compile it. Once you’ve done this, add the WP7Contrib.View.Controls and WP7Contrib.View.Transitions assemblies to your project References. These are the only two assemblies required to get transitions working, and I prefer to include as few assemblies as possible to keep load times fast.

Next you need to make some minor tweaks to every page you want to animate. Add the following namespace to the XAML file:

xmlns:animation="clr-namespace:WP7Contrib.View.Transitions.Animation;assembly=WP7Contrib.View.Transitions"

Next change the page type to ‘animation:AnimatedBasePage’. To do this the first line of your XAML file should be:

<animation:AnimatedBasePage

And the last line should be:

</animation:AnimatedBasePage>

Now go into the code-behind and change the base type of your page to ‘AnimatedBasePage’. The final change is to add the following line into the constructor:

AnimationContext = LayoutRoot;

This tells WP7Contrib that your ‘root element’ is ‘LayoutRoot’. You can set any element to be the AnimationContext, this is useful if you want to only animate a sub-area of the page between pages. Generally speaking you’ll want to target LayoutRoot, or whichever element you’ve got containing all of your UI. This is the big difference between WP7Contrib and the WP7 Toolkit which targets the page frame itself.

Compile and run your app – you should find your pages automatically use the turnstile transition. Don’t forget you can download the demo app here.

Personally, I can’t recommend WP7Contrib transitions enough. They have a few caveats, but the performance improvements and memory savings are substantial. I hope that this article has given you a taster of the transitions and how easy they are to implement.

Hungry for more? Click here to view part 2 where we cover additional transitions.

6 comments

Thanks so much for this, as a complete newb (I started learning C# last week) would you be able to explain how to compile the file. I took the reference file from your sample file in the end.
Also for other beginners such as myself perhaps you should mention the fact you have to reference the namespace in the codebehind page as well.

Thanks again,

Ian

You sure are jumping into C# at the deep end! I’ll add the namespace info soon – good catch. Can you tell me what issues you had compiling the file?

Thank you so much Dan! I put these transitions into my current app: GeoFlick. Almost ready to publish the udpate, which includes very many updates, now including turnstile!

Again, thank you!

I have a simple app that used to use SilverLight toolkit transitions. I converted them to WP7Contrib transitions using this page.

App has only two pages, builds and works fine, but I see no transitions. Whats even more strange I see a transition when I click hardware back key. Just not when I click back button in my page that just does NavitionService.GoBack().

What can I do to troubleshoot?

Timo Kinnunen

Nice work. Your page transitions are faster than toolkit (.xaml) transitions. I will use your page transitions and I say thank you. Hopefully I can contribute in same manner in future.

Hi Dan,

Thanks for this awesome work. I’ve noticed a slight problem with the transitions though. Using your demo app, if you select an item from the list and navigate to the next page, then press the phone’s start button to leave the app. Then press the back button to go back into the app, the page does not display, we just see a blank screen.

Leave a Reply to Svein Erik Cancel reply