Creating a great tile experience (part 1)

A live tile is one of the best ways to entice users back to your app. This post shows you how to update your app’s live tile using polling and local APIs so that you can show off what is great about your app directly on the Windows 8 Start screen. Your tile can put front and center the best of what’s going on inside of your app. The app tile is a core part of your app, and quite possibly its most frequently seen part – take advantage of the tile to get users back into your app!

In this post I walk through an example app to illustrate how to:

  1. Design for tile updates
  2. Choose templates to match the tile content
  3. Use polling notifications from the cloud to update the tile while the app is not running
  4. Update the tile while the app is running by using the NotificationsExtensions library included in the SDK (Windows 8 SDK App tiles and badges sample).

Introducing the Contoso Food Trucks app

Let’s walk through an example app: Contoso Food Trucks. This app allows users to get info about traveling food trucks. This is the same app that we showcased in the website to Metro style app case study. In this blog post, I show how to add live tiles to it.

Food Trucks app is one of many tiles shown on Start screen

What is your app best at?

Keeping in mind what your app is best at helps you figure out what content the tile should contain and how frequently it should update.

The Contoso Food Trucks app is best at helping users find and track their favorite food trucks, and to discover new ones near them. Because of that, I have these goals for our Food Trucks tile:

  • Feature the food trucks near a location
  • Track the user’s favorite food trucks

Don’t use your app tile as an advertisement surface. Using the tile to show ads is not allowed in most cases per the terms of the Windows app store.

Default tile and tile size

Each app has a default tile. This is the tile that the user sees when they first install your app. The default tile logo image represents your app logo or other branding so users can clearly identify the app.

You define the default tile logo image in the app manifest and Windows displays it until the tile is updated by receiving its first notification. The tile can revert back to the default image when it has no notifications to display; for example, when the current tile notification expires or the user turns off live tile updates for the app.

The default tile images also define the sizes that the tile supports. Tiles are available in two sizes: square or wide. All apps must support a square tile, but an app can also support a wide tile. If an app doesn’t provide a wide logo image for the default tile, the app tile cannot be resized to a wide tile, which means that it cannot receive a wide tile notification. If the app includes a wide logo image, Windows shows the tile in its wide format by default.

For our Contoso Food Trucks app I chose to support wide tiles because I update the tile at least once a day, and the content the app provides needs the extra space. These are the images I use for default tile logos:

A rectangular tile titled Contoso Food Trucks and a smaller square tile titled Food Trucks, with a large logo of a truck

Both square and wide tiles can receive notifications. When sending notifications, I always include both a square version and a wide version. This way, if a user resizes the tile to a smaller size, they still see updated data.

More info on how to create a default image for your app is in this Quickstart: Creating a default tile using the Microsoft Visual Studio 11 Manifest Editor. You can find more about tile size concepts in the tile and notification overview.

Designing tile updates

Feature the food trucks nearby

One of the best things about our app is that it helps users decide which food truck to visit. So, we need to know which food trucks are nearby. To figure this out, our app lets users set their default lunch location. When the user sets this location, we show the user which food trucks are by that location now. For this tile update, I chose a template without an image.

Because tiles are updated by fitting the app content into system-defined templates, our first task is to choose a template that works for our content. After looking through the catalog of templates in the Dev Center (see Choosing a tile template), I picked the TileWideText01 template for the wide tile. For the square tile, I picked the TileSquareText03 template. I picked these two text-only templates because I am only updating text strings on the tile.

I used the Windows 8 SDK App tiles and badges sample to play with different template options before making my final decision. Using the sample lets me easily swap in different text strings and images until I settle on the final tile design. For example, by testing the templates in the sample, I determined that I had to use the food truck’s short name in the square template to get the text to fit correctly.

Wide rectangular tile says: Food Trucks Near You / Nom Nom Barbecue Truck / Sushi Truck / Macaroni Makin' Wagon    Square tile says: Near You / Nom Nom / Sushi Truck

Tile updates are created by sending a notification. A notification is simply a snippet of XML that fills out the tile schema. You create the XML in code by using the TileUpdateManager.getTemplateContent() function, or using the NotificationsExtension library which I will talk about in the second part of this post. The notification indicates which tile template is used when rendering the notification, and the text and images to be displayed on the tile according to the template’s layout.

To create the tile updates shown earlier for our food truck app, I used this tile XML:

Tile XML

<?xml version="1.0" encoding="utf-8" ?>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>

There are two <binding> elements in this XML – one each for the wide and square tile. Because our app supports wide tiles, I always supply the wide and square tile template bindings in every tile notification. This lets the tile always show the notification update content no matter what size the user sets the tile to. The square tile shows only two truck names because the third doesn’t fit on the smaller square template.

Favorite food trucks

In our app, I want to let users know where their favorite food trucks are. On the tile, I want to let users know the same thing. In my case, the info fits on a couple of short lines of text. I also have images that represent each food truck, which will make our tile look more interesting.

Because tiles are updated by fitting the app content into system-defined templates, our first task is to pick the right template. After looking through the catalog of templates in the Dev Center (Choosing a tile template), I picked the TileWideImageAndText02 tile template for the wide tile that supports an image and two short text strings. For the square tile, I picked the TileSquarePeekImageAndText04 template to let the tile show both the image and the text. The peek templates allow me to supply more content than the normal tile area permits. Windows animates peek templates to show both the image and the text I put in the template within the square tile, so the top and bottom frames of the square tile alternate on the tile. The content of a peek tile scrolls up and down within the tile space to display the full content provided.

