This article is Day #9 in a series called 31 Days of Windows 8.  Each of the articles in this series will be published for both HTML5/JS and XAML/C#. You can find additional resources, downloads, and source code on our website.

Today, we’re covering a very important topic: Live Tiles.  As we’ve mentioned in previous articles, your tile is one of the most important parts of your application’s success, and it’s one of the most overlooked.

Your tile represents your relationship with your user.  They caringly pin it to their start screen, arrange it with similar apps, even decide if they want it to be big or small.  Your job is to make it as accommodating and responsive to their needs as possible.  We do this by passing useful updates to the tile.  Here’s a few examples from some of my favorite apps:

As I mentioned earlier, I’m a big fan of Jetpack Joyride, but their tile is excellent too.  Here’s four of the five states it rotates through, reminding me of my high score, as well as the achievements I haven’t yet completed.  These updates have dragged me back in more than once.

The weather app, on the other hand, doesn’t flip at all.  But I also don’t need anything more that what one static tile can provide when it comes to weather.  I get today’s high and low, as well as the current temperature.  The five day forecast is always one click away.

Finally, as tiles go, I think that the Photos app might be my favorite.  I haven’t figured out how often it updates the set of rotated photos, or even which libraries it uses, but it always seems to have some great old photo on the tile that makes me remember that event.  Here’s a couple of screen shots:

I’ve got thousands and thousands of old photos stored in my photo libraries (yes, they’re backed up online, thank you very much), and getting a blast from the past on a daily basis is awesome.

The Rules

When we work on our apps, I’ve discovered there are a few rules we need to be aware of:

• First, read, and then re-read the Guidelines for Live Tiles.  They’re extensive, but interesting.
• You must ALWAYS have a small tile.  Wide tiles are a nice-to-have, but you MUST accommodate a small tile.

Small tiles are not always as interesting as their big brothers, but they can still be conveyed to show interesting information.  Here’s the small tiles from the three apps I showed earlier:

Probably just due to space constraints, the Jetpack tile doesn’t update at all.  However the Weather and Photos apps give me all the same data I get on the large tiles, just in a smaller package.

As I was investigating all the different ways a tile could look, I was worried that this article was going to be SUPER lengthy after showing an example of every possible tile template.  As it turns out, however, Microsoft has provided an amazing page that shows every single tile template, all forty-five of them.  Make sure you check this page out.  It will definitely help you pick the tile template that is appropriate for you, and it provides the XML markup you’ll need to do it as well.

MUST READ: The Tile Template Catalog

So how do we make our tile dance?  Let’s get started.

Updating the Default Static Tile

By default, you’ve got an icon in your app that looks like this:

(I added a slight gray background to this one so you can see it on a white background, yours is likely transparent.)  If you only want a static tile that uses your own 150 x 150 pixel image, you can do this one of two ways:

• Replace the image that currently resides at Assets/Logo.png in your project.
• Update your Package.appxmanifest file, and change the Logo value to a different image in your project, like this:

OK, enough of the boring stuff.  Let’s write some code!

Sending a Notification to a Small Live Tile

Let’s start with sending a small tile notification first, since large tiles will be slightly more complicated.  First, as we discussed earlier, you need to decide which template you want to use from the catalog.  (I’ve even created a static PDF version of this document for you, that’s how important it will be!)

In this example, I’ve chosen TileSquareText04, which looks like this template:

And is represented by this XML (you’d know this if you’d open the catalog page):

<tile>

  <visual>

    <binding template="TileSquareText04">

      <text id="1">Text Field 1</text>

    </binding>

  </visual>

</tile>

So now we just need to create a new tile update based on that XML, and push it to the TileUpdateManager.  Here’s how it works for TileSquareText04:

//First, we grab the specific template we want to use.

XmlDocument tileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);

//Then we grab a reference to the node we want to update.

XmlNodeList textData = tileData.GetElementsByTagName("text");

//Then we set the value of that node.

textData[0].InnerText = "31 Days of Windows 8";

//Then we create a TileNotification object with that data.

TileNotification notification = new TileNotification(tileData);

//We can optionally set an expiration date on the notification.

notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);

//Finally, we push the update to the tile.

TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

As you can see in the comments of the code, it’s a pretty simple process.  You’ll notice that we use array notation to set the text value of the tile template.  This is because we can have more than one node of each type.  If we had used TileSquareBlock instead, which looks like this:

We would have have two text values to update, which would look like this:

textData[0].InnerText = "31";

textData[1].InnerText = "Days of Windows 8";

One final note about these templates is that it’s likely your SmallLogo.png file will be displayed on some of these tiles as well.  It’s a great way to extend your branding, but it’s also something to be aware of as you’re working on this.  Using the TileSquareBlock template, here’s how my tile actually ends up looking:

This is yet another reason, as I stated on Day #1, for you to use custom images for your app as you explore Windows 8 development.  Without that purple image, I would have had to guess which one was being used, or worse, not realize that it was available at all.  You will see that there are many properties that can be edited for your tile in the Package.appxmanifest file of your project.  Not only can we swap out the logo image, but also set background properties, the Small Logo file, and other text and color values.

One important piece of this section is the “Show name” dropdown.

I briefly mentioned this earlier, but I want to make sure you understand where these images and values are established.  In addition, simply by defining a Wide Logo file in this manifest, you immediately support the Large Tile size.  In fact, this is the ONLY way to support a wide tile.  Your application won’t even offer the size as an option until you’ve specified that value.  Give it a try.  Now let’s look at how we send updates to a Large Tile.

