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.
Open the application and, from the project, open
App.xaml.csand add the following namespaces:using Windows.UI.Notifications; using Windows.Data.Xml.Dom;
Create a method with the name
CreateTileNotificationusing 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); }Add a call to this method at the end of the
OnLaunchedmethod:CreateTileNotification();We will open
Package.appxmanifestand under the Tile: section, put#222222as the Background color property.We should execute the application and immediately go back to the Windows 8 UI to see the tile update in action.
In the
OnLaunchedmethod, just before theCreateTileNotification();call, we will add the following lines of code to enable notification cycling://We enable the notification cycling TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
Next we are going to update our
CreateTileNotificationmethod 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); }We will substitute the previous
CreateTileNotification()call that we added at the end of theOnLaunchedevent handler with these new lines:CreateTileNotification("Message number one", "one"); CreateTileNotification("Message number two", "two"); CreateTileNotification("Message number three", "three");Launch the application and immediately after launching it go back to our Windows 8 UI. Watch how the tile now shows the three message tiles in a cycle that repeats itself.
After the latest
CreateTileNotificationcall, 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);If we now run the application, we will observe a number at the bottom-right corner; that's our numeric badge.
We will comment the previous code and add these lines after it:
//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);Run the application and switch immediately to see the new look of our application tile with a glyph badge.
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:
noneactivityalertavailableawaybusynewMessagepausedplayingunavailableerror
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.