In Windows 8, live tiles are an extension of your Metro app. It’s not just an icon sitting on the Start menu which the user can tap to launch your app. It’s also a live window into your app. When it’s running, your app can update its main tile with new content using tile notifications. It can also allow the user to pin or unpin secondary tiles that point to specific subareas of your app, such as a specific product. When your app is not running, the tiles associated with it (both main and secondary) may be updated by a scheduled notification or by a push notification sent by an external service in the cloud. In this post, we look at the basics of tiles, how to configure your app’s main tile and update it using local tile notifications while the app is running.
Your Metro app has a default (main) tile that you initially configure in the manifest. Each tile may be displayed in the start menu in a square format or a wide format, based on the user’s choice. You may or may not want your app to support the wide format, and it’s recommended that you only do if you need the extra space to displaying the info the tile needs to show. In other words, only use a wide tile if there’s enough stuff to put in it.
So when you configure your initial app tile in the manifest, you can specify a small tile image (150 x 150 pixels), a wide image (150 x 310), an app name to display on the tile, and in which tile sizes you want the name to appear. You can also specify a background color for the tile – that will also be used for the splash screen and system UI elements such as dialog buttons.
Once you deploy the app, if you go to the Start menu you’ll find the app’s main tile pinned using the images and content your specified. You can switch back and forth between the square version and the wide version – assuming you specified a wide image.
Now you have your default tile configured and deployed. Suppose your app need to update its main tile with some text and images relating to what the app does. This is how you do it :
- Choose one of the tile layout templates available in the platform
- Get the associated xml template
- Insert your app-specific content (text and images) into the xml
- Create a tile notification based on the xml template with content
- Create a tile updater for your main tile
- Pass the tile notification you created to the Update method of the updater
Choose the tile layout and get the xml template
The available layouts are listed here.
Suppose you picked TileWideSmallImageAndText04, which looks like this :
It has one small square image and 2 text strings, one for title and the other wrapped over 3 lines. You retrieve the xml for that layout :
1: var templateType = TileTemplateType.TileWideSmallImageAndText04;
2: var xml = TileUpdateManager.GetTemplateContent(templateType);
Insert your content into the XML
Now, retrieve both the text nodes and images nodes, and insert the content you want to show in the tile. This template has 2 text strings and 1 image, so I’m inserting each of those using the XML DOM API :
1: var textNodes = xml.GetElementsByTagName("text");
2: textNodes[0].AppendChild(xml.CreateTextNode("You have a new message"));
3: textNodes[1].AppendChild(xml.CreateTextNode("This text should wrap on a max of a maximum of 3 lines bla bla bla"));
4:
5: var imageNodes = xml.GetElementsByTagName("image");
6: var elt = (XmlElement)imageNodes[0];
7: elt.SetAttribute("src", "Images/someImage.jpg");
Create a tile notification
Just pass the xml to a new notification instance :
1: var tile = new TileNotification(xml);
Create a tile updater and update the tile
1: var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
2: tileUpdater.Update(tile);
That will update the wide version of the app’s tile. Now suppose you also want to update the square version at the same time. In that case, you need to retrieve a square tile template, insert your content in the xml just like you’ve done for the wide version, and extract the ‘binding’ node of the xml, and append that node to the ‘visual’ node of the wide tile template xml you worked with above :
1: templateType = TileTemplateType.TileSquarePeekImageAndText02; //flips between square image and 2 pieces of text (title + smaller)
2: var squareXml = TileUpdateManager.GetTemplateContent(templateType);
3:
4: textNodes = squareXml.GetElementsByTagName("text");
5: textNodes[0].AppendChild(squareXml.CreateTextNode("Some title"));
6: textNodes[1].AppendChild(squareXml.CreateTextNode("Some content"));
7:
8: imageNodes = squareXml.GetElementsByTagName("image");
9: ((XmlElement)imageNodes[0]).SetAttribute("src", "http://s.pluralsight.com/mn/img/au/lg/yacine-khammal-v2.jpg");
10:
11: //Retrieve 'binding' element of square tile and append it to top level 'visual' element of parent wide tile
12: var bindingNode = xml.ImportNode(squareXml.GetElementsByTagName("binding")[0], true);
13: xml.GetElementsByTagName("visual")[0].AppendChild(bindingNode);
Of course the above code must execute before the call to the TileNotification constructor.
So what kind of scenario is this useful for ? Suppose you have a photo app for example, you may want the tile to show the last photo the user looked at in the app. So in the part of your app where the user opens a photo, you also execute code to send a tile notification with the photo as image and whatever title or description is associated with the photo as text. So when the user is on the start screen they will see that last viewed photo and title in the app tile.
In this post, I briefly discussed the application tile and how we can update it through local tile notifications. There is much more going on with tiles in Windows 8, including badge notifications, secondary tile, scheduled and push notifications. But that will be for another post.
Happy tiling
