<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>
<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 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>
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<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.