Working With Toast Notification in Windows Phone 7

Karthikeyan Anbarasan
13y
16.3k
0
2

Article

Introduction

In this article we are going to see how to use the Toast Notification in windows phone 7. Windows Phone 7 application development supports push notification which provides developers a much more convenient option to transfer message Windows Phone 7 device from a web service when ever a new event occurs. Push notifications are of 3 types as follows

Toast Notification - This notification is launched at the top of the screen with the custom message such as an email alert or weather alert. The notification will be displayed for 10 second unless and until the user will dismiss the alert. If the user clicks on the alert then the application which sends the notification will be launched

Tile Notification - This notification is used to display dynamic representation of the application state, we can control the image, text and badge count of the notification.

Raw Notification - This notification is used only when the application is running on the foreground and if the application services are running background the notification will not be delivered and it gets discarded which is not delivered to the windows phone device.

We will see in depth on each notification and see a demo application for each notification one by one in our upcoming articles. Let us see the step by step process on how to create a TOAST application, we need to create a client application to send the notification to the device which we will be covering in this article.

Steps

Open Visual Studio 2010 in administrator mode and create a new Silverlight for Windows Phone 7 application with a valid project name as shown in the screen below.

Now add a button to create the push channel which will be required to create a Toast notification, 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

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</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.

C# Code

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 Toast Notification, to do that we will use the output window to get the channel details. Copy the below code to the code behind page.

C# Code

</pre>

private void getChannelURI(Uri value)

{

Dispatcher.BeginInvoke(() =>

{

Debug.WriteLine("URI: " + value.ToString());

});

Debug.WriteLine("URI: " + value.ToString());

}

<pre>

Now we need to handle the BindToShellToast of HttpNotificationChannel to bind the toast notifications to do that add the below code.

</pre>

private static void ShellBinding(HttpNotificationChannel httpChannel)

{

try

{

httpChannel.BindToShellToast();

}

catch (Exception)

{

//Catach if required.

}

<pre>

Now we need to add the below code to check if the application is running correctly and get the toast notification message in order to log it for administrating purpose.

C# Code

void Channel_ShellToastNotificationReceived(object sender, NotificationEventArgs e)

{

Dispatcher.BeginInvoke(() =>

{

Debug.WriteLine("Toast Notification Received!!!");

if (e.Collection != null)

{

Dictionary collection = (Dictionary)e.Collection;

System.Text.StringBuilder messageBuilder = new System.Text.StringBuilder();

}

});

}

void ChannelUriUpdated(object sender, NotificationChannelUriEventArgs e)

{

getChannelURI(e.ChannelUri);

}

Now 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.

C# Code

private void ChannelSetup()

{

HttpNotificationChannel httpChn = null;

string chnName = "Channel0";

httpChn = HttpNotificationChannel.Find(chnName);

if (httpChn != null)

{

if (httpChn.ChannelUri == null)

{

httpChn.UnbindToShellToast();

httpChn.Close();

ChannelSetup();

return;

}

else

{

getChannelURI(httpChn.ChannelUri);

}

ShellBinding(httpChn);

}

else

{

httpChn = new HttpNotificationChannel(chnName);

httpChn.ChannelUriUpdated += new EventHandler(ChannelUriUpdated);

httpChn.ShellToastNotificationReceived += new EventHandler(Channel_ShellToastNotificationReceived);

httpChn.Open();

ShellBinding(httpChn);

}

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

C# Code

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.

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

We will create a web page from which we will post the toast 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 3 labels and 3 textboxes to get the user inputs (Channel URI and notification message) and a button to trigger the event for the toast message to be sent to the Windows Phone 7 Device .

ASPX Code

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="F5debugWp7ToastNotificationServer._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

.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>

<tr>

<asp:Label ID="Label1" runat="server" Font-Bold="true" Font-Size="Large" Text="F5Debug Windows Phone 7 Toast Notification"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Label ID="Label2" runat="server" Text="Channel URI"></asp:Label>

</td>

<td>

<asp:TextBox ID="TextBox1" runat="server" Width="661px"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Label ID="Label3" runat="server" Text="Notification Title"></asp:Label>

</td>

<td>

<asp:TextBox ID="TextBox2" runat="server" Width="661px"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Label ID="Label4" runat="server" Text="Notification SubTitle"></asp:Label>

</td>

<td>

<asp:TextBox ID="TextBox3" runat="server" Width="659px"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="Button1" 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 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 F5debugWp7ToastNotificationServer

{

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:Toast>" + "<wp:Text1>{0}</wp:Text1>" + "<wp:Text2>{1}</wp:Text2>" + "</wp:Toast>" + "</wp:Notification>";

string strChannelURI = TextBox1.Text.ToString();

string strNotifitcationTitle = TextBox2.Text.ToString();

string strNotifitcationsubTitle = TextBox3.Text.ToString();

if (strChannelURI == string.Empty || strNotifitcationTitle == string.Empty || strNotifitcationsubTitle == string.Empty)

{

lblresult.Text = "All the fields are Mandatory!!!";

return;

}

HttpWebRequest sendNotificationRequest = (HttpWebRequest)WebRequest.Create(strChannelURI);

sendNotificationRequest.Method = "POST";

sendNotificationRequest.Headers = new WebHeaderCollection();

sendNotificationRequest.ContentType = "text/xml";

sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "toast");

sendNotificationRequest.Headers.Add("X-NotificationClass", "2");

string str = string.Format(PushNotificationXML, strNotifitcationTitle, strNotifitcationsubTitle);

byte[] strBytes = new UTF8Encoding().GetBytes(str);

sendNotificationRequest.ContentLength = strBytes.Length;

using (Stream requestStream = sendNotificationRequest.GetRequestStream())

{

requestStream.Write(strBytes, 0, strBytes.Length);

}

HttpWebResponse response = (HttpWebResponse)sendNotificationRequest.GetResponse();

string notificationStatus = response.Headers["X-NotificationStatus"];

string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];

lblresult.Text = "Status: " + notificationStatus + " : " + deviceConnectionStatus;

}

Now run the Windows Phone 7 Toast notification application to get the channel URI, once we got the channel URI keep the application running in background and navigate to the home page of the Windows Phone 7 Application. Now run the Server application (F5debugWp7ToastNotificationServer) and enter the details as shown in the screen below.

Now click on the Send Notification button and navigate to the Windows Phone 7 Emulator to see the Toast Notification Message on the top as shown in the screen below.

Conclusion

So in this article we have seen what Push Notification is in Windows Phone 7 and the types of notification available. Also we have seen how to create a Toast Notification step by step in detail.