Tag Archives: Badges

Windows 8 Using XAML: Introducing Badges

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.

introbadges1Figure 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.

introbadges2Figure 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.

ldn-expertkgetzThis 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. 

Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive and DevConnections, and he has written for several of the industry’s most-respected publications including Visual Studio Magazine, CoDe Magazine and MSDN Magazine.

Windows 8:Interacting with Tiles

Windows 8 displays tiles on its start screen, making it easy for users to interact with your applications. These tiles act as a representation of your applications, and make it possible for users to start your applications. But tiles do much more. You can just display static information on a tile, but that’s not really the intent. Tiles allow you to display information pertinent to your application, making it possible to display new, real-time information to the user.

In general, you can display text and images, plus a status badge, on a tile. You can update the content of the tile regularly, in reaction to an event, or at any time. Beware that even if the tile displays active data, the user can elect to display only static data, and have no updates appear on the tile. In Figure 1, the WeatherBug and ABC News apps show active data.

Win8

Figure 1. WeatherBug and ABC News apps display live data.

Tile Variations

Tiles come in two sizes: Square, and wide. Either size can display text, images, and/or a badge. You can (and probably should) include both square and wide tile configurations in your application package, so that users can switch between the two sizes at will. Users can mix and match square and wide tiles, and wide tiles are just the right size to “match” two square tiles side by side, with a 5-pixel gutter space, as shown in Figure 2.

Win8Fig2

Figure 2. Tiles come in two sizes.

In addition to text and images, tiles can display badges that contain specific information. For example, in Figure 3, the Mail app displays a badge with a count of the unread email messages. Badges can consist of numbers or a limited set of specific icons.

Win8Fig3

 

Figure 3. Note the badge on the Mail app.

NOTE: Creating badge notifications is beyond the scope of this particular chapter

Secondary Tiles

Besides the main tile associated with an application, an application can display one or more secondary tiles. These secondary tiles allow users to promote specific content and internal links from within the application to the Start screen. These secondary tiles can display and/or link to specific content, such as:

  •  Information about specific friends
  •  Weather reports for specific locations
  •  Stock reports for specific stocks

Not all applications support creating secondary tiles, but many do. For example, Figure 4 shows a secondary tile for the Weather app showing weather conditions at a specific location.

Win8Fig4

Figure 4. A secondary tile in the Weather app.

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

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.