image of meat on a grill, truck logo, and update text: Nom Nom Barbecue Truck Washer Ave and 3rd until 3    Image of meat on a grill, truck logo, and update text: Nom Nom @ Washer Ave and 3rd until 3

Tile XML

<?xml version="1.0" encoding="utf-8" ?>
<binding template="TileWideImageAndText02">
<image id="1" src=""/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=""/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>

As before, I determined what the tile will look for by using a notification defined as an XML payload. The difference between my first tile and this one is that I am using images in this notification. The images in notifications are not included in the XML payload – they are referenced from the payload to other locations. The images can be either on a web service, as shown here, or on the local machine. After Windows receives the notification, it downloads the images from the web service at the time it’s shown to the user. More info on how to include images to a tile is in How to add images to a tile template in the Dev Center.

There are limitations on the content size of the images in KB and pixel sizes. Tile notifications won’t be displayed if the images are too big, so use images that meet these limitations. Also note that tiles support only JPG and PNG images. For more details about including images in your tile see Tile image sizes in the Dev Center.

More to come

Now that we know what we want the tiles to look like, the next step is to figure out when to update them. In part 2 of this post, we walk through how to add polling and local tile updates to the Contoso Food Trucks app. I show you how to start polling for tile updates from your app, provide example ASP.NET and PHP that can be used to build a web service for polling, and talk about how to add a secondary tile to the app and update it using the NotificationsExtension library. Until then, I hope this post has helped you to start thinking about how you can make your app shine with a live tile!

-- Kevin Michael Woley, Program Manager, Windows

With special thanks to Tyler Donahue and Nazia Zaman who helped in crafting this blog post.

Comments (9)
  1. Hi Kev, nice Post.

    I have a question? How do you manage to set the TileSquarePeekImageAndText04 tile for your app? I can't do that 🙁

  2. The second part of this blog post (…/creating-a-great-tile-experience-part-2.aspx) walks through how to send notifications using the NotificationsExtension library which uses this template. For the TileSquarePeekImageAndText04 template (…/Hh761491.aspx), you need to make sure you provide a valid image and test strings in the XML. Since this template is for the square tile, you have to resize your tile manually to the smaller size if your application has a wide tile by default. You can do that by selecting the tile, and selecting “Smaller” from the app bar menu. Note that it is a best practice to include both a wide and small template in every tile notification so that your content shows up no matter the size of the tile.

    If your tile is not updating correctly, the Troubleshooting steps in the Guidelines and checklist for tiles (…/hh465403.aspx) is a great place to start debugging what may be keeping your tile from updating. Also, the App tiles and badges sample (…/App-tiles-and-badges-sample-5fc49148) gives you the chance to try out each of the templates if you’d like to get a hold of working code. Let me know if you need additional help!

  3. Now I get it!! I was sending the correct message to my client, but I thought that the tile was going to change its size. but actually what happens is that the tile is shown in parts. Thanks for the help!

  4. Zerone says:

    I have included the NotificationsExtensions library into my project but got this issue when I tested my app in App Certification Kit. How to avoid this?

    App certification kit result:


    The App should not install any debug binaries.

    Error: Following errors were encountered while running the Debug Binary Check test. ◦The binary NotificationsExtensions.winmd is built in debug mode.

    Impact if not fixed: Windows Store policies do not allow submission of debug binaries. Please ensure that all submitted binaries are configured as release to avoid rejecting your submission.

    How to fix: Binaries compiled as debug are known to fail this validation. Please always ensure your binary is compiled in release configuration and not debug configuration.

  5. Nathan says:


    In Visual Studio, make sure that you mark the NotificationsExtensions library to build a "Release" binary instead of a "Debug" binary.  To do so:

    – Right click the NotificationsExtensions project in the Solution Explorer and select "Properties"

    – Select the "Build" tab

    – Choose "Release" from the "Configuration" drop down list

    – Rebuild your project

  6. FMC says:

    what nonsense.  you're viewing the world totally through the eyes of a kid with a smart phone.  we develop software for a vertical market and we don't need our application to be noticed any more than you'd expect Microsoft Office to need to be noticed.  our customers have paid for our application and use it everyday.  I don't need tools to pound a round peg through a square hole.  I need an easy way for users to get a desktop with round holes like they've always had.

  7. ol says:

    @fmc Whilst your tone is troll-esque, you do have a point.

    Imagine that I am a kid^t^t^tuser with a smart phone and I've installed lots of apps.  I now get screenfuls of these tiles animating and trying to attract my attention…

    As a user, I think I'd want more control over the size and spacing of the tiles.  How many can you fit onto a single screen?

  8. @SK says:


    I have a Wide tile and the image is from a webservice but unlike the normal url (…/nomnombbq-square.png)which includes the image name and extension, this returns the image http://servername:90//Photo/Photo.ashx?alias=xxxx  this returns the image data. When i try to use this the tile does not show the image. Please let me know how we can manage this scenario.

    Another problem i have stuck is when I send the tile update once the app is launched. The tile does not show the update until I manually set the tile to show small tile and back again to Wide tile from app bar.Please assist me in this regard.

    Thanks & Regards,


  9. s.mcknight says:

    Interesting and informative….thanks.

Comments are closed.

Skip to main content