software solutions for a mobile world

Best of breed Page rotation animations

Andy Wigley

In my previous post, I showed how to use the page rotate transitions offered in  the Silverlight for Windows Phone Toolkit November 2010. Those animations are pretty easy to use, but require you to write some code to decide which direction to animate – and we don’t like to write unnecessary code.

Also, the resulting animations are OK, but not as good as the ones created by David Anson of Microsoft which he described in a series of blog posts culminating in the ultimate implementation, the HybridOrientationChangesFrame which he describes in this blog post in September 2010. Davids’ animations are great, are designed to execute solely on the GPU to give great performance, and come in subtly different flavours, AnimateOrientationChanges, FadeOrientationChanges and HybridorientationChanges as he described in his post. They also *just work* without you having to write any code in an OrientationChanged event handler.

The Hybrid flavour combines the best bits of AnimateOrientationChanges and FadeOrientationChanges and – as David describes in his post – “… animates the rotation between the "before" and "after" states - but fades between them instead of morphing from one shape into the other. The idea is to get some of the same "Ooh, the application is turning!" visual appeal of AnimateOrientationChangesFrame without the undesirable performance implications for complex layouts. Because the "before" and "after" states don't change size in the proposed scenario, the entire animation can be done on the composition (render) thread! This same visual effect is implemented by some of the core Windows Phone 7 applications - so now it's easy to match that effect in your own applications with HybridOrientationChangesFrame! “

orientationchanges

A small problem presents itself if you want to use David’s orientation animations as well as the Page transition animations (page turn animations) you get in the Silverlight Toolkit. David’s animations are implemented in a custom Frame, and so are the Toolkit page transitions but since source code is available for both, I thought it shouldn’t be too difficult to merge the two.

In fact, I emailed david about it and he suggested that it might be as easy as changing the base class of his HybridorientationChangesFrame from PhoneApplicationFrame to the TransitionFrame included in the toolkit. I tested it out, and that’s all it took!

To do this yourself, download David’s solution code from the link on this blog post, unzip it and then open the solution in Visual Studio. Go to the DynamicOrientationChanges project and add a reference to Microsoft.Phone.Controls.Toolkit – the Silverlight Toolkit assembly. Then change the base class in AnimateOrientationChangesFrame, FadeOrientationChangesFrame and HybridOrientationChangesFrame from PhoneApplicationFrame to TransitionFrame (the custom frame from the Toolkit).

/// <summary>
/// PhoneApplicationFrame subclass that animates and fades between device orientation changes.
/// </summary>
public class HybridOrientationChangesFrame : TransitionFrame
{
   ...

That’s it! Now you can use Davids’ rotate animations as well as the Toolkit Page transitions as follows:

  • Add a reference to the DynamicOrientationChanges.dll you just built from the sample code, or add one of the AnimateOrientationChangesFrame, FadeOrientationChangesFrame or HybridOrientationChangesFrame directly to your project.
  • Add a reference to the Silverlight Toolkit for Windows Phone to your project:

image

  • Edit the InitializePhoneApplication method in App.xaml.cs and set RootFrame to your preferred rotate transitions frame. Optionally set any properties to affect the rotate animation – I prefer a duration of 0.6s:
private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
//RootFrame = new PhoneApplicationFrame(); // This is the standard Frame in a WP7 project
//RootFrame = new TransitionFrame(); // This uses the custom Frame in the Silverlight Toolkit RootFrame = new Delay.HybridOrientationChangesFrame(); // Use the rotation-enhanced custom Frame that
// derives from the Toolkit TransitionFrame
((Delay.HybridOrientationChangesFrame)RootFrame).Duration = TimeSpan.FromSeconds(0.6); ...
  • Finally, implement any Page transitions you want to use by adding the required XAML to each page, as described briefly in this post also by David Anson or in more detail by Will Faught here.

That’s It! Now you can enjoy the best screen rotate transformations and the Silverlight Toolkit page transitions together.

Enjoy!


Posted Nov 24 2010, 11:37 AM by Andy Wigley
Copyright © 2014 APPA Mundi Limited. All Rights Reserved. Terms of Use and Privacy Policy. OrcsWeb's Windows Cloud Server Hosting