{"id":1353,"date":"2011-11-04T03:35:00","date_gmt":"2011-11-04T03:35:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2011\/11\/04\/microsoft-windows-simulator-rotation-and-resolution-emulation\/"},"modified":"2022-10-12T11:27:15","modified_gmt":"2022-10-12T18:27:15","slug":"microsoft-windows-simulator-rotation-and-resolution-emulation","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/microsoft-windows-simulator-rotation-and-resolution-emulation\/","title":{"rendered":"Microsoft Windows Simulator Rotation and Resolution Emulation"},"content":{"rendered":"

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\u00a0capabilities 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.<\/p>\n

Rotation and Orientation-Aware Application<\/h2>\n

Roughly, an orientation-aware application can be coded in two ways (A sample app is available here<\/a> [1]):<\/p>\n

1. It can listen to the Orientation Sensor. As shown in the sample [1], it looks like:<\/b>\u00a0\u00a0 <\/span><\/p>\n

OrientationSensor <\/span>_sensor = <\/span>OrientationSensor<\/span>.GetDefault();<\/span><\/p>\n

if (_sensor != null) {\r\n _sensor.ReadingChanged += new TypedEventHandler<OrientationSensor,\r\n OrientationSensorReadingChangedEventArgs>(ReadingChanged);\r\n}<\/pre>\n
 <\/p>\n
2. It can also listen to the display orientation change.<\/b><\/p>\n
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<\/span>.<\/p>\n
The Simulator doesn\u2019t 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.<\/p>\n
Orientation-Aware Application: HTML\/CSS Binding<\/h2>\n
Let\u2019s start with an orientation-aware application that has only HTML tag.<\/p>\n
1. Start Visual Studio Express. Then create a Blank Application, by clicking \u201cFile\/New Project\u2026\u201d, \u201cTemplates\/JavaScript\/Blank Application\u201d<\/p>\n
2. In the generated project, you will find a file default.html. Make the following modifications to the generated code:<\/p>\n
2.1 Add the following code to the end of <head>…<\/head> code block.<\/p>\n
<<\/span>meta <\/span>content<\/span>=\"text\/html; charset=utf-8\" <\/span>http-equiv<\/span>=\"Content-Type\" \/><\/span><\/pre>\n
<<\/span>meta <\/span>http-equiv<\/span>=\"X-UA-Compatible\" <\/span>content<\/span>=\"IE=edge\" \/><\/span><\/pre>\n
<<\/span>meta <\/span>http-equiv<\/span>=\"MSThemeCompatible\" <\/span>content<\/span>=\"yes\" \/><\/span><\/pre>\n
<<\/span>style <\/span>type<\/span>=\"text\/css\"><\/span><\/pre>\n
 #fullscreen <\/span>{ }<\/span><\/pre>\n
 #fill <\/span>{ }<\/span><\/pre>\n
 #snapped <\/span>{ }<\/span><\/pre>\n
 #deviceportrait <\/span>{ }<\/span><\/pre>\n
 @media screen and (<\/span>-ms-view-state<\/span>: <\/span>full-screen) <\/span>{<\/span><\/pre>\n
 #fill <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #snapped <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #deviceportrait <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 }<\/span><\/pre>\n
 @media screen and (<\/span>-ms-view-state<\/span>: <\/span>fill) <\/span>{<\/span><\/pre>\n
 #fullscreen <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #snapped <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #deviceportrait <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 }<\/span><\/pre>\n
 @media screen and (<\/span>-ms-view-state<\/span>: <\/span>snapped)<\/span> {<\/span><\/pre>\n
 #fullscreen <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #fill <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #deviceportrait <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 }<\/span><\/pre>\n
 @media screen and (<\/span>-ms-view-state<\/span>: <\/span>device-portrait) <\/span>{<\/span><\/pre>\n
 #fullscreen <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #fill <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 #snapped <\/span>{ <\/span>display<\/span>: <\/span>none<\/span>; }<\/span><\/pre>\n
 }<\/span><\/pre>\n
<\/<\/span>style<\/span>><\/span><\/pre>\n
2.2 Add the following code to the end of <body>...<\/body> code block.<\/pre>\n
<<\/span>div <\/span>id<\/span>=\"fullscreen\" <\/span>class<\/span>=\"win-contentSubtitle\"><\/span>Full Screen<\/span><\/<\/span>div<\/span>><\/span><\/pre>\n
<<\/span>div <\/span>id<\/span>=\"fill\" <\/span>class<\/span>=\"win-contentSubtitle\"><\/span>Fill<\/span><\/<\/span>div<\/span>><\/span><\/pre>\n
<<\/span>div <\/span>id<\/span>=\"snapped\" <\/span>class<\/span>=\"win-contentSubtitle\"><\/span>Snapped<\/span><\/<\/span>div<\/span>><\/span><\/pre>\n
<<\/span>div <\/span>id<\/span>=\"deviceportrait\" <\/span>class<\/span>=\"win-contentSubtitle\"><\/span>Device Portrait<\/span><\/<\/span>div<\/span>> <\/span><\/pre>\n
Together, the above code claims that when the Metro style app is in full-screen landscape mode, the app shows \u201cFull Screen\u201d; when it is in full-screen portrait mode, the app shows \u201cDevice Portrait\u201d. (Note: by MSDN definition, \u201ca value of full-screen indicates the device is in landscape orientation and the application\u2019s client area is the same height and width as the device\u2019s height and width.\u201d For a detailed explanation about -ms-view-state media feature, refer to this MSDN article<\/a>[2]).<\/p>\n
3. Now change the debug target from \u201cLocal Machine\u201d (the default value) to \u201cSimulator\u201d.<\/p>\n
\"clip_image001[4]\"<\/a><\/p>\n
4. F5 to start the debugging.<\/p>\n
You should see the app displaying something like \u201cFull Screen\u201d.<\/p>\n
\"clip_image003[4]\"<\/a><\/p>\n
5. Click the Simulator \u201cRotate +90 degrees\u201d button to rotate the Simulator clockwise for 90 degrees.<\/p>\n
You should see the app displaying something like \u201cDevice Portrait\u201d.<\/p>\n
\"clip_image005[4]\"<\/a><\/p>\n
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 \u2013ms-view-state event so that one can test his\/her Metro style app. The Simulator comes to the rescue in this case.<\/p>\n
Orientation-Aware Application: Binding through Event Handler<\/h2>\n
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:<\/p>\n
Windows.Graphics.Display.<\/span>DisplayProperties<\/span>.OrientationChanged +=<\/span><\/pre>\n
 new <\/span>DisplayPropertiesEventHandler<\/span>(DisplayProperties_OrientationChanged); <\/span><\/pre>\n
An interested reader can download the sample application [1]<\/a>to try the debugging experience with the Simulator. Here are the detailed steps:<\/p>\n
1. Download the sample project and unzip the solution to a temp folder.<\/p>\n
2. Start Visual Studio Express and open the project OrientationCS.csproj.<\/p>\n
3. Now change the debug target from \u201cLocal Machine\u201d (the default value) to \u201cSimulator\u201d.<\/p>\n
4. Set a breakpoint at MainPage.xaml.cs in the below code (around line 190):<\/p>\n
if <\/span>(<\/span>DisplayProperties<\/span>.CurrentOrientation == <\/span>DisplayOrientations<\/span>.Portrait<\/span><\/pre>\n
 || <\/span>DisplayProperties<\/span>.CurrentOrientation == <\/span>DisplayOrientations<\/span>.PortraitFlipped) <\/span><\/pre>\n
5. F5 to debug the app.<\/p>\n
6. Click the Simulator \u201cRotate +90 degrees\u201d button to rotate the Simulator clockwise for 90 degrees. Now you should see the breakpoint hit!<\/p>\n
\"clip_image007[4]\"<\/a><\/p>\n
Again, without the Simulator, it would be difficult to debug such application without having an actual device with an orientation sensor.<\/p>\n
Resolution<\/h2>\n
Assume a developer has a computer with \u201cmismatched\u201d video adapter and monitor: the video adapter supports a high resolution while the monitor doesn\u2019t. 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\u2019s video driver. Here I am able to test a Metro style\u00a0app with a high resolution of 2560*1440, even though my monitor doesn\u2019t display such high resolution.<\/p>\n
\"clip_image009[4]\"<\/a><\/p>\n
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.<\/p>\n
Thanks,<\/p>\n
Zebin Chen<\/p>\n
Software Development Engineer, Visual Studio<\/p>\n
 <\/p>\n
References:<\/p>\n
[1] OrientationSensor Sample: http:\/\/code.msdn.microsoft.com\/windowsapps\/OrientationSensor-Sample-99595893<\/a><\/p>\n
[2] \u2013ms-view-state media feature: http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/hh465826(v=VS.85).aspx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0capabilities without having a device that supports those capabilities. It is implemented as a remote connection […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4980,155],"tags":[136,9,137,376,124,133],"class_list":["post-1353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-visual-studio","tag-css","tag-debug","tag-html","tag-java","tag-javascript","tag-xaml"],"acf":[],"blog_post_summary":"
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\u00a0capabilities without having a device that supports those capabilities. It is implemented as a remote connection […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=1353"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1353\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=1353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=1353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}