Badge is a type of Push Notification available in Windows 8. It is displayed over the top of a tile. Badges are small icons that are shown in the lower right corner of a tile. The tile can either be a default tile or a tile with a notification. A badge can display either a number from 1-99 or a status glyph. Now it is to be noticed that 99 is the largest number to be displayed as a badge. Even if you provide a number larger than 99, it will show badge notification as 99 only.You can have a full overview about number badges and glyph badges from here.

 

Let us start with the development part. Create a new project in Visual Studio 2012 RC for Windows 8 and name it ”Badge”. Change its Live tile logos(small, wide and normal) with the new images. Now in MainPage.xaml, insert two buttons from the toolbox.  Write the content of the first button as “Send Badge Notifications” and name the button as “btn_send”. Write the content of second button as “Clear Notifications”  and name the button as “btn_clear”.

The code for the two buttons will look something like this:

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>  <Button x:Name=”btn_send” Content=”Send Badge Notifications” HorizontalAlignment=”Left” Height=”39″ VerticalAlignment=”Top” Width=”221″ Click=”btn_send_Click_1″/>

<Button x:Name=”btn_clear” Content=”Clear Notifications” HorizontalAlignment=”Left” Height=”39″ Margin=”226,0,0,0″ VerticalAlignment=”Top” Width=”181″ Click=”btn_clear_Click_1″/>

</Grid>

Now in MainPage.xaml.cs, add the following namespace declaration:

using Windows.UI.Notifications;

using Windows.Data.Xml.Dom;

 

Double click the ‘btn_send’ button which will go to the method “btn_send_Click_1()”. In this method, write the following code:

XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);

XmlElement textnode = (XmlElement)xmldoc.SelectSingleNode(“/badge”);

textnode.SetAttribute(“value”, “available”);

BadgeNotification not = new BadgeNotification(xmldoc);

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(not);

 

 

Now we will learn what the following statements will do.The first line gets the blank XML badge template for a numeric badge. For a glyph badge, the code will be:

XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGylph);

 

The schema for both types of badges are same i.e. <badge value=””/>

The next two lines set the value attribute in the schema. For the number badge this will be one or two digits. For the glyph badge it will be one of the following values: none,activity,alert,available,away,busy,newMessage,paused,playing,unavailable,error.

The last two lines packages the XML into a notification and creates a badge object and display it on the tile.

Now you can run the project.The application’s main page will look like this:

When you click the button, The badge notification is shown like this:

The first image shows numeric badge while second one shows gylph badge.

Next we will try to remove the badge notification from the tile. For this purpose we will use the second button. In the MainPage.xaml, double click the ‘btn_clear’ button, which will open the method ‘btn_clear_Click_1’. In this method, write the following code:

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear(); 

Now you all must be thinking that what is the usefulness of this badge or where this badge needs to be used?????

A Badge can be used –

1. To show no. of unread mails in a mail application
2. To show no. of online members in a chat
3. To display the chat status
4. To display the current level of game being played.

This is all about Badges. Hope you like it.