Microsoft Windows Simulator Rotation and Resolution Emulation

Visual Studio Blog

November 4th, 20110 0

The Windows Simulator is a tool provided in Visual Studio 11 Developer Preview that helps debugging Metro style applications. Its main purpose is to enable debugging when developers want to test how their applications respond to the new Metro style capabilities without having a device that supports those capabilities. It is implemented as a remote connection session to the same machine, but additionally emulates common hardware functionalities available in new devices, e.g., Rotation (i.e., orientation change), High Resolution and Touch. This article focuses on Rotation and Resolution emulation.

Rotation and Orientation-Aware Application

Roughly, an orientation-aware application can be coded in two ways (A sample app is available here [1]):

1. It can listen to the Orientation Sensor. As shown in the sample [1], it looks like:

OrientationSensor _sensor = OrientationSensor.GetDefault();

if (_sensor != null) {
 _sensor.ReadingChanged += new TypedEventHandler<OrientationSensor,
 OrientationSensorReadingChangedEventArgs>(ReadingChanged);
}

2. It can also listen to the display orientation change.

This can be hooked in HTML code through @media rule. Additional customization can be achieved by adding an event handler to Windows.Graphics.Display.DisplayProperties.

The Simulator doesn’t support the emulation of Orientation Sensor, and is only able to trigger a display orientation change. Therefore in the following section, we will concentrate on examples of orientation-aware applications that work with the Simulator.

Orientation-Aware Application: HTML/CSS Binding

Let’s start with an orientation-aware application that has only HTML tag.

1. Start Visual Studio Express. Then create a Blank Application, by clicking “File/New Project…”, “Templates/JavaScript/Blank Application”

2. In the generated project, you will find a file default.html. Make the following modifications to the generated code:

2.1 Add the following code to the end of <head>…</head> code block.

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta http-equiv="MSThemeCompatible" content="yes" />

<style type="text/css">

 #fullscreen { }

 #fill { }

 #snapped { }

 #deviceportrait { }

 @media screen and (-ms-view-state: full-screen) {

 #fill { display: none; }

 #snapped { display: none; }

 #deviceportrait { display: none; }

 @media screen and (-ms-view-state: fill) {

 #fullscreen { display: none; }

 #snapped { display: none; }

 #deviceportrait { display: none; }

 @media screen and (-ms-view-state: snapped) {

 #fullscreen { display: none; }

 #fill { display: none; }

 #deviceportrait { display: none; }

 @media screen and (-ms-view-state: device-portrait) {

 #fullscreen { display: none; }

 #fill { display: none; }

 #snapped { display: none; }

</style>

2.2 Add the following code to the end of <body>...</body> code block.

<div id="fullscreen" class="win-contentSubtitle">Full Screen</div>

<div id="fill" class="win-contentSubtitle">Fill</div>

<div id="snapped" class="win-contentSubtitle">Snapped</div>

<div id="deviceportrait" class="win-contentSubtitle">Device Portrait</div>

Together, the above code claims that when the Metro style app is in full-screen landscape mode, the app shows “Full Screen”; when it is in full-screen portrait mode, the app shows “Device Portrait”. (Note: by MSDN definition, “a value of full-screen indicates the device is in landscape orientation and the application’s client area is the same height and width as the device’s height and width.” For a detailed explanation about -ms-view-state media feature, refer to this MSDN article[2]).

3. Now change the debug target from “Local Machine” (the default value) to “Simulator”.

4. F5 to start the debugging.

You should see the app displaying something like “Full Screen”.

5. Click the Simulator “Rotate +90 degrees” button to rotate the Simulator clockwise for 90 degrees.

You should see the app displaying something like “Device Portrait”.

In summary, we have shown a sample of how to write an orientation-aware Metro style app. Without orientation sensor, it is not straightforward to trigger –ms-view-state event so that one can test his/her Metro style app. The Simulator comes to the rescue in this case.

Orientation-Aware Application: Binding through Event Handler

Another approach to customize a Metro style app in response to an orientation change is to explicitly add an event handler. The code is as simple as:

Windows.Graphics.Display.DisplayProperties.OrientationChanged +=

 new DisplayPropertiesEventHandler(DisplayProperties_OrientationChanged);

An interested reader can download the sample application [1]to try the debugging experience with the Simulator. Here are the detailed steps:

1. Download the sample project and unzip the solution to a temp folder.

2. Start Visual Studio Express and open the project OrientationCS.csproj.

3. Now change the debug target from “Local Machine” (the default value) to “Simulator”.

4. Set a breakpoint at MainPage.xaml.cs in the below code (around line 190):

if (DisplayProperties.CurrentOrientation == DisplayOrientations.Portrait

 || DisplayProperties.CurrentOrientation == DisplayOrientations.PortraitFlipped)

5. F5 to debug the app.

6. Click the Simulator “Rotate +90 degrees” button to rotate the Simulator clockwise for 90 degrees. Now you should see the breakpoint hit!

Again, without the Simulator, it would be difficult to debug such application without having an actual device with an orientation sensor.

Resolution

Assume a developer has a computer with “mismatched” video adapter and monitor: the video adapter supports a high resolution while the monitor doesn’t. In such case it would be difficult for the developer to test his Metro style app in the high resolution. Again, the Simulator helps in this case: It displays common resolutions that are supported by the video adapter, and allows the user to choose each resolution for testing purpose inside the Simulator. For example, in the below screenshot of the Simulator, it shows various resolutions supported by my computer’s video driver. Here I am able to test a Metro style app with a high resolution of 2560*1440, even though my monitor doesn’t display such high resolution.

I hope that you have enjoyed this post. By now you should have a good understanding about the support for rotation and resolution in the Simulator.

Thanks,

Zebin Chen

Software Development Engineer, Visual Studio

References:

[1] OrientationSensor Sample: http://code.msdn.microsoft.com/windowsapps/OrientationSensor-Sample-99595893

[2] –ms-view-state media feature: http://msdn.microsoft.com/en-us/library/windows/apps/hh465826(v=VS.85).aspx