Sending a Notification to a Large Live Tile

This time, we’re going to choose a Large Tile template, but we’ll also include an image, so that you can see the syntax for that as well.

Important Lesson:  Remember that the user is in control here.  If they have decided to make your tile large or small, you don’t get to decide that.  What you can decide, however, is whether or not you want to support “notifications” in both sizes.  I recommend it, because it’s an opportunity to have your user pay attention to your app on their Start screen.

Because of this, when we send updates, we can actually create two.  One for the small tile, and one for the large one.  Then, through the magic of XML, we’ll merge them together, and send them as one notification.  Here’s what your code might look like:

//Create the Large Tile exactly the same way.

XmlDocument largeTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWidePeekImage01);

XmlNodeList largeTextData = largeTileData.GetElementsByTagName("text");

XmlNodeList imageData = largeTileData.GetElementsByTagName("image");

largeTextData[0].InnerText = "Funny cat";

largeTextData[1].InnerText = "This cat looks like it's trying to eat your face.";

((XmlElement)imageData[0]).SetAttribute("src", "ms-appx:///Assets/9-XAML-CatImage.png");

//((XmlElement)imageData[0]).SetAttribute("src", "http://jeffblankenburg.com/downloads/9-XAML-CatImage.png");

//Create a Small Tile notification also (not required, but recommended.)

XmlDocument smallTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText02);

XmlNodeList smallTileText = smallTileData.GetElementsByTagName("text");

XmlNodeList smallTileImage = smallTileData.GetElementsByTagName("image");

smallTileText[0].InnerText = "Funny cat";

smallTileText[1].InnerText = "This cat looks like it's trying to eat your face.";

((XmlElement)smallTileImage[0]).SetAttribute("src", "ms-appx:///Assets/9-XAML-CatImageSmall.png");

//Merge the two updates into one <visual> XML node

IXmlNode newNode = largeTileData.ImportNode(smallTileData.GetElementsByTagName("binding").Item(0), true);

largeTileData.GetElementsByTagName("visual").Item(0).AppendChild(newNode);

//Create the notification the same way.

TileNotification notification = new TileNotification(largeTileData);

notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);

//Push the update to the tile.

TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

I left it in there commented out, but you can see that in addition to pulling images from your local project, you also have the ability to use images that are hosted out on the web.  They take much longer to load, so keep that in mind when using them.

For example, I set my notification expiration to 30 seconds, and by the end of the 30 seconds, the notification hadn’t happened yet because the image hadn’t yet arrived to be displayed.  Your mileage may vary, but using local images, the notifications appear immediately.

Here’s a short video of this Live Tile update in action on my Start screen:

Also, I mentioned that we’re merging two different XML files, one for each template. Here’s the small template, for the TileSquarePeekImageAndText02:

<tile>

  <visual>

    <binding template="TileSquarePeekImageAndText02">

      <image id="1" src="image1" alt="alt text"/>

      <text id="1">Text Header Field 1</text>

      <text id="2">Text Field 2</text>

    </binding>

  </visual>

</tile>

And here’s the XML for the Large tile:

<tile>

  <visual>

    <binding template="TileWidePeekImage01">

      <image id="1" src="image1.png" alt="alt text"/>

      <text id="1">Text Header Field 1</text>

      <text id="2">Text Field 2</text>

    </binding>

  </visual>

</tile>

When they are merged, they look like this:

<tile>

  <visual>

    <binding template="TileWidePeekImage01">

      <image id="1" src="image1.png" alt="alt text"/>

      <text id="1">Text Header Field 1</text>

      <text id="2">Text Field 2</text>

    </binding>

    <binding template="TileSquarePeekImageAndText02">

      <image id="1" src="image1" alt="alt text"/>

      <text id="1">Text Header Field 1</text>

      <text id="2">Text Field 2</text>

    </binding>

  </visual>

</tile>

As you can see, we end up with multiple bindings in one <visual> node.  To add additional notifications, you would go through the same process, adding even more to this same node.

Clearing Your Notifications

There are also going to be times where you’ll want to delete your notifications.  Perhaps new information has become available, or something changed before your expiration dates have expired, and you need to start over.  To do this, it’s one simple line of code:

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

So, we’ve covered small and large tiles, even in combination, but what if you want to provide your user with multiple tiles?

Secondary Tiles

Secondary tiles are an excellent way to surface the information your users want directly to their Start screen.  If you’re a weather application, they can pin multiple cities for a quick reference.  If you’re the People app, you allow me to pin the people that are important to me, so that I can easily see what they’re up to.

I originally intended to write an entire section here about how to actually pin a Secondary Tile to your user’s start screen, but Microsoft has done a phenomenal job already.  Check this out:

Quickstart: Pinning a Secondary Tile

Not only do they want you through creating a Secondary Tile, but they also provide you with all of the code to prompt the user from an AppBar, determine if it has already been pinned, and even remove the tile when it’s not necessary anymore.  It’s a great tutorial, and I highly recommend it.

Summary

We’ve covered a great deal of content today related to Windows 8 Live Tile updates.  From creation to updates, you can see that it’s pretty simple to do from your app.  I can’t recommend updating your app’s tiles with relevant information as frequently as possible.  It will make your app that much more appealing to your user.

To download my entire solution of sample code for this article, click the icon below:

Tomorrow, we’re going to look at the other side of notifications: Toast messages.  Until then, happy coding, and we’ll see you tomorrow!