Working With Tile Notification in Windows Phone 7

Article

Introduction

In this article we are going to see how to work with Tile Notification which is one of the Microsoft Push Notification Services available. In our earlier article we have seen how to use the Toast Notification services to create a channel and update the toast messages to the Windows Phone 7 Device with the step by step process. In this tutorial we will follow the same process and see the steps to create the channel and sent the notifications messages.

Tile Notifications are used to show up to date status of an application on the windows phone 7 start screen as a tile. This will work only if the application is pinned to the start screen, basically we can see 3 types of information on the Tile Notifications as follows

Count - Also we call this as Badge, is an integer value between 0 to 99. We can specify the count as per the requirement which can be updated on the notifications
Background Image - An image property which will display the images as the background for the tile.
Title - Title of the application which should normally be with in 15 characters, exceeding the 15 characters will be truncated automatically.

The tile images can be a .jpg or .png files and should be of 173 X 173 pixels to have a better appearance. If less than the specified pixels will be automatically stretched and the look and feel will differ. Let us jump start to see the step by step process on how to achieve these tasks.

Steps

Open Visual Studio 2010 and create a new SIlverlight for Windows Phone 7 Application with a valid project name as shown in the screen below.

Now let us start designing the interface to create a channel, as we discussed in our previous article () we will create the channel first which will be required to communicate for the Tile Notifications. if there are any already available notification events available it will use the same else it will create a new notification event and then connects through the channel. Add the below XAML code to get the channel notification to trigger.

XAML Code

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Tile Notification" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Content="Establish Channel!!!" Height="149" HorizontalAlignment="Left" Margin="73,88,0,0" Name="button1" VerticalAlignment="Top"
Width="299" Click="button1_Click" />
</Grid>

Now we need to go to the code behind and start the process of establishing the Notification channel to get the events trigger. To do that first let we need to add the below two using statements.

Code Behind

using Microsoft.Phone.Notification;
using System.Diagnostics;

Now we need to write the code to get the open channel details which will be used to send the Tile Notification, to do that we will use the output window to get the channel details. Copy the below code to the code behind page. Also we need to have a method which will do the channel setup step by step, first it will check if the channel is already available if its available we need to check the channel is null if null then we need to close the channel and open a new channel. But initially if the channel is not available then we can directly create the HttpNotificationChannel and do the process to create the channel as shown in the screen below.

Code Behind

