Windows Phone 8.1 for Developers–Live Tiles

Article
04/10/2014

This blog post is part of a series about how Windows Phone 8.1 affects developers. This blog post talks how to use Live tiles and is written by Robert Hedgate (@roberthedgate) at Jayway and was originally posted here

Intro

In this blog post I will do a quick overview of what is new with tiles in Windows Phone 8.1. This is the first impression of the functions so I do recommend you to take a look at MSDN if you want a deeper understanding of how it works.

Windows Phone 8

A quick glance on how it used to work. There are three different tiles types available:

Iconic

This shows a fix tile but with changeable text and numbers. Can also contain an icon of the app.

Flip

This tile is of two parts, one front and one back. The tile flips between these two. The flip tile can contain both images and texts.

Cyclic

Cyclic tile contains up to 9 images which are changed in a cycle. There can also be text etc in the tile but the text are the same of all images since the image are just background images.

All of these tiles has many settings such as Title, Count etc and the values are the same across tile sizes. These three types basically fill the need for the tiles but it forces you into these formats and no other. What if for example you want to have three images in a flip instead of two? It can be done with app created images and then put in a Cyclic tile but it is a lot of work for a task that should be simple. Another limitation is that you set the tile type in the app manifest and it cannot be changed other than an app update via the store.

Windows Phone 8.1

In Windows Phone 8.1 the approach is a bit different. Instead of having three fixed tile types there are now 75 different tiles and all tiles is of a specific size. If you want to create a new tile for all three sizes you will have to create one of each size. The tiles are the same as in Windows 8.1, however large tile (310x310) is not available in Windows Phone 8.1 and if you set the large tile in Windows Phone 8.1 it will be ignored. If you share code between Windows Phone 8.1 and Windows 8.1 you’ll want to set all tile sizes that’s why large is in the phone as well. Any type of tile can be set to your pinned tile so there is no limitation of just sticking to one type.

Another new thing is that all tiles are represented by an XML-tree. In Windows Phone 8 the three tiles were classes which were easy to set values on. In Windows Phone 8.1 you can get the XML template by calling GetTemplateContent with the tile type as parameter but you can also create the XML from scratch if you want. Why the switch to XML? This is because it is easier to push tiles/toast from a web service using XML and instead of having two systems there are only one. Fortunately the XML structure is easy and if you use the templates it helps you to find errors, the errors are found during runtime instead of compile time but nonetheless.

Example of tile XML:

 <tile>
    <visual version="2">
        <binding template="TileSquare150x150PeekImageAndText01" fallback="TileSquarePeekImageAndText01">
            <image id="1" src="ms-appx:///Assets/image.JPG"/>
            <text id="1">Row 0</text>
            <text id="2">Row 1</text>
            <text id="3">Row 2</text>
            <text id="4">Row 3</text>
        </binding>
    </visual>
</tile>

There are some tiles which have two sides of it, front and back. However this is not the same as the old flip tile since the front is only an image with no text and back is just text with no image.

How to create a simple tile

This is the code to make a simple tile update:

 var tileImage = tileXml.GetElementsByTagName("image")[0] as XmlElement;
tileImage.SetAttribute("src", "ms-appx:///Assets/bild.JPG");

var tileText = tileXml.GetElementsByTagName("text");
(tileText[0] as XmlElement).InnerText = "Row 0";
(tileText[1] as XmlElement).InnerText = "Row 1";
(tileText[2] as XmlElement).InnerText = "Row 2";
(tileText[3] as XmlElement).InnerText = "Row 3";

var tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Badge

There is no tile template for small tiles. Before the count value was shown on the small tile which is nice if one for example want to show how many unread articles a blog app has. In Windows Phone 8.1 a new concept has been made to show the count parameter, namely the badge. The badge are set on the tile in similar way as the tile update but uses the BadgeUpdateManager instead. There is also an added feature to the badge in which it can not only show numbers but also glyphs. There are two glyphs available, alert and attention. There are more glyphs, twelve to be exact, in Windows 8.1 but only the two above are currently available in Windows Phone 8.1.

Example of how to add a number to a tile:

 var badgeXML = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
var badge = badgeXML.SelectSingleNode("/badge") as XmlElement;
badge.SetAttribute("value", "2");
var badgeNotification = new BadgeNotification(badgeXML);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeNotification);

Example of how to add a glyph to a tile:

 var badgeXML = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
var badge = badgeXML.SelectSingleNode("/badge") as XmlElement;
badge.SetAttribute("value", "alert");
var badgeNotification = new BadgeNotification(badgeXML);            
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeNotification);

How to create Flip or Cyclic tile in Windows Phone 8.1

