In this article we are going to see how to use the Tile and Badge notifications while developing your Windows Store application. In our previous article we have seen how to use the settings panel to force the application settings that are available in common across the different sections of the application pushing with the Charm bar. Notification in Modern UI is something need to be architected in such a way it should not affect the UI elements, basically we should notify the end users with the appropriate information in appropriate time and manner. Microsoft has a unique notification system which can be used to push the information to the end users devices   [more]

Tiles are basically the representation of the application in the Modern UI design which can be resized in different formats (Smaller or Larger) in Windows 8 screen. Tiles can be used to show the content in real time and more important to the end users. It can be a combination of text and images with a status. In Windows Store app development we have Secondary Tiles option which can be a reference to a location or a content inside the application. Tiles as mentioned are available in 2 sizes which are Smaller and Larger to display the text, images or logos and notifications. Microsoft has a list of Tiles catalog which can be used as a reference which can be accessed using the link “Microsoft Tiles Catalog”. By default few tile sizes are added to the project while creating the solution from the Visual Studio IDE which can be replaced with the application choices as shown in the screen below.

Badge notification is a consolidated summary or information to be shown specific to the application with a number format between 1 to 99. Badge is also defined in an XML document and its elements will be defined in the schema. The badge takes the numeric format between 1 to 99 and in case of 0 it clears the information from the tile. Any number to be specified greater than 99 will be indicated with 99+ to tell the end user the notification crosses 100. Microsoft has a checklist which suggests few tips and points that should be followed while developing your application.

Let us create a project and see how to use the Tiles and Badges in the Windows Store application and later we will see how can we use the notifications to make it more appropriate to convey the information to the end user. Open Visual Studio 2012 IDE in administrator mode and create a new Windows Store application with C# and XAML with a valid project name as shown in the screen below.

To create a default tile with some basic configuration, just navigate to the Package.appxmanifest file which will be created by default when all the files and folder for the project is created. Open the file and we can see the basic configurations which can be changed as per the requirement as shown in the screen below.

This will create a basic tile which is static and have the base default image and the text that will be shown in the Modern UI screen. To create a Live tile notification we need to follow the below steps, lets take the scenario when the application loads fully lets send a notification which is basic and hard coded. In real time we can do that by maintaining a separate XML which will be used as the data source that are used as a notification database.

C# Code:

public void CreateLiveTile()
        {
            var tileContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

            var tileLines = tileContent.SelectNodes("tile/visual/binding/text");
            tileLines[0].InnerText = "This is Text Line 1";
            tileLines[1].InnerText = "This is Text Line 2";

            var notification = new TileNotification(tileContent);
            notification.Tag = "F5debugtag";

            var updater = TileUpdateManager.CreateTileUpdaterForApplication();

            updater.EnableNotificationQueue(true);
            notification.ExpirationTime = DateTime.Now.AddMinutes(5);
           
            updater.Update(notification);
        }

The code uses the TileUpdateManager class which uses the API that are available with Windows.UI.Notifications namespace. We need to use the GetTemplateContent with the type of the tile we required to create on the application load, the method basically return a XML document that represent the template that will be used to showcase the tile as shown in the code above.

C# Code Complete:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace TileNotificationSample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            CreateLiveTile();
        }

        public void CreateLiveTile()
        {
            var tileContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

            var tileLines = tileContent.SelectNodes("tile/visual/binding/text");
            tileLines[0].InnerText = "This is Text Line 1";
            tileLines[1].InnerText = "This is Text Line 2";

            var notification = new TileNotification(tileContent);
            notification.Tag = "F5debugtag";

            var updater = TileUpdateManager.CreateTileUpdaterForApplication();

            updater.EnableNotificationQueue(true);
            notification.ExpirationTime = DateTime.Now.AddMinutes(5);
           
            updater.Update(notification);
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

Call this method in any button click on when application load so that it will update the tile with the information we hardcoded here. Or in real time we use the xml which has the data that should be showcased to the end user in the tile. We are done with out base code, let us run the application and we can see the Live update to the tiles as shown in the screen below.

Conclusion:

In this article we have seen how to use Live Tile Notification and badges that can be used in real time to update the end user with the Notification over the tile. To get over the complete catalog on the tiles and badges checklist refer to the Microsoft MSDN link which has the different specifications and things to be followed.