Handling orientation changes and setting preferred orientation in Metro style apps

I have recently been working on a very simple version of the game “Simon” in C# and XAML.  The following screenshot shows the game running:

I initially had developed the application without support for orientation.  As a result, when the application reflowed, it would crop components of the application off-screen (not desired!).  The following screen shot shows this happening in the device simulator.

So, I added some preferences to the application manifest that would indicate the application preferred to be in landscape and also set the preferences in the application startup.  To set the preference in the manifest, I clicked on the application manifest in VS11 and then set it to landscape.  To set the preference in the application startup, I added the following code to my Main():

Windows.Graphics.Display.DisplayProperties.AutoRotationPreferences = Windows.Graphics.Display.DisplayOrientations.Landscape | Windows.Graphics.Display.DisplayOrientations.LandscapeFlipped;

Now that is enough to just lock the display so that the components don’t flip out when the display gets re-oriented.  Additionally, the application will launch in landscape, so that’s good and well.  However, what if instead, I wanted to handle the case where the device is flipped.  The math for doing this is surprisingly simple: width becomes height for each square, and top becomes left and visa versa for the game board squares.  First, I need to add an event handler for the OrientationChanged event:

+= new Windows.Graphics.Display.DisplayPropertiesEventHandler(DisplayProperties_OrientationChanged);

This will cause the function “DisplayProperties_OrientationChanged” to be called when the device is rotated.  My handler calls a utility function in the game class which will update the width, height, left, and top values as appropriate to make the tiles reorient as shown in the following screenshot:

Key Takeaways

Make sure that you test your app in the simulator and see what happens when the orientation changes to discover orientation and reflow bugs.

See Also

Comments (5)

  1. KJ says:

    Cool idea – however, you'll notice that in landscape mode it goes Red, Green, Blue, Yellow (left to right, top to bottom).  However, in portrait mode – the colors are Red, Blue, Green, Yellow.  Not the point of the post – however, orientation swapping can (and often will) require more than top/left width/height swapping…

  2. gclass says:

    @KJ Great catch with blue and green swaps!  The right way to handle orientation changes here is definitely something smarter than I'm doing like animating the pieces to their proper places, I was only interested in keeping the objects on screen so I overlooked this.

  3. Caio Proiete says:

    Hi, I'm trying to lock the orientation to Landscape for a specific app, and I've just followed the steps you described in this post, but it doesn't seem to have any effect on the app (at least using the Simulator). The app still rotates to Portrait after setting the AutoRotationPreferences and setting the preferences in the manifest.

    Did this change between the different releases of Win8 (I'm using Release Preview).

  4. prasana says:

    can u show us a example can u post so that all could download that app and view

    my mail id prasanas14@gmail.com if you post it would help many

  5. Teresina Brisciana says:

    I there any way I can change some of my VIDEOS (not PHOTOS), videos, so that iPhone videos that were shot portrait style can appear on my computer screen in landscape style? Or is that impossible since it was taped with the phone in portrait mode? Thanks.

Skip to main content