LearnNowOnline

Blog

Windows 8 Using XAML: Introducing Badges

Excerpt by Ken Getz | April 18, 2014

As you have seen, tiles act as a Windows Store app's interface on the Windows Start screen. These tiles can display static or "live" data, depending on the functionality you add to the application. Sending notifications to the tiles to update their content is the topic of a different/earlier section-in this section, you'll learn about creating the badge that can appear in the lower-right corner of any tile. This badge is a separate entity from the tile content, and you create and update the badge separately.

Badge Overview

A badge on a tile displays summary or status information for the application, and that information must be specific to your particular application. In other words, it would be confusing and irrelevant to display information about anything other than the application associated with the tile. A badge on a tile can take on one of only two forms:

• A numeric value between 1 and 99; numbers greater than 99 appear as 99+.
• A glyph (a small image); one of a set of pre-defined glyphs.

Badges can appear on either wide or square tiles, and badges always appear in the lower right corner of the tile (lower-left corner, for RTL languages). You might use a badge to indicate any of the following sample scenarios:

• Network connection in an online game.
• User status in a messaging app.
• Number of unread email messages.
• Number of new posts in a social media app.

Consider these things when designing an application that includes a badge on the applications tile:

• Badges can only display numeric values between 1 and 99. Setting the value of the badge to 0 clears the badge, and setting the value to a number greater than 99 appears as 99+ on the badge.
• Badges can display a limited number of glyphs (plus a special glyph value, None, which displays nothing). You cannot extend the list, and Windows supplies all the glyphs that a badge can display.

As an example, Figure 1 shows a sample tile for the Windows Store. This tile displays the number of apps that require updating.

Figure 1. The Windows store tile, with a badge.

Figure 2 shows a sample application tile that displays a glyph badge. This glyph is one of a small set of available glyphs.

Figure 2. The sample app displays a badge showing a glyph.

NOTE Samples in this chapter assume that you have installed Visual Studio 2012 Update 1 (or later). If you are running the original release of Visual Studio 2012, some of the steps will not function correctly.

This post is an excerpt from the online courseware for our Windows 8 Using XAML: Tiles, Badges, Print, and Charms,course written by expert Ken Getz.