Creating Badge Tile In Windows Apps

Here are the steps: 

Step 1

I’m going to show in Windows Phone 8.1 apps. Same thing applies in Windows apps too. Firstly, create a Blank Windows Phone 8.1 Project.



Step 2

In the MainPage.xaml, add a button with click event to perform our task.

Complete XAML Code

<Page
x:Class="BadgeTile.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BadgeTile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="#FF3372D3">
        <Button Name="btnCreateBadge" Click="btnCreateBadge_Click" Margin="129,41,0,542">Create Badge</Button>
    </Grid>
</Page>

Step 3

There are different types of badge or glyph available for us. In the Code behind MainPage.xaml.cs, Update your click event code with the following,

private void btnCreateBadge_Click(object sender, RoutedEventArgs e)
{
    var xmlBadge = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
    var badge = xmlBadge.SelectSingleNode("/badge") as XmlElement;
    badge.SetAttribute("value", "9");
    var badgeNotification = new BadgeNotification(xmlBadge);
    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeNotification);
}

Step 4

Run your application in your Windows Phone device or emulator and click on the Create Badge button. Pin your app to the start menu and you will see the Badge number in your Tile.



You can get the complete source code from GitHub also.