In this article we are going to see how to use Badge notification in Windows Store application development. Badge notifications are displayed over the top of the tile at the bottom corner with a badge can hold a number from 1 to 99 or a status gluph. The number 99 is the largest number to be displayed as the badge count, to show number greater that 99 it will show as 99 with a plus symbol (as 99+) only and not the exact number. The status gluph is a set of limited eleven shapes that comes along with the box and will not have any option to customize on your own. The badge will appear as a small notification at the bottom of the tile and data will be passed through a short xml message that carries a value representing the number or shape to show.      [more]

Let us see how we can use the Badge notification while developing your Windows Store application. Open Visual Studio 2012 IDE in administrator mode and create a new Windows Store blank application as shown in the screen below.

Clicking on OK will create the project with the default files and folders, add some button which we will use to trigger the notification as being in the same application the Badge Notification need to manually triggered to showcase in this article. We will add 2 button controls one to change the badge number and other button to change the status of the badge. Also we will add a textbox to input the number that is required to be shown in the badge as shown in the code below.   

XAML Code:

<Page
    x:Class="BadgeNotificationSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BadgeNotificationSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Change Badge Number" HorizontalAlignment="Left" Margin="75,306,0,0" VerticalAlignment="Top" Height="58" Width="215" Click="Button_Click"/>
        <TextBox HorizontalAlignment="Left" Margin="82,206,0,0" TextWrapping="Wrap" x:Name="txtBadgeno" Text="" VerticalAlignment="Top" Width="428" Height="59"/>
        <Button Content="Change Badge Shape" HorizontalAlignment="Left" Margin="295,306,0,0" VerticalAlignment="Top" Height="58" Width="215" Click="Button_Click1"/>

    </Grid>
</Page>

In the code behind write the below code in each of the button click event. In the first button click event write the code to input the number as the value to the badge and in the second click event we will input the status as the value. Windows.UI.Notifications.BadgeUpdateManager is used to get the input of type of the badge we need to showcase in the tile. For showing the number we need to select BadgeNumber and for the status select BadgeGlyph as the template type.

C# Code:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            string strBadgeno = txtBadgeno.Text.ToString();

            XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
            XmlElement node = (XmlElement)xmldoc.SelectSingleNode("/badge");
            node.SetAttribute("value", strBadgeno);
            BadgeNotification BNnot = new BadgeNotification(xmldoc);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(BNnot);
        }

        private void Button_Click1(object sender, RoutedEventArgs e)
        {
            XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
            XmlElement node = (XmlElement)xmldoc.SelectSingleNode("/badge");
            node.SetAttribute("value", "available");
            BadgeNotification BNnot = new BadgeNotification(xmldoc);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(BNnot);
        }

BadgeUpdateManager will get the XML document as the input where we will set the value as a number or as a status as per the requirement. Here we are seeing both the scenarios in each button click events as shown in the code above. For showing the status we have 11 inbuilt statues that can be use to showcase the status as shown below.

C# Complete Code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
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;
using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

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

namespace BadgeNotificationSample
{
    /// <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();
        }

        /// <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)
        {
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string strBadgeno = txtBadgeno.Text.ToString();

            XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
            XmlElement node = (XmlElement)xmldoc.SelectSingleNode("/badge");
            node.SetAttribute("value", strBadgeno);
            BadgeNotification BNnot = new BadgeNotification(xmldoc);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(BNnot);
        }

        private void Button_Click1(object sender, RoutedEventArgs e)
        {
            XmlDocument xmldoc = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
            XmlElement node = (XmlElement)xmldoc.SelectSingleNode("/badge");
            node.SetAttribute("value", "available");
            BadgeNotification BNnot = new BadgeNotification(xmldoc);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(BNnot);
        }
    }
}

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the expected output as shown in the screen below.

Conclusion:

In this article we have seen one of the type of notification (Badge) in Windows Store application development. Badge notification will help to showcase the detail or the status in the tile with a value or a status as per the standards with the template format that is available inbuilt.