In this post we will discuss Live Tiles in XAML based Windows 8 Metro Application. We will see
- Updating Live Tiles
- Creating queue of information to update Live Tiles
What is Live Tile?
Tiles are the entry point for the application. You will find TILES for all applications installed on your machine at the start screen. These Tiles are termed as Live if we update the content of the Tiles on basis of some business rules. So when user sees the Tiles, She gets some vital information from the application. Below are the Tiles of some of the installed applications on my system.
If you see weather application there is weather information about Seattle on the tiles itself. So to know weather information of Seattle, you do not need to open the application. You can get information by just seeing the Tile of the weather application. This information is live and will change as the weather of Seattle will be changed.
You can update information on Tiles in Four ways
- From Push Notification Service
- Locally
- Scheduled
- Periodic
In this post we are focusing on updating Tiles locally. To start with add below namespaces
You can update Tile using below line of code.
You can see that Update method takes TileNotification as input parameter. You need to pass content to update on Tile as XML to TileNotification. Tile XML can be created using below code.
There are many templates type available for TileTemplate. We are using TileWideText01 type (see 1st highlighted text).
There are 44 TileTemplateType available. You need to choose one as your requirement. In following post I will go in details of each TileTemplateType.
Each Tile Template Type is a XML document. We can update a particular element by selecting element with the tag name. We are doing this in second line of code. In last line we are setting the information we want to update on the Tile. You can set is dynamically according to your business requirement.
So putting all pieces of codes together on a click event of a Button, a Tile can be updated as following.
private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{
XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Hey This my Text Updated on Tile"));
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
}
Before you run and see that whether Tiles has been updated or not. You need to set Wide Logo of the application. Text on live Tiles appears only when you have set the Wide Logo. Wide Logo need to be 310×150 Pixels. To set Wide Logo from solution explorer click on Package.appmanifest file and the set the Wide Logo.
I have set green rectangle of size 310×150 as Wide Logo. Now go ahead and run the application. After clicking on the button close the application and go to start screen. On start screen you can see that Tile text has been updated with the text we provided.
You can update Tile multiple times. For that you need to enable notification queue and you can have five information in the queue to be updated on the Tile. If there are more than five information available then recent five would be updated.
On click event of a button you can update Tiles with three different information as following.
private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{
TileUpdateManager.
CreateTileUpdaterForApplication().
EnableNotificationQueue(true);
XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Updating Tile1"));
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
XmlDocument tileXml1 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement1 = (XmlElement)tileXml1.
GetElementsByTagName("text")[0];
textElement1.AppendChild(
tileXml1.CreateTextNode
("Updating Tile2"));
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml1));
XmlDocument tileXml2 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement2 = (XmlElement)tileXml2.
GetElementsByTagName("text")[0];
textElement2.AppendChild(
tileXml2.CreateTextNode
("Updating Tile3"));
TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml2));
}
You can have three information in queue getting updated on Tiles. In this way you can work with Live Tiles in XAML based window8 metro application. I hope this post is useful. Thanks for reading.
