Page Transitions for Windows Phone 7 Application

Bring Motion to your Windows Phone 7 Application using the Telerik animation engine and page transition framework.

I will not reveal a big secret if I say that the whole Metro UI guidelines are based on content and motion. But how can you bring motion to your applications? This is the question we asked ourselves back in the days when we started to work on our Rad Controls for Windows Phone 7. We are now happy that we released the first CTP version of the controls with support for Metro like animations and transitions. We built our own Animation and Transition engine from the ground up in order to satisfy the very high requirements the Metro guidelines have for application animations. Needless to say the animation engine is optimized to run on the new compositor thread of the device - thus ensuring maximum performance and UI thread responsiveness.

We created the following list of base animations that are available out of the box from our suite:

• Fade,
• Scale,
• Move,
• Slide,
• Perspective,
• Turnstile,
• Tile,
• Rotate,
• Resize,
• Swivel,  and
• Continuum

One of my favorite transitions is the Tile transition. It is an exact copy of the transition used on the Home screen of the WP7 OS. Click below to see the tile animation in action (Please note that this is not the Home Screen of the device - this is a custom built SL application to mimic the experience you get in the WP7 OS tiles - if you want that project and the tiles implementation - please let us know).  

As you can see we covered most of the available properties of a FrameworkElement you would like to animate - including some specific predefined WP7 style transitions - like Turnstile, Tile and Continuum. Why am I saying that these are base animations? Because we also added an AnimationGroup class which allows you to combine several animations over a single FrameworkElement. So now you can create Slide + Fade, Rotate + Scale, Slide + Rotate + Fade animation - you get the idea. The animation engine turned out to be a very powerful tool in the hands of a developer who wants to add the motion experience to his phone application and to comply with the Metro guidelines. Internally we also use the same framework for the rest of the controls for Windows Phone 7 - Window, PickerBox, DatePicker, etc.

What we also built is the Transition control which leverages the power of the animation framework and provides you with an easy way to animate the transitions when changing content. We also created a special Rad PhoneApplicationFrame which will animate the transitions between the pages in the windows phone application. The frame will also animate the transition between the Portrait and Landscape orientation of the device - with the animation you want. We support all the available transitions you may need :

• ForwardOut - this is the transition that will be executed on the current page when navigating away from it,
• ForwardIn - this is the transition that will be executed on the new page when navigating to it,
• BackwardOut - this is the transition that will be executed on the current page when user has pressed the Back button,
• BackwardIn - this is the transition that will be executed on the new page when user has navigated to it using the Back button

We provided the needed high level APIs so using the page transition is just a matter of replacing the PhoneApplicationFrame with RadPhoneApplicationFrame. It can't be more simple that that :). You don't need to create some special pages - all your existing page will continue to work.

With the page transitions we also support different page transition for each page. So if you want Page X to be animated with say the Turnstile transition - just set an attached property that will notify the transition control that this page should be animated differently from the rest.

Enough words! - Download the RadControls for Windows Phone to explore the code and run the demos on the emulator - or better yet - check the performance of the animations on the device!