Windows Store App Development Series : Part 5 – App Rotation and Display Orientation

Hello,

In the fourth article of this series, we analyzed how CSS Media Queries can be used to control the presentation of an app for different layouts like portrait, landscape, full and snapped. In this article, we will cover how to setup an app to support different rotations and identify app display orientation using JavaScript.

Rotation

Rotation is a touch optimized technique using which user can rotate an app in a circular direction [clockwise / anti-clockwise]. Each Windows Store App template type in Visual Studio 2012 was designed to support multiple rotations. The Application UI tab in package.appxmanifest file contains a ‘Supported rotations’ section, using which you can select the rotations you need your app to support.

Supported rotations

This is one of the most important step during application design. Some of the apps [for e.g. a game app] may not look better in Portrait mode, in that case you can just check the Landscape rotation option. However for apps like blog reader, you might need to support all the rotations.

Display Orientation

Once you setup the app to support different rotations, programmatically you can identify the orientation of the app. Windows.Graphics.Display.DisplayProperties class provides list of properties and events using which you can identify current display orientation.

Lets create a new Windows Store App using JavaScript Blank App template and make changes as described below.

default.html

We have made a small change in default.html file defined below. In the body tag, we have defined a div element and set it’s id to message. We will use this element to display app orientation change result.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DisplayOrientation</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- DisplayOrientation references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="message"></div>
</body>
</html>

default.js

In addition to boilerplate code, below defined JS contains a function onOrientationChanged which displays the orientation result in the message div element we have defined in default.html. Next, when the app is ready [note we have handled app ready event!], we have hooked up onOrientationChanged function with the DisplayProperties orientationChanged event.

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            } else {
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.onready = function () {
        var message = document.getElementById('message');
        var display = Windows.Graphics.Display.DisplayProperties;
        display.addEventListener('orientationchanged', onOrientationchanged);

        onOrientationchanged();
    }

    function onOrientationchanged() {
        switch (Windows.Graphics.Display.DisplayProperties.currentOrientation) {

            case Windows.Graphics.Display.DisplayOrientations.landscape:
                message.innerText = "Display Orientation - Landscape";
                break;

            case Windows.Graphics.Display.DisplayOrientations.portrait:
                message.innerText = "Display Orientation - Portrait";
                break;

            case Windows.Graphics.Display.DisplayOrientations.landscapeFlipped:
                message.innerText = "Display Orientation - Landscape (flipped)";
                break;

            case Windows.Graphics.Display.DisplayOrientations.portraitFlipped:
                message.innerText = "Display Orientation - Portrait (flipped)";
                break;

            default:
                message.innerText = "Unknown";
                break;
        }

    }

    app.oncheckpoint = function (args) {
    };

    app.start();
})();

default.css

Though there are no changes required in CSS, I have made few changes to make the UI readable.

body {
    font-size: xx-large;
    text-align: center;
    color: black;
}

@media screen and (-ms-view-state: fullscreen-landscape) {
    body {
        background-color: khaki;
    }
}

@media screen and (-ms-view-state: filled) {
    body {
        background-color:lightgreen;
    }
}

@media screen and (-ms-view-state: snapped) {
    body {
        background-color:lightcoral;
    }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    body {
        background-color: lightblue;
    }
}

Output

With all the necessary code changes in place, run the app using Simulator and rotate it using built-in options. Display orientation information should be displayed as shown in below screenshots.

Landscape

Display Orientation - Landscape

Portrait

Display Orientation - Portrait

Landscape Flipped

Display Orientation - Landscape Flipped

Portrait Flipped

Display Orientation - Portrait Flipped

Summary

In this article we discussed how to configure a Windows Store app for multiple rotations. We also worked with built-in Windows API class Windows.Graphics.Display.DisplayProperties to identify display orientation.

Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>