W8WIL #4: Pinch-to-Zoom and Rotate in the Simulator

As most of you may have figured out, I’ve been doing a fair amount of Windows 8 development over the last year or so, much of it focused on HTML5, CSS3, and JavaScript apps. In this 3rd (whoops! It’s the 4th, not 3rd) installment of my Windows 8: What I’ve Learned series, I’ll share some tips on using the Windows Simulator for testing your Windows Store apps.

One of the features that I find very handy in Visual Studio 2012 for building Windows Store apps is the Simulator. You can build and deploy your apps to the simulator in order to test them in ways that would not otherwise be possible without specialized hardware. For example, if you’re building your apps on a desktop machine with a native resolution of 1920×1080 (such as the PC on which I’m writing this), the Simulator allows you to change the target resolution on the fly to simulate a variety of resolution and DPI levels, from a 10.6″ screen running at 1024×768 (the minimum resolution to run Windows Store apps) to the same size screen running at 1366×768 (the minimum resolution needed to support snapped view), all the way up to a 27″ screen running at 2560×1440. This allows you to see how your app will render at a wide variety of resolutions and DPI settings, without having to have a large number of physical test devices on-hand.

One of the areas of the Simulator that I didn’t quite grasp until very recently, however, was its support for simulating touch interaction. Basic touch mode was easy to understand…just click the hand icon, and the mouse behaves like a finger…click to touch, and move to drag. You can even use dragging gestures from the Simulator bezel to invoke the app bar, or the Windows 8 charms.

What I hadn’t figured out was the Pinch/zoom touch mode and the Rotation touch modes. In these modes, you get a pair of cursors, but it’s not immediately intuitive how to use them to simulate pinch or rotate gestures. Turns out to be pretty straightforward, once you check out the documentation(the interaction modes do rely on a mouse with a scroll wheel, so be sure to have one on hand before trying this out).

To use pinch-to-zoom (for example, to test Semantic Zoom in your app), just select the Pinch/zoom touch mode icon on the Simulator frame: PinchToZoom_2 and then move the pointer to the desired location, click the left mouse button, and scroll up or down using the wheel to zoom out or in. Simple!

Using rotation is similar. Select the Rotation touch mode icon on the Simulator frame: Rotation_2 and then move the pointer to the desired location, click the left mouse button, and scroll up or down using the wheel to rotate clockwise or counterclockwise.

Do take the time to read the full documentation on running your apps in the Simulator, as there are lots of additional features that can help you test the behavior of your app before you submit it for Windows Store certification, saving you time and frustration later.

Speaking of the Windows Store, if you’ve got a great idea, and want help turning it into a great app, you should register for Generation App. The Generation App program includes a 4-week process to get you from idea to app, including links to all the right documentation, tips, videos, and more. You can also access 1:1 phone support to talk with a Microsoft engineer about technical or design questions you may have. So sign up today!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.