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:
- Full screen + Landscape
- 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
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.
Kirupa Chinnathambi, Jeff Ferman