Windows 10 Development - Live Tiles

Advertisements

Previous Page
Next Page  

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 application icon asset, which appears in a variety of forms throughout the Windows 10 operating system. They are the calling 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.

Basic State

  • 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.

Semi-Live state

  • Live State − This tile contains all the elements of semi-live 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 application; 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.CreateTileUpdaterForApplication().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.CreateBadgeUpdaterForApplication(); 
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.

Assets Folder

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

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

  • Select Visual Assets tab.

Visual Assets

  • You can select the images and icons for your application 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 application and then go to your start screen, you will see the tile for your application.

Execute Your Application
Advertisements