Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 09 Jan 2012
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.
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.
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.
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
Vertical. But preference is given to
Let's add a class which would contain the properties
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.
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
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.
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.
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.
Please login to rate or to leave a comment.