Tiles and badges

Article
10/14/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

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 live tiles

For a Windows Store app, the default tile is defined in the app's manifest file (Package.appxmanifest). A developer can choose to show the app logo, the app name, or neither. See Quickstart: Creating a default tile using the Microsoft Visual Studio manifest editor. After the app is installed, tile content can be updated at run-time using notifications. See Quickstart: Sending a tile update.

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 the icon files in the Application UI pane in the application manifest file in Visual Studio. See Quickstart: Creating a default tile using the Microsoft Visual Studio manifest editor.
Define the application name.	Set the value of the CFBundleDisplayName (Bundle display name) key in the info.plist file.	Set the app's short name in the Application UI pane in the application manifest file in Visual Studio. See Quickstart: Creating a default tile using the Microsoft Visual Studio manifest editor.
Update the badge on the app icon/tile.	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.

Start Microsoft Visual Studio.
On the File menu, click New Project.
If Windows Store is not already selected, expand Installed > Templates > Visual C#, and click Windows Store.
If Blank App (XAML) is not already selected, click it.
In the Name and Location boxes, type a name for the app (such as AppTile) and a location, or leave the defaults as-is.
Click OK.

Define a default tile for the app.

Prepare two images: one that is 150 by 150 pixels (logo.png), and one that is 30 by 30 pixels (logo_small.png).
In Visual Studio's Solution Explorer window, drag both images into the Assets directory.
In the Solution Explorer window, double-click the Package.appmanifest file to open it.
In the Application UI tab, enter Assets\logo.png in the Logo text box and Assets\logo_small.png in the Small logo text box.
Enter, for example, Garden Flowers in the Short name text box.
Click Debug > Start Debugging to run the app.

Update the badge on the tile.

Click Debug > Stop Debugging to stop the application..

In Visual Studio, in the MainPage.xaml file, between the opening tag <GridViewGrid.Row="0" Grid.Column="0" …> and the closing tag </GridView>, add this XAML code:

            <TextBlock HorizontalAlignment="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" />
            <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
            <Button Content="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:

       private void UpdateBadge_Click(object sender, RoutedEventArgs e)
        {
            XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
            //Assign a value to badge
            XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
            badgeElement.SetAttribute("value", "1");
            // Create the badge notification and send it to the badge.
            BadgeNotification badge = new BadgeNotification(badgeXml);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
        }
private void UpdateTile_Click(object sender, RoutedEventArgs e)
        {
        }

Be sure to add the following to the top of the file:

using Windows.Data.Xml.Dom;
using Windows.UI.Notifications;

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

Visit the start screen and you should see a badge number (1) updated on the tile:

4. Change the tile image and the notification message.

Click Debug > Stop Debugging to stop the application.
Drag another 150 by 150 pixel image (called Strelitzia.png) into the Assets folder in Solution Explorer.
In Visual Studio, in the MainPage.xaml.cs file, replace the UpdateTile_Click method with this code:
```
        private void UpdateLiveTile()
        {
            //Template for tile and retrieve its XML contents
            XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
            XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
            tileTextAttributes[0].InnerText = "Strelitzia";
            tileTextAttributes[1].InnerText = "growing";
            tileTextAttributes[2].InnerText = "in my garden";
            //Add an image for notification
            XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
            ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
            ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
            //Create the notification based on the XML content 
            TileNotification tileNotification = new TileNotification(tileXml);
            // Send the notification to the app tile
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
        }
```
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.
```
        public MainPage()
        {
            this.InitializeComponent();
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
            TileUpdateManager.CreateTileUpdaterForApplication().Clear();
        }
```
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.