Windows Phone 7 Page Orientation Change Animations

If you want your Windows Phone 7 Silverlight apps to look great and to integrate well with the phone look and feel, then you need to have good animations when moving from page to page, and if you’ve supported portrait and landscape orientations in your pages, when your user changes from portrait to landscape orientation and vice-versa. Of course, these kind of animations should be built into the standard project templates but currently they’re not – although I’d expect that to be rectified in some future release of the developer tools.

Fortunately, an easy remedy for this is available now. The Silverlight for Windows Phone Toolkit November 2010 has been released which contains lots of goodies, including lots of controls and something called the TransitionFrame which is a custom PhoneApplicationFrame that has been tweaked to add support for page and rotate transitions. David Anson blogged about all the great stuff in the toolkit here.  Will Faught from the Silverlight Toolkit team blogged about the page transitions built into the Silverlight Toolkit bits so if you want to find out more about those, read his post.

So, there’s been plenty of coverage of the page transitions, but not much has been said about the Orientation change transitions. You enable support for both portrait and landscape orientations by setting the SupportedOrientations attribute of your PhoneApplicationPage as follows:

<phone:PhoneApplicationPage 
    x:Class="ToolkitRotateAnimations.MainPage"
    …
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    >

That is enough for the page to re-orientate automatically when the user rotates the phone from portrait to landscape or vice-versa, but by default there’s no built-in animation so it just snaps to the new orientation, which is ugly.

To add an animation when the display re-orientates, download and install the Silverlight for Windows Phone Toolkit November 2010 (or later) and then in your project, add a reference to the System.Windows.Controls.Toolkit assembly – you’ll find that on the .NET tab.

All you need to do, is to code an event handler for the OrientationChanged event of your Page object, and write code similar to the following:

public partial class MainPage : PhoneApplicationPage
{
    PageOrientation lastOrientation;

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);

        lastOrientation = this.Orientation;
    }

    void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
    {
        PageOrientation newOrientation = e.Orientation;
        Debug.WriteLine("New orientation: " + newOrientation.ToString());

        // Orientations are (clockwise) 'PortraitUp', 'LandscapeRight', 'LandscapeLeft'

        RotateTransition transitionElement = new RotateTransition();

        switch (newOrientation)
        {
            case PageOrientation.Landscape:
            case PageOrientation.LandscapeRight:
                // Come here from PortraitUp (i.e. clockwise) or LandscapeLeft?
                if (lastOrientation == PageOrientation.PortraitUp)
                    transitionElement.Mode = RotateTransitionMode.In90Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In180Clockwise;
                break;
            case PageOrientation.LandscapeLeft:
                // Come here from LandscapeRight or PortraitUp?
                if (lastOrientation == PageOrientation.LandscapeRight)
                    transitionElement.Mode = RotateTransitionMode.In180Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In90Clockwise;
                break;
            case PageOrientation.Portrait:
            case PageOrientation.PortraitUp:
                // Come here from LandscapeLeft or LandscapeRight?
                if (lastOrientation == PageOrientation.LandscapeLeft)
                    transitionElement.Mode = RotateTransitionMode.In90Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In90Clockwise;
                break;
            default:
                break;
        }

        // Execute the transition
        PhoneApplicationPage phoneApplicationPage = (PhoneApplicationPage)(((PhoneApplicationFrame)Application.Current.RootVisual)).Content;
        ITransition transition = transitionElement.GetTransition(phoneApplicationPage);
        transition.Completed += delegate
        {
            transition.Stop();
        };
        transition.Begin();

        lastOrientation = newOrientation;
    }
}

After numerous attempts with OneNote, I managed to get a screen capture with it in mid-animation:

This gives a pleasing enough effect, but in my opinion this takes too much code, and there are better rotate animations out there in the blogosphere. In my next post, I’ll show you how to get even more pleasing rotate transformations.