See Also:

Gus Class's Windows Developer Education Blog

Handling orientation changes and setting preferred orientation in Metro style apps

Handling orientation changes and setting preferred orientation in Metro style apps

  • Comments 4

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:

Windows.Graphics.Display.DisplayProperties.OrientationChanged
+= 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

Leave a Comment
  • Please add 7 and 6 and type the answer here:
  • Post
  • 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...

  • @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.

  • 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).

  • 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

Page 1 of 1 (4 items)