Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 59

chapter

4

Layouts and Tiles

In this chapter, I describe two of the features that allow a Metro app to fit into the wider user
experience presented by Windows 8. The first of these features is the way that Metro apps can be
snapped and filled so that two apps can be viewed side by side. I show you how to adapt when
your app is placed into one of these layouts and how to change the layout when your interac-
tions don't fit inside the layout constraints.
The second feature is the Metro tile model. Tiles are at the heart of the Windows 8 replace-
ment for the Start menu. At their simplest, they are static buttons that can be used to launch
your app, but with a little work they can present the user with an invaluable snapshot of the
state of your application, allowing the user to get an overview without having to run the applica-
tion itself. In this chapter, I show you how to create live tiles by applying updates and by using a
related feature, badges . Table 4-1 provides the summary for this chapter.

Ta b l e 4 - 1 . Chapter Summary

Problem Solution Listing

Adapt an app's layout when it has been
placed into a snapped or filled layout.

Use CSS media queries with
Metro-specific properties.

1

Use the Windows.
UI.ViewManagement namespace.

Detect changes in an app's layout in
code or attempt to change the layout.

2

Define an update for a tile. Use an XML tile template. 3

Use the Windows.UI.Notifications
namespace.

Apply an update to a tile. 4 through 6

Update square and wide tiles. Populate and combine two XML

tile templates.

7, 8

Apply a badge to a tile. Populate and apply an XML badge

template.

9, 10

Dealing with Metro Layouts
Metro apps can be snapped into a 320-pixel strip of the screen so that the user can see two
applications at once. The other app, which occupies all of the display aside from those 320 pix-
els, is said to be filled . Ensuring that your application can adapt to being snapped and filled is
essential to providing the full Metro experience to your users. There are two mechanisms for