Click here to Skip to main content
Click here to Skip to main content
Go to top

Creating a Great Tile Experience (Part 1)

, 4 Sep 2012
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.
This is an old version of the currently published article.

Editorial Note

This article is a paid placement in the Solution Center for our sponsors at The Code Project. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

This blog was originally posted here: Creating a great tile experience (part 1)

Also, check out our Windows 8 Zone.

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.

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.

  

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 <?xml version="1.0" encoding="utf-8" ?> <tile> <visual> <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> <binding template="TileSquareText03"> <text id="1">Near You</text> <text id="2">Nom Nom</text> <text id="3">Sushi Truck</text> </binding> </visual> </tile>

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.

  

Tile XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
  <visual>
    <binding template="TileWideImageAndText02">
      <image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
      <text id="1">Nom Nom Barbecue Truck</text>
      <text id="1">Washer Ave and 3rd until 3</text>
    </binding>
    <binding template="TileSquarePeekImageAndText04">
      <image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
      <text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
    </binding>
  </visual>
</tile>

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.

Additional Resources

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kevin Michael Woley

United States United States
No Biography provided

Comments and Discussions


Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 4 Sep 2012
Article Copyright 2012 by Kevin Michael Woley
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid