Windows 10 Development - Live Tiles

In this chapter, we will talk about the interaction with a user through tiles. It is the iconic part of Windows 10. Tiles are displayed on the Start Screen as well as on the Start Menu. In other words, it is an apppcation icon asset, which appears in a variety of forms throughout the Windows 10 operating system. They are the calpng cards for your Universal Windows Platform (UWP) app.

Tile Anatomy

There are three states of tile.

Basic State − Basic components of a Start tile consist of a back plate, an icon, and an app title.

Semi-Live state − It is the same as the basic tile with the only difference that the badge, which is a number, can display the numbers from 0-99.

Live State − This tile contains all the elements of semi-pve state tile and also shows additional content plate where you can put anything you want such as photos, text etc.

Updating Tiles

There are four ways to update the tiles.

Scheduled − You can set the template and time with ScheduledTileNotification.

Periodic − When information is retrieved from a URI and you can specify the time to pull the information after that period of time, such as 30min, 1 hr., 6 hrs. etc.

Local − Local one can be updated from your apppcation; either from the foreground or the background app.

Push − It is updated from the server by pushing the information from the server.

To create a tile, follow the given code.

var tileXml = 
   TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Text01); 
 
var tileAttributes = tileXml.GetElementsByTagName("text"); 
tileAttributes[0].AppendChild(tileXml.CreateTextNode("Hello"));
			
var tileNotification = new TileNotification(tileXml);			
TileUpdateManager.CreateTileUpdaterForApppcation().Update(tileNotification);

Update badge is pretty simple because it is just a number and you can set the value of badge as shown below.

var type = BadgeTemplateType.BadgeNumber; 
var xml = BadgeUpdateManager.GetTemplateContent(type);  

var elements = xml.GetElementsByTagName("badge"); 
var element = elements[0] as Windows.Data.Xml.Dom.XmlElement; 
element.SetAttribute("value", "7");
  
var updator = BadgeUpdateManager.CreateBadgeUpdaterForApppcation(); 
var notification = new BadgeNotification(xml); 
updator.Update(notification);

Let us create a new UWP project in Visual Studio.

You will see the different png files under the Assets folder in Solution Explorer.

Let us define a default tile and its image in the package manifest.

Double-cpck on the package.appxmanifest. This opens the manifest editor window.

Select Visual Assets tab.

You can select the images and icons for your apppcation tile with any of the specified dimensions. Under the Tile Images and Logos, default images are provided for all logos such as

Square 71x71 Logo

Square 150x150 Logo

Square 310x310 Logo

Store Logo

When you execute your apppcation and then go to your start screen, you will see the tile for your apppcation.