Implementing live tiles in a Windows Store App

 Jul 10, 2015

Windows Store apps use tiles to launch the app from the start screen. Tiles can be static or they can be live, receiving notifications from your app or from some external cloud service. In today's blog I will guide you through the steps to implement live tiles in a Windows Store app using HTML5 and JavaScript.

Tiles are available in 4 different sizes: small (70×70), medium (150×150), wide (310×150) and large (310×310). The first step is to define the static images for the tile sizes supported by the app. You double-click the package.appxmanifest file in Solution Explorer to open the app manifest with the designer. Then you go to the Visual Assets tab and enter the paths for each one of the static images. The images should be in the Images folder in Solution Explorer. These images will be used as default for your tiles until the app starts receiving tile notifications as we will see in detail in the next steps.

Every tile has a layout defined by an XML Template. You have to choose from a rather comprehensible collection of templates. Those templates combine one or more text and image tags in a variety of layouts. They are available in the enumeration Windows.UI.Notifications.TileTemplateType, as you can see in the following code snippet

var notifications = Windows.UI.Notifications; var template1 = notifications.TitleTemplateType.tileWide310x150ImageAndText01; var tileXml = notifications.TileUpdateManager.getTemplateContent(template1);

At this point tileXml has the Xml code defining a wide tile using a particular template that has one text element and one image element. We need to assign a string to the text element content and a value to the src attribute of the image as we see in the next snippet:

var tileTextElements = tileXml.getElementsByTagName(“text”); tileTextElements[0].appendChild(tileXml.createTextNode(“Live tiles are awesome!”)); var tileImageElements = tileXml.getElementsByTagName(“image”); tileImageElements[0].setAttribute(“src”, “ms-appx:///images/image01.png”);

The template tileWide310x150ImageAndText01 has only one text and one image, but depending on the chosen template we could have more than one element in the arrays tileTextElements and tileImageElements.

Now we need to create the notification and update the live tile as we see next:

var tileNotification = new notifications.TileNotification(tileXml); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Once this code is executed the wide tile in the start screen is going to be different than the initial static image we assigned in the app manifest. For example, let's say the app is a game and the user has just finished the game and you want the tile to show what was the last score or maybe the highest score so far, etc. The new tile will remain until you update it again, unless you assign an expiration time to the notification as we show next:

var currentTime = new Date(); tileNotification.expirationTime = new Date(currentTime.getTime() + 5 * 60 * 1000); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

The expirationTime is in milliseconds. In the code above the live tile will revert to the static image after 5 minutes. Another way to remove the live tile independently from having or not an expiration time is by executing code like the following-

notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

There is much more to learn about live tiles. We recommend the course 20481 : Essentials of Developing Windows Store apps with HTML5 and JavaScript.

How do your Excel skills stack up?   

Test Now  

About the Author:

Newton Godoy  

With over 17 years of in-class training experience and over 16 years of industry experience, Newton offers students a wealth of real-world technical knowledge and expertise in the areas of .NET application development, SQL Server and SharePoint Server. After spending several years lecturing as a professor, Newton found his true calling and began his career as a MCT. He worked as a technical trainer for some of Brazil’s and Australia’s largest corporate training organisations before finally finding a home with New Horizons where he is now one of our top trainers. Newton brings a thorough mentoring capability to the classroom where he can advise on technical issues and challenges often beyond the scope of the course curriculum. His combination of technical knowledge and instructor experience make him one of the most respected instructors within the IT training industry.

Read full bio
top