Windows Store App Development Series : Part 4 – App Layouts and CSS Media Queries

Hello,

In this article we will cover different layouts of Windows Store App and their resolutions. We will also look into CSS Media Queries by extending the Hello World app we built in previous article.

Layouts and resolution

Windows 8 operating system is designed to run on different screen sizes including small screen tablets, mid sized laptops to very large desktops. Off course, each of these machines have different resolutions, so its extremely important for you to understand different app layouts [Filled, Snapped, Portrait, Landscape] and resolutions that your app needs to support.

As mentioned in  Windows 8 app certification requirement, every Windows Store app must support a snapped layout. In landscape orientation, your app’s functions must be fully accessible when the app’s display size is 1024 x 768. Your app must remain functional when the customer snaps and unsnaps the app.

In a nutshell it says that your app needs to support min three layouts. Lets understand these layouts and their resolutions.

  • Full screen layout with resolution 1366×768 –  Using this mode user can view two apps [one in snapped mode and other in filled mode] on the device. Below image shows a layout of an app in Landscape / full screen mode

Full

  • Filled layout with resolution 1024×768 –  User can view just one app on his device using this resolution. Below image shows a layout of an app in Filled mode.

 Fill

  • Snapped view with resolution 320×768 – Using this view, user can snap the app to either right or left edge of the screen. Below image shows a layout of an app in Snapped view mode.

Snapped

Now that we know different app layouts, its right time to look into CSS Media Queries which helps you to control app presentation for each of these layouts.

Media Queries

As we discussed in the third article of this series, Visual Studio 2012 creates a boilerplate code for a Blank App project template. The default.css file contains CSS information for default.html page. Additionally it contains empty Media Queries stubs for defining styles for different app views.

body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

Let’s make a small change into default.css code in the Hello World application. In below code snippet we are setting different background colour for each of the layout we discussed earlier

body {
    color: Black;
    font-size: xx-large;
    text-align: center;
}

@media screen and (-ms-view-state: fullscreen-landscape) {
    body
    {
        background-color: khaki;
    }
}

@media screen and (-ms-view-state: filled) {
    body
    {
        background-color: lightyellow;
    }
}

@media screen and (-ms-view-state: snapped) {
    body
    {
        background-color: lightgreen;
    }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    body
    {
        background-color: lightblue;
    }
}

To see it in action, simply run the app using Simulator option. Since simulator has built-in rotation option, you can validate your media queries easily using it. Find below the screenshots of each of the layouts defined in updated CSS file.

Landscape

Landscape

Portrait

Portrait

Filled

Filled

Snapped

Snapped

That’s it.

Summary

In this article, we explored different layouts of a Windows Store App and the resolutions it needs to support. We also worked with CSS Media Queries using which you can control the presentation of these layouts.

Thanks.

Leave a Reply