Microsoft Explains How to Track Current Size and View State of Windows 8 Metro Style Apps

Microsoft's Chris Jones, Program Manager, Windows in a blog post looks at how Windows 8 Metro style app developers can detect current screen resize events and view state changes in code, and offer tips on how to write your app in the Windows 8 Consumer Preview to handle screen size and view state changes.Windows 8 […]

Microsoft's Chris Jones, Program Manager, Windows in a blog post looks at how Windows 8 Metro style app developers can detect current screen resize events and view state changes in code, and offer tips on how to write your app in the Windows 8 Consumer Preview to handle screen size and view state changes.

Windows 8 will be running on a variety of screen sizes and under various view states - that is, whether your app is in portrait, full-screen, filled, or snapped mode. A user might a 25-inch desktop monitor, or fill the whole screen of a 10-inch widescreen tablet. In each case, you want your app to take full advantage of the available space.

The "snap" feature allows two Metro apps to be on the screen at the same time. Those same apps can also be viewed in portrait or landscape modes. "For example, if you're using an HTML ListView to display items, you might want to use a GridLayout when in Full-screen mode, but use ListLayout when in Snapped mode, as in this figure. For XAML, you might want to similarly switch between a GridView control and a ListView control. To figure out how to do this, let's start by looking at how to detect resize and view state changes in code," explains Jones.

In the screenshot below, the full view state screen on the left has a Grid layout (HTML) or GridView control (XAML) -- while the snapped view state screen on the right has a List layout (HTML) or ListView control (XAML).

Windows 8 view state screen

"The basic pattern for handling screen resize and view state changes is the same for Windows 8 apps written in XAML and in HTML: simply attach callback functions to the appropriate events that the respective frameworks provide, and query for any additional necessary info," explains Jones.

"When programming your Windows 8 apps, you can also use the WinRT to directly query the current view state. The WinRT provides an enumeration value that tells you the current view state of an app. Windows 8 apps written in JavaScript also support the msMatchMedia function, which operates through the DOM window object, and can be useful when you have a condition with multiple media queries, such as the combination of full-screen landscape and a screen width of 1600 pixels," he says.

Later in the post he discuss how to deal with screen resizing, recommend "that you use resize events to trigger code that handles layout changes, because there are some screen resize events that don't cause a change in view state." For example, let's say you want to write an app that downloads background images of different sizes depending on the current screen resolution. "In snapped mode, you might want to download a small image to tile in the background, and in filled mode, you might want a standard 4:3 aspect ratio image, or a 16:9 aspect ratio image in fullscreen-landscape mode. In addition, depending on the height of the screen, you might want to select different image resolutions for each aspect ratio," he says.

He concludes the post saying, "If you're following this guidance, your code will see the correct current screen size and view state info every time the app is resized."