Universal Screen Orientation

Windows Phone 8 developers migrating to the universal runtime app model may notice some slight differences in the way that things are implemented. One in particular is screen orientation.

For the purposes of this tutorial, I will show you how the Silverlight app model implements screen orientation support and then after, how to implement the same functionality in a Windows Phone RT app.

Windows Phone 8 / 8.1 Silverlight implementation

Settings the orientation in Windows Phone Silverlight apps was as easy as settings a couple of properties on your PhoneApplicationPage. When creating new pages, these were often set for you so you may have noticed them before. These properties are SupportedOrientations and Orientation.

SupportedOrientations would let your page know the types of orientation it could support and these were Portrait, Landscape or PortraitOrLandscape. Orientation on the other hand tells your page how to initially render itself. The options for this included all variations of Portrait and Landscape for a phone.

To set these properties, you do so in your XAML as follows:


<phone:PhoneApplicationPage SupportedOrientations="Portrait" Orientation="Portrait" />

These values are to be set per page.

Windows Phone 8.1 RT (Universal App)

Windows Phone 8.1 RT apps however take a different approach to screen orientation. By default, a Windows Phone 8.1 RT app will not have any preference to screen orientation meaning that you could create a new project in Visual Studio, run it and your app will be able to work in both landscape and portrait views by default.

For app wide orientation preferences, open the Package.appxmanifest file in your project. In the Application tab, you will notice a section called Supported rotations.

Package.appxmanifest Orientation

Application tab in Package.appxmanifest

By choosing orientations here, you will set the supported orientation for the entire app.

However, say you set your app wide orientation to be portrait and you have one page that needs to be in landscape, perhaps a camera page, it is possible for you to set the orientation of your page in code.


DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait;
DisplayInformation.AutoRotationPreferences = DisplayOrientations.PortraitFlipped;
DisplayInformation.AutoRotationPreferences = DisplayOrientations.Landscape;
DisplayInformation.AutoRotationPreferences = DisplayOrientations.LandscapeFlipped;

By adding one of these lines of code into your Windows Phone 8.1 RT project, you can force the app to change its orientation regardless of the settings you choose in the appx manifest file. If you’re navigating between pages where orientation needs to be specific though, you’ll have to remember to reset the orientation in code.

If you have any questions, please leave a comment below and I will get in touch as soon as possible!

Join the discussion 3 Comments

Leave a comment