Creating a Live Tile

For our purposes in this article, the only two items you need to familiarize yourself with areLogo and Wide logo. You'll notice that the Wide logo property is blank by default. In order for your application to support wide tiles, you have to add a valid 310 x 150–pixel image to your project; enter the image's path in the Wide logo text area. The other options in this section are for you to define the branding of the tile, including the branding logo or name that appears on the bottom left corner of the tile.

Creating a Live Tile

Now that you know how the default tile is defined within the application, it's time to look at how your application can update the tile.

 XmlDocument tiledata= TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

            XmlNodeList textdata = tiledata.GetElementsByTagName("text");

            XmlNodeList imagedata = tiledata.GetElementsByTagName("image");

            textdata[0].InnerText = "PhotoFind";

            textdata[1].InnerText = "Find the personality using the clues?";

            ((XmlElement)imagedata[0]).SetAttribute("src", "ms-appx:///Assets/sengal.jpg");

            var notification = new TileNotification(tiledata);

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

            TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

Interaction with the tile API is handled through the TileUpdateManager class. TileUpdateManager and the rest of the tile API are located in the Windows.UI.Notifications namespace. The first step in creating a live tile for your application begins with retrieving a valid tile template.

The API provides a method for retrieving any of the supported templates through the TileUpdateManager.GetTemplateContent() method, by passing in an enumerator TileTemplateType, as shown in the following example:

var tileContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

The method will return an XML document containing XML code that represents the template. It's important to note that it isn't necessary to use the API to retrieve the XML content. The content can be generated from any source as long as its schema is correct.

After the template has been retrieved, you can modify the nodes to populate the live tile with relevant information. Our example here uses the TileSquareBlock tile, which contains two text nodes.

Then,Populate the InnerText of the two text nodes with the contents.

With the updated XML document completed, you can create a new TileNotification object by passing in the modified XML document into the constructor:

The final step is to create a TileUpdater for your application. This is accomplished by using the CreateTileUpdaterForApplication() method of the TileUpdateManager. Calling the TileUpdater's Update() method with the new TileNotification will update your application's live tile:

If you haven't already done so, you'll need to create an empty event handle for btnClear_Click before you run the application. After this has been created, the application should successfully compile and run. Before you try to create a live tile, take a moment and return to the Start screen. The application will add a tile to the Start screen the first time the app is run in the debugger. The tile should have the default look of a white box and X on a black background. Returning to your application, on the form fill in some text for Text 1 and Text 2, then click the Submit Tile button. One more trip to the Start screen, and you'll see that your application's tile has been updated with the live tile that you just created.