One of the principles of the Windows Store style apps is to invest in a great tile. As the entry point to our applications and the main point of interaction with the Windows 8 UI, it is obviously extremely important.
A tile is the main interface of our application in the Windows 8 UI, which can provide a much more engaging experience than a traditional icon, as it is much more personal. We can update it while our app is not running, thereby keeping it alive.
We will dedicate this recipe to improving our application's main tile.
We will implement this recipe on the application we have been developing, but we could apply what we are going to do to any Windows Store app.
Here we are going to see how to add notification capabilities to our application tile.
App.xaml.cs
and add the following namespaces:using Windows.UI.Notifications; using Windows.Data.Xml.Dom;
CreateTileNotification
using the following code:private void CreateTileNotification() { //Wide Tile XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03); XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text"); tileTextAttributes[0].AppendChild(tileXml.CreateTextNode("A group was added or updated...")); //Square Tile XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04); XmlNodeList SquareTileTextAttributes = squareTileXml.GetElementsByTagName("text"); SquareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("A group was added or updated...")); //We add the square tile to the wide tile as a sibling of the wide tile IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true); tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node); //We create the notification with the tiles and send it to the app tile TileNotification tileNotification = new TileNotification(tileXml); tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10); TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification); }
OnLaunched
method:CreateTileNotification();
Package.appxmanifest
and under the Tile: section, put #222222
as the Background color property.OnLaunched
method, just before the CreateTileNotification();
call, we will add the following lines of code to enable notification cycling://We enable the notification cycling TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
CreateTileNotification
method to accept two string parameters, one for the message and another for the tag of the notification, which will serve to uniquely identify a notification in our app. Add the following code:private void CreateTileNotification(String msg, String Tag) { //Wide Tile XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03); XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text"); tileTextAttributes[0].AppendChild(tileXml.CreateTextNode(msg)); //Square Tile XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04); XmlNodeList SquareTileTextAttributes = squareTileXml.GetElementsByTagName("text"); SquareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode(msg)); //We add the square tile to the wide tile as a sibling of the wide tile IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true); tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node); //We create the notification with the tiles and send it to the app tile TileNotification tileNotification = new TileNotification(tileXml); //We add a tag to the tileNotification tileNotification.Tag = Tag; tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10); TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification); }
CreateTileNotification()
call that we added at the end of the OnLaunched
event handler with these new lines:CreateTileNotification("Message number one", "one"); CreateTileNotification("Message number two", "two"); CreateTileNotification("Message number three", "three");
CreateTileNotification
call, add the following code://We add a Numeric badge XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber); XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge"); badgeElement.SetAttribute("value", "7"); BadgeNotification badge = new BadgeNotification(badgeXml); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
//And we add a Glyph badge XmlDocument badgeXml_Glyph = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph); XmlElement badgeElement_Glyph = (XmlElement)badgeXml_Glyph.SelectSingleNode("/badge"); badgeElement_Glyph.SetAttribute("value", "newMessage"); BadgeNotification badge_Glyph = new BadgeNotification(badgeXml_Glyph); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge_Glyph);
First, we picked a template for our tile and loaded it into an XmlDocument
variable.
XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
Next we accessed the element that we wanted to change from within the template and changed its value.
XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text"); tileTextAttributes[0].AppendChild(tileXml.CreateTextNode("A group was added or updated..."));
We repeated the same operation but with another SquareTile
template, so we ended up with two customized tile templates.
//Square Tile XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04); XmlNodeList SquareTileTextAttributes = squareTileXml.GetElementsByTagName("text"); SquareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("A group was added or updated..."));
Then we added the square tile as a sibling of the wide tile.
//We add the square tile to the wide tile as a sibling of the wide tile IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true); tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);
Once the tile XML code was ready, we created TileNotification
from it.
//We create the notification with the tiles and send it to the app tile TileNotification tileNotification = new TileNotification(tileXml);
Then we added an expiration time for the tile to go away after 10 seconds.
tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);
We ended by sending createdTilenotification
to TileUpdater
of our application.
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
We enabled the cycling tile notifications, which allow us to show various notifications one after another in a queue with instructions:
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
And then we created TileNotification
with a tag to differentiate between different TileNotifications
while removing ExpirationTime
.
Continuing our recipe, we created in a similar way the numeric badge from a template (basic badge templates are BadgeNumber
or BadgeGlyph
) and then set the badgeattribute, created the BadgeNotification
, and used BadgeUpdateManager
to update it.
A BadgeNumber
template can display a number from 1 to 99 and a BadgeGlyph
template can contain one of the following status glyphs:
none
activity
alert
available
away
busy
newMessage
paused
playing
unavailable
error
We have seen that improving a tile with custom notifications or cycling through different tile notifications are easy to implement. Moreover, we have a good number of tile templates to explore.
Creating badges is also really easy and might add a lot of value to our application tile.
We should use tile improvements, notifications, and badges with care and only when they make sense and add value to our application.
We could also implement secondary tiles in response to user actions.
Finally, we can update the tile while the application is not running through the Windows Push Notification Service (WNS), improving our app with toast notifications.