Windows 8 : how to detect the orientation and the layout state of a metro app ?

, , 3 Comments

Metro applications and windows 8 is designed to be runned on a PC. This is even better if this PC is a tablet 🙂 (but an eeepc is too small)!
If the tablet has the required sensors, the application can detect its orientation and changes its layout to reflect it.

More over, the metro app can be used in fullscreen or in splitted mode. The last one is basically a way to run two metro applications side by side.

In this post we are going to see how we can detect this settings and follow their changes.

What is the splitted mode ?

The splitted mode displays two application side by side but each does not get the same aera to be displayed. One gets the four fith of the screen and the other gets only the last fith to be displayed. This enable scenario where you bring the main app in the main aera and a “note application” to in the small aera. What is interesting too is that the “small aera” stays displayed even if you changes the application in the main. This is as you were pinning an app.

In the screenshot below you can see visual studio in the main aera and the developped application in the small aera on the right. There is a green bar on the middle which you can drag to decide which application you want to be the ‘main’.
Splitted app example

How to get the orientation and its changes ?

There is one class named DisplayProperties which exposes a static event named OrientationChanged. By subscribing this event you will be noticed of every change of orientation of the device. The current orientation is then available trough it’s CurrentOrientation property.

Here is an example:
[csharp] private void Page_Loaded(object sender, RoutedEventArgs e)
{
DisplayProperties.OrientationChanged += Page_OrientationChanged;
}

private void Page_OrientationChanged(object sender)
{
//The orientation of the device is …
var orientation = DisplayProperties.CurrentOrientation;
}
[/csharp]

There is five orientation values :

  1. DisplayOrientations.None: the orientation is unknow.
  2. DisplayOrientations.Landscape: the application is in landscape mode. the default one for a table I guess…
  3. DisplayOrientations.Portrait: the application is portrait mode, the easier one to read an ebook.
  4. DisplayOrientations.LandscapeFlipped: the application is in landscape mode: the other landscape ;-).
  5. DisplayOrientations.PortraitFlipped: the application is in portrait mode: the other portrait 😉

How to get the layout state and its changes ?

This time, you have to use the ApplicationLayout class. It exposes a GetForCurrentView method which gives you the instance regarding the current view. This instance exposes then an event named LayoutChanged. You can then subscribe to it to be notified of the changes of the layout of the application.

Here is an example:

[csharp]private void Page_Loaded(object sender, RoutedEventArgs e)
{

DisplayProperties.OrientationChanged += Page_OrientationChanged;

if (_displayHandler == null)
{
_displayHandler = Page_OrientationChanged;
_layoutHandler = Page_LayoutChanged;
}
DisplayProperties.OrientationChanged += _displayHandler;
ApplicationLayout.GetForCurrentView().LayoutChanged += Page_LayoutChanged;
SetCurrentViewState(this);
}
private void Page_LayoutChanged(object sender, ApplicationLayoutChangedEventArgs e)
{
//The current layout is …
var currentLayout = ApplicationLayout.Value;
}
[/csharp]

There is three layout states :

  1. ApplicationLayoutState.FullScreen : the application is displayed alone in .. fullscreen mode.
  2. ApplicationLayoutState.Filled : the application is displayed in ‘splitted mode’ and in the ‘main’ aera.
  3. ApplicationLayoutState.Snapped : the application is displayed in ‘splitted mode’ and in the ‘small’ aera.

Funny thing: the framework swap the comments for the snapped and full screen mode.

As you can have seen, the code is straigthforward and easy to put in place !

Regards,

 

3 Responses

  1. John

    16/03/2012 4 h 10 min

    The ApplicationLayout class is gone as out consumer preview.

    They have renamed it to ApplicationView under the Windows.UI.ViewManagement namespace. It's fun living on the cutting edge…

  2. bernadusedwin

    07/01/2013 17 h 24 min

    the article is very simple and easy to understand.
    This is really helpfull but also create misguide of “memory leak”

    you should add this two lines :
    DisplayProperties.OrientationChanged -= _displayHandler;
    ApplicationLayout.GetForCurrentView().LayoutChanged -= Page_LayoutChanged;

    DisplayProperties & ApplicationLayout is static.
    So must unload on every exit page event

    apologize for my funny english.
    English is not my main language
    i hope you understand the point of my comment.
    Once again, thx for the article. This is really helpfull

Comments are closed.