Since all tiles more or less iconic tile, but with possible images, how do you create flip or cyclic tiles? Here is a great improvement, you just call EnableNotificationQueue with true and add tiles in a series. With this approach you can combine any of the 75 tiles and make your own flip or cyclic tile. On the downside only 5 tiles can be queued compared to 9 before with the Cyclic tile.

Queuing any tiles makes it much more flexible and can be more fine-tuned to your need without making special images in you app and putting them on your tiles. But if you have that need this possibility still exist. The queue works as expected that first in is first out when adding a new tile. It is possible to replace a specific tile in the queue if it has been added with a Tag. If a new tile is added with the same Tag the old one is replaced.

Here is an example of how to make a notification queue:

 TileUpdateManager.CreateTileUpdaterForApplication().Clear();
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Image);

var tileImage = tileXml.GetElementsByTagName("image")[0] as XmlElement;
tileImage.SetAttribute("src", "ms-appx:///Assets/image1.jpg");
var tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

tileImage.SetAttribute("src", "ms-appx:///Assets/image2.jpg");
tileNotification = new TileNotification(tileXml);
tileNotification.Tag = "myTag";
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Clear is called to remove all old tiles. Be aware that clear also removes tiles of other sizes.

Secondary tile

In Windows Phone 8.1 secondary tiles works just like the original tile with the difference that it has an id. The id is set then the secondary tile is created:

 var secondaryTile = new SecondaryTile(
                    "secondaryTileId",
                    "Text shown on tile",
                    "secondTileArguments",
                    new Uri("ms-appx:///Assets/image.jpg", UriKind.Absolute),
                    TileSize.Square150x150);

bool isPinned = await secondaryTile.RequestCreateAsync();

To update this tile call the function CreateTileUpdaterForSecondaryTile with the tile id as a parameter instead of CreateTileUpdaterForApplication. The same difference is there for badges, there are a CreateBadgeUpdaterForSecondaryTile function. Anything else is the same, any tile can be set as a secondary tile and any badge can be used. And when a secondary tile is clicked the activation argument string can be retrieved to decide what to do, much simpler and smarter than the old way of having a navigation Uri as an argument.

Summary

Finally Windows Phone gets the more user friendly flexible tiles that has been available on Windows 8. Now you have no excuse but to take full advantage of the tiles and make your app the one that people pins to the start screen with the wide tile size. I have in the blog post only shown how to update tiles locally. There are of course the other alternatives such as Scheduled, Periodic and Push. Here is a link that shows how that is done, https://msdn.microsoft.com/en-us/library/Windows/apps/hh779722.aspx.

Comments

Anonymous
June 19, 2014
Hi Brynte, Thanks for this great post. I am trying this on a Windows Silverlight Phone 8.1 but i dont get the tile update. ¿It is compatible with Windows Silverlight Phone 8.1 ? Thanks in advance
Anonymous
August 18, 2014
"There is no tile template for small tiles" There is TileSquare71x71Image for small tiles msdn.microsoft.com/.../hh761491.aspx
Anonymous
October 02, 2014
@ciani : I have the following code in a Windows Phone 8.1 Store app (not Silverlight) in the App.xaml.cs and the tile content won't show up when I pin the app to the start screen (and it probably won't update either) Any idea what I'm missing? Thanks ! NB : the Azure website urls below have been modified for privacy reasons. The real ones do send back a correct xml structure. public App() { this.InitializeComponent(); this.Suspending += this.OnSuspending; //TileUpdateManager.CreateTileUpdaterForApplication().Clear(); TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); var urisToPoll = new List<Uri>(); urisToPoll.Add(new Uri("example.azurewebsites.net/.../0")); urisToPoll.Add(new Uri("example.azurewebsites.net/.../1")); TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdateBatch(urisToPoll, PeriodicUpdateRecurrence.HalfHour); }
Anonymous
January 23, 2015
The CycleTile template has a 'Ken Burns' effect that pans slowly and automatically up and down each picture before moving onto the next one. Is there anyway to replicate this by using one of the new 75 tile templates for Windows Phone 8.1? I've chained together five pictures using simple templates like TileSquareImage and TileWideImage however there's no 'Ken Burns' effect anymore. It's a flip transition between pictures now.
Anonymous
April 20, 2015
Hi I am trying to create cyclic tile template using this code TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Image); var tileImage = tileXml.GetElementsByTagName(“image”)[0] as XmlElement; tileImage.SetAttribute(“src”, “ms-appx:///Assets/image1.jpg”); var tileNotification = new TileNotification(tileXml); TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification); tileImage.SetAttribute(“src”, “ms-appx:///Assets/image2.jpg”); tileNotification = new TileNotification(tileXml); tileNotification.Tag = “myTag”; TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification); But the tiles are not cyclic they are only flipping. How to make the above code to act as cyclic tile??

Share via