Published: 09 Jan 2012
By: Diptimaya Patra
Download Sample Code

In this article we will see how we could display a notification message and further a list of notification messages in Silverlight.

Contents [hide]

Introduction

Nowadays dashboard applications are becoming popular in Silverlight applications. Well Dashboard applications are normal Silverlight application, with a home screen that displays some information about different modules involved in the application. Take an example of a dashboard where all Social Networking sites are in different modules and you need to see the notification or messages pushed to you by the modules. In this article we will see how we could display a notification message and further a list of notification messages.

Start-up

Create a Silverlight 4 application, name it as "MessageQueueInDashboard". Make the application OOB supportive. Note that, OOB has nothing to do with displaying messages; just for the sake of making a dashboard application I am mocking it (Usually dashboard applications are OOB, you could skip the step where OOB settings are applied.).

Right Click on the solution and select properties (or you could double click the properties folder in the settings) to open the Properties panel and change the OOB settings.

Notification User Control

Let's add a User Control name it as "NotificationContent.xaml" and design the user control like the following.

As you see in above xaml design, the main content of the user control is a Popup control, which has the content to display.

Just a tip: Design the content outside of the Popup control and after you do the design paste the content inside the Popup; this would help you design faster.

You could also see there is a VisualStateManager involved in the Popup; this is to add states to the Popup and animating at different states.

Let's dig into the C# code behind of the file.

As we have bound to the above two properties in the xaml, so let's add the properties first.

The notification always stays for few seconds and then fades away, so let's make an overloaded constructor which could do our task.

As you see in the above constructor takes double as parameter, where we would give number of seconds to stay on the page. Also a Timer object is created with interval of seconds.

On timer tick event handler, we would do few things such as call the VisualState which has the faded animation and then we would close the popup and stop the timer.

You have already seen the LayoutRoot_MouseLeftButtonUp event in the xaml code so let's add some code there too. We would stop the timer if the timer is running and then we would call the VisualState to fade away the message and then close the popup.

Now let's add a method where we would pass the Title and Message which would bind the data to our xaml content.

The above code in the method is very simple, we have created the ShowMessage method which takes title and message as string parameters. Inside the method we are assigning the values respectively. And we are assigning the datacontext to this, this would bind the Title and Message properties to the xaml.

Then we are setting the position where the popup would be displayed. Followed by the timer has to be started and the VisualState to animate Fade in.

As we would be using MVVM pattern in most of the dashboard applications, so let's create a single instance of the UserControl.

The above static method would create a static instance of the user control throughout the application.

Let's create a MainViewModel.cs class which would be our primary view model.

As you could see, the NotificationContent usercontrol is initialized with the default seconds to stay on the page.

Note: You could add another double property, which would RaisePropertyChanged when the notification message time is handled by the user.

Now let's bind the viewmodel with the view.

The above would do the binding of ViewModel with the View.

For testing I have added two buttons where we would test notification messages.

As you see above, the above click event handler displays how to use the notification. First we have see whether the Notification is already open, if it is opened close it (this step is required otherwise the data could not be bind, also the notification would not stay for another given time, the message might fade away just displaying it).

Then we are calling the appropriate ShowMessage to display the content.

Let's see it in running.

Well it works, now on click of the second button the message is changed and the notification stays for another 4 seconds.

Multiple Notifications

We have already got hint about multiple notifications in the introduction part. There are scenarios where you need to display more than one notification in the dashboard. For such scenarios this section would help.

Let's change the content of our Popup control with an ItemsControl.

As you see the above xaml code, we have added the same design that we had made for the last notification is kept inside the data template of the ItemsControl.

Also we have removed the MouseLeftButtonUp event handler from the Border, and assigned it to the ItemsControl.

As there would be multiple messages displaying on the dashboard, we need to change the ItemsPanel with the WrapPanel. To add wrap panel add the toolkit dll.

The WrapPanel could wrap based on your required orientation and that is either Horizontal or Vertical. But preference is given to Vertical.

Let's add a class which would contain the properties Title and Message.

As you see above, we have enclosed the properties in a class.

Now let's do some changes in the NotififyContent.xaml.cs

We have added a MessageList property that would be assigned to the ItemsControl's ItemsSource property we have added.

The AddMessage method is added; this would add the NotificationMessage to the MessageList and assigns the ItemsControl's ItemsSource property. And then we are displaying the message.

Also we are clearing the Messages List in the timer Tick event handler as well as in the ItemsControl MouseLeftButtonUp event.

Now let's add a method in the view model where it would create multiple messages.

As you see above, we are adding 5 messages to the MessageList. Let's call this method in one of the buttons I have put already in MainPage.xaml and test it.

Well, it displayed fine. Notice that if an additional message is added after the display the notification still stays; as we have stopped and restarted the timer.

Conclusion

We have successfully implemented the concept that we are looking for. We could also add something like this; the multiple display of messages should be a Queue, which would dequeue the message came first and enqueue the new message at the end.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra

This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 1
Starting from this article, I'm going to introduce to you an excellent 2.5D RPG games scene editor -...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


A new approach to build iGoogle/Facebook like sites with Asp.Net: Kalitte Widget Toolkit read more
Telerik Releases New Controls for Silverlight 3 and WPF read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Silverlight 3 “toast” notifications read more
Updated SilverTwit Code for MSDN Magazine read more
Telerik Announces Support for Microsoft Silverlight 3 read more
How do ASP.NET Application_ Events Work read more
CodeDigest.Com Article,Codes,FAQs - April,2009 read more
Telerik Sales Dashboard Demo for Silverlight and WPF read more
Securing Applications Built on Silverlight and WCF read more
Top
 
 
 

Please login to rate or to leave a comment.