Tiles and badges

iOS apps can update their icons with badges, but Windows Store apps take things a step further with live tiles.

The following video compares icons in iOS apps to live tiles in Windows Store apps.

Many iOS apps use badge numbers on their app icons to display a summary or dynamic status information, because provide an easy way for the user to see information without launching the app. iOS supports up to four different numbers to be display, for example: the number of unread emails in a mail app, the number of posts in a social media app, outstanding to-do tasks. Often, icon badge numbers are updated in response to push notifications, but they can also be updated by local notifications or updated programmatically.

In Windows 8, a tile is a representation of an app on the start screen and it can be static or live.

A static tile always shows the default content defined in the app's manifest.

A live tile is updated programmatically and is used to show fresh, glanceable information. Live tiles can provide rich and interesting information to the user without the need to launch the app. Like the iOS badge, a live tile may be updated in response to a push notification, a local notification, or updated programmatically.

Windows Store app tiles can appear in different sizes. By default, only a square tile is used and required. If the app includes support for different sized tiles, users can change the format of the live tile at any time. For more information on live tiles, see Guidelines and checklist for tiles and badges.

Comparing iOS app badge numbers and Windows Store app live tiles

If you've used badge numbers to display dynamic information on your iOS app icons, you'll find that live tiles can do the same, and more too.

The following table shows various steps needed to define an app icon or an app tile and update it with a badge or other content.

Steps

iOS

Windows 8

Create an icon or tile for the app.

Add one or more icons in the app bundle. Define icon files using CFBundleIconFiles Icon files key in info.plist files.

Set applicationIconBadgeNumber property of the current UIApplication class.

Retrieve the badge template XML the BadgeUpdateManager class. Set the value of the Badge element with a value of a glyph and update it using the BadgeUpdateManager class.
See Quickstart: Sending a badge update.

Change the icon/tile image.

Not applicable.

Retrieve the Xml document that represents the tile template using the TileUpdateManager class. Set the value of the image element of the template with a new image. Create a new TileNotification and update the notification using the TileUpdateManager.
See Quickstart: Sending a tile update.

Change the notification message on the tile.

Not applicable.

Retrieve the Xml document that represents the tile template using the TileUpdateManager class. Set the value of thetext element of the template with a new message. Create a new TileNotification and update the notification using the TileUpdateManager.

Sample app

Create the app.

In this sample, we are going to create our app using the C# Blank App template.

<TextBlockHorizontalAlignment="Left"Margin="256,219,0,0"TextWrapping="Wrap"Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile."FontSize="30"VerticalAlignment="Top"Height="201"Width="851"/><ButtonContent="Update the tile"HorizontalAlignment="Left"Margin="256,425,0,0"VerticalAlignment="Top"Height="59"Width="194"FontSize="24"Click="UpdateTile_Click"/><ButtonContent="Update the badge"HorizontalAlignment="Left"Margin="523,425,0,0"VerticalAlignment="Top"Height="59"Width="245"FontSize="24"Click="UpdateBadge_Click"/>

In Visual Studio, in the MainPage.xaml.cs, add the following code to the MainPage class:

We use the TileSquarePeekImageAndText03 template for the tile. A number of different templates are available for you to choose from depending on the application and the type of status you want to show the user. (See The tile template catalog.) This template consists of a square tile with an image without any text and a four line text that peeks or slides up and down.

We retrieve the text element from the template XML and set its value using three lines as shown above. We also retrieve the image element from the tile template XML and set the src attribute to Assets\Strelitzia.png. Similarly, we set the alt attribute to Strelitzia.

We then create a new TileNotification object and update the tile using TileUpdateManager class.
We also add two lines to the MainPage constructor in the MainPage.xaml.cs file as shown below.

These two lines clear the badge and notifications during re-runs of the app.

Click Debug > Start Debugging to run the app again. Click the Update the tile button in the application.

Visit the start screen and you should see the tile update.

The first image shows the updated tile with the new image of Strelitzia with the logo and a badge number. The second image shows the tile a few seconds later, with the peek message with the logo and the badge number.