HTML and CSS Reference
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
Adapt an app's layout when it has been
placed into a snapped or filled layout.
Use CSS media queries with
Use the Windows.
Detect changes in an app's layout in
code or attempt to change the layout.
Define an update for a tile.
Use an XML tile template.
Use the Windows.UI.Notifications
Apply an update to a tile.
4 through 6
Update square and wide tiles.
Populate and combine two XML
Apply a badge to a tile.
Populate and apply an XML badge
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