When you are designing new apps, you will want to make sure they can be viewed across various orientations and states.  For a detailed discussion about design considerations for view states, orientations, and resolutions in Windows 8 be sure to read Scaling to different screens on the Building Windows 8 blog and Getting the most out of your pixels–adapting to view state changes  on the Windows Application Developer blog.

The two orientations are portrait and landscape:

The view states are:

You can also learn more about Supporting multiple views by reading the detailed document on the Windows Developer Center.

When you are building your apps, you are likely to be using Blend on a laptop or a monitor whose orientation is in Landscape. What you need is a way to design your application inside Blend while simulating the various views states and orientations at design-time.

Views inside the Platform Panel

To help you design applications that take advantage of view states and orientations, Blend enables you to select different preview views in the Platform panel.

The Views section contains four buttons, and these four buttons correspond to the view states and orientations that your application can find itself in.

From left to right, these buttons correspond to:

1. Full screen + Landscape
2. Fill
3. Snapped
4. Full screen + Portrait

When you click each button, your artboard is resized to match the expected size of your application when you run it.

For example, here is what your artboard looks like when you are in the Snapped view state:

Pressing each of the other buttons will not only resize your artboard into the appropriate dimension, your application inside Blend will react to this new view state just as it would in the simulator or on an actual device—for both HTML and XAML-based apps.

What Happens in HTML

In an HTML-based application, if you have any media queries that react to the views or orientations, the appropriate media queries will become active. If you have any JavaScript that subscribes to the events for orientation or view state changes, that JavaScript will also run. Any code you may have written to poll for the application’s current view or orientation will return the updated value as well.

What Happens in XAML

In a XAML-based application, any control that responds to the ViewStateChanged event will update on the artboard.  We will also update the width and height of the root control hosting your current page or UserControl to match what the values would be at runtime.  These changes will be made for any XAML document that has a Page as its root element.  If you would like to see the Device Chrome and be able to change views for UserControls and other elements, simply add d:ExtensionType=”Page”  as an attribute on the root element.

Let us know what you think about this feature. If you have any feedback on what you like / don’t like / etc., do let us know as well by either commenting below or e-mailing us directly at kirupac[at]microsoft.com and jferman[at]microsoft.com.

Cheers,

Kirupa Chinnathambi, Jeff Ferman