Windows 8 demo–Updating application tiles

I have had requests to share the Windows 8 demos that I gave at the Windows 8 Developer camp. The source code is available on Github at https://github.com/DavidBurela/Win8Demo-Tiles

Text tile

Application tiles in your application can be updated by sending a formatted XML message to the TileUpdateManager. The easiest way to achieve this is to get a base template for the tile style that you want (Text only, Image, Image and Text, etc) then modifying the Text or Image elements of the template. The code below shows how a XML template can be taken and updated with custom text. The XML document is then used to create a TileNoficitacion which is then sent to the TileUpdateManager.

/// <summary>
/// Set the application's tile to display text content.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileTextButtonClick(object sender, RoutedEventArgs e)
{
    // Tiles use a predefined set of standard templates to display their content.
    // The updates happen by sending a XML fragment to the Tile update manager.
    // To make things easier, we will get the template for a square tile with text as a base, and modify it from there
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText01);

    // Find the 'text' element in the template's XML, and insert the text "Hi :-)" into it.
    var elements = tileXml.GetElementsByTagName("text");
    elements[0].AppendChild(tileXml.CreateTextNode("Hi :-)"));

    // Create a TileNotification from our XML, and send it to the Tile update manager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Image tile from local image file

It is also possible to create the XML from scratch and send it to the TileUpdateManager. The code below updates the application tile with an image tile. It starts by instantiating a XmlDocument, creating each of the XML elements, and then chaining the elements together to form the final XML document. The path to the image is given as being a local application resource through the convention ms-appx:///Assets/DemoImage.png

/// <summary>
/// Set the application's tile to display a local image file.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileImageButtonClick(object sender, RoutedEventArgs e)
{
    // It is possible to start from an existing template and modify what is needed.
    // Alternatively you can construct the XML from scratch.
    var tileXml = new XmlDocument();
    var title = tileXml.CreateElement("title");
    var visual = tileXml.CreateElement("visual");
    visual.SetAttribute("version", "1");
    visual.SetAttribute("lang", "en-US");

    // The template is set to be a TileSquareImage. This tells the tile update manager what to expect next.
    var binding = tileXml.CreateElement("binding");
    binding.SetAttribute("template", "TileSquareImage");
    // An image element is then created under the TileSquareImage XML node. The path to the image is specified
    var image = tileXml.CreateElement("image");
    image.SetAttribute("id", "1");
    image.SetAttribute("src", @"ms-appx:///Assets/DemoImage.png");

    // All the XML elements are chained up together.
    title.AppendChild(visual);
    visual.AppendChild(binding);
    binding.AppendChild(image);
    tileXml.AppendChild(title);

    // The XML is used to create a new TileNotification which is then sent to the TileUpdateManager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Image tile from remote image

A remote image can be used by again using a template (or hand crafting the XML from scratch as in the previous example), but this time providing a URI to an image hosted on a remote web server, rather than a local application resource.

/// <summary>
/// Set the application's tile to display a remote image on the internet.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileRemoteImageButtonClick(object sender, RoutedEventArgs e)
{
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

    // Find the 'image' element in the template's XML. Change the src attribute to a remote URL
    var elements = tileXml.GetElementsByTagName("image");
    var imageElement = elements[0] as XmlElement;
    imageElement.SetAttribute("src", @"http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft.png");

    // Create a TileNotification from our XML, and send it to the Tile update manager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Again, this source code is available as a working example on Github at https://github.com/DavidBurela/Win8Demo-Tiles By David Burela