private void ChannelSetup()
{
HttpNotificationChannel pushtileChannel;
string strchannelName = "Channel0";
pushtileChannel = HttpNotificationChannel.Find(strchannelName);
if (pushtileChannel == null)
{
pushtileChannel = new HttpNotificationChannel(strchannelName);
pushtileChannel.ChannelUriUpdated += new EventHandler<NotificationChannelUriEventArgs>(PushChannel_ChannelUriUpdated);
pushtileChannel.ErrorOccurred += new EventHandler<NotificationChannelErrorEventArgs>(PushChannel_ErrorOccurred);
pushtileChannel.Open();
pushtileChannel.BindToShellTile();
}
else
{
pushtileChannel.ChannelUriUpdated += new EventHandler<NotificationChannelUriEventArgs>(PushChannel_ChannelUriUpdated;
pushtileChannel.ErrorOccurred += new EventHandler<NotificationChannelErrorEventArgs>(PushChannel_ErrorOccurred); `
System.Diagnostics.Debug.WriteLine(pushtileChannel.ChannelUri.ToString());
Debug.WriteLine(String.Format("URI : {0}",
pushtileChannel.ChannelUri.ToString()));
}
}
void PushChannel_ChannelUriUpdated(object sender, NotificationChannelUriEventArgs e)
{
Dispatcher.BeginInvoke(() =>
{
System.Diagnostics.Debug.WriteLine(e.ChannelUri.ToString());
Debug.WriteLine(String.Format("URI : {0}",
e.ChannelUri.ToString()));
});
}
void PushChannel_ErrorOccurred(object sender, NotificationChannelErrorEventArgs e)
{
Dispatcher.BeginInvoke(() =>
Debug.WriteLine(String.Format("Tile Notification {0} error occurred. {1} ({2}) {3}",
e.ErrorType, e.Message, e.ErrorCode, e.ErrorAdditionalData))
);
}

Now we need to call the above method on the button click event as shown in the screen below.

Code Behind

private void button1_Click(object sender, RoutedEventArgs e)
{
ChannelSetup();
}

Now we are done with the Windows phone 7 client notification application, we will check by building and executing the application and we can see the Windows Phone 7 Emulator as shown in the screen below.

Now click on the Establish Channel button which will establish the channel if not already created else will use existing channel and we can see the channel URI in the Output window since we have coded to get the channel details. To get the output window just go to the Visual Studio tool bar and select View –> Output window and we can see the output window as shown in the screen below.

Let us copy and keep the channel details on to a separate notepad, Now we need to create a Server to post the tile notifications to the application device to show the title.

Now we need to create an background image with 173 X 173 pixel as shown in the screen below and add it to the project solution. Note that we need to make the Build Action from Resource to Content as shown below.

We will create a web page from which we will post the tile notifications and get the notification on to the Windows Phone 7 device. To start with first create a ASP.NET Web application in C# as shown in the screen below.

Now add the below design code to the ASPX page so that we will get the same look and feel for this tutorial, here we have added 4 labels and 4 textboxes to get the user inputs (Channel URI, Front tile message, Background and Notification txt) and a button to trigger the event for the tile message to be sent to the Windows Phone 7 Device. Just copy and paste the below ASPX code

ASPX Code

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="F5debugWp7TileNotificationServer._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
}
.style3
{
width: 690px;
}
.style4
{
width: 143px;
}
.style5
{
width: 38px;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table class="style1">
<tr>
<td colspan="3">
<asp:Label ID="Label1" runat="server" Font-Bold="true" Font-Size="Large" Text="F5Debug Windows Phone 7 Tile Notification"></asp:Label>
</td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
 </td>
<td class="style3">
 </td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
<asp:Label ID="Label2" runat="server" Text="Notification URI"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtNotURI" runat="server" Width="661px"></asp:TextBox>
</td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
 </td>
<td class="style3">
 </td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
<asp:Label ID="Label5" runat="server" Text="Notification Front Tile"></asp:Label>
</td>
<td class="style3">
<asp:TextBox ID="txtNotFrontTile" runat="server" Width="661px"></asp:TextBox>
</td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td class="style4">
 </td>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td class="style4">
<asp:Label ID="Label3" runat="server" Text="Notification Background"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtNotBck" runat="server" Width="661px"></asp:TextBox>
</td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
 </td>
<td class="style3">
 </td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
<asp:Label ID="Label4" runat="server" Text="Notification Count"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtNotCount" runat="server" Width="659px"></asp:TextBox>
</td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
 </td>
<td class="style3">
 </td>
<td>
 </td>
</tr>
<tr>
<td class="style5">
 </td>
<td>
<asp:Button ID="btnSendNote" runat="server" Font-Bold="True"
onclick="Button1_Click" Text="Send Notification" Width="134px" />
</td>
<td>
<asp:Label ID="lblresult" runat="server"></asp:Label>
</td>
<td>
 </td>
</tr>
</table>
</asp:Content>

Now go to the code behind and add the below code, this code will get the user inputs mainly the Channel URI, background and the tile information and pass the message to the Microsoft Push Notification services. Just copy the below code to proceed further.

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;
using System.Text;
namespace F5debugWp7TileNotificationServer
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string PushNotificationXML = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" + "<wp:Notification xmlns:wp=\"WPNotification\">" +
"<wp:Tile>" +
            "<wp:BackgroundImage>" + txtNotBck.Text + "</wp:BackgroundImage>" + "<wp:Count>" + txtNotCount.Text + "</wp:Count>" + "<wp:Title>" +
            txtNotFrontTile.Text + "</wp:Title>" + "</wp:Tile> " + "</wp:Notification>";
            string strChannelURI = txtNotURI.Text.ToString();
            string strNotificationBackground = txtNotBck.Text.ToString();
            string strNotifitcationCount = txtNotCount.Text.ToString();
            string strNotifitcationFronttile = txtNotFrontTile.Text.ToString();
            if (strChannelURI == string.Empty || strNotificationBackground == string.Empty || strNotifitcationCount == string.Empty ||
strNotifitcationFronttile == string.Empty)
            {
                lblresult.Text = "All the fields are Mandatory!!!";
                return;
            }
            HttpWebRequest sendNotificationRequest = (HttpWebRequest)WebRequest.Create(strChannelURI);
            sendNotificationRequest.Method = "POST";
            byte[] notificationMessage = Encoding.Default.GetBytes(PushNotificationXML);
            // Set the web request content length.
            sendNotificationRequest.ContentLength = notificationMessage.Length;
            sendNotificationRequest.ContentType = "text/xml";
            sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "token");
            sendNotificationRequest.Headers.Add("X-NotificationClass", "1");
            using (Stream requestStream = sendNotificationRequest.GetRequestStream())
            {
                requestStream.Write(notificationMessage, 0, notificationMessage.Length);
            }
            // Send the notification and get the response.
            HttpWebResponse response = (HttpWebResponse)sendNotificationRequest.GetResponse();
            string notificationStatus = response.Headers["X-NotificationStatus"];
            string notificationChannelStatus = response.Headers["X-SubscriptionStatus"];
            string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];
            lblresult.Text = "Status: " + notificationStatus + " | " + deviceConnectionStatus + " | " + notificationChannelStatus;
        }
    }
}

Now we are done with our server code, to test tile notification first run the Windows Phone 7 application (F5debugWp7TileNotification) and get the Channel URI. Once we got the URL click on the Back button and navigate to the application list. Point our application F5debugWp7TileNotification by pressing continuously using the mouse pointer and we can see the context menu as shown in the screen below.

Now select pin to start from the menu and we can see the application is pinned to the Tile as shown in the screen below.

Now run the project F5debugWp7TileNotificationServer web application and enter the values as shown in the screen below.

Now click on Send Notification button and we can see the result in the label at the bottom as shown in the screen below.

Now go to the Windows Phone 7 Emulator and we can see the Tile notification message which we send from the web application as shown in the screen below.

Conclusion

So in this article we have seen how to use the Tile Notifications to send live updates to the Windows phone 7 devices to update the primary tiles, in our upcoming tutorials we will see how to do the secondary tiles and also see the raw notification process as well.

Up Next

Ebook Download

View all

Step into Windows Phone 8

Read by 1.5k people

Download Now!

Learn

View all