Custom MessageBox Control for Silverlight 3

• Download source - 143.71 KB
• Download demo project - 64.81 KB

Introduction

In this article, I'll show you how to create a custom messagebox user control in Silverlight 3, so that you can use it in any Silverlight application instead of the default messagebox.

Background

In order to be able to complete this tutorial, you should know a little about Microsoft Expression Blend, which we are going to use in creating the MessageBox user control. I assume that you are familiar with Expression Blend and with its UI.

Basic Idea

There's no doubt that the messagebox control is used massively in any application whatever it was desktop or web as you may need to ask the user for something, warn him for some dangerous operations, or just display an information to the user, and so on... The control must be very flexible to handle all of these scenarios. Moreover, it must be a modal dialog which prevents users from accessing the background of the page until the dialog is closed.

Creating the MessageBox User Control

Start Expression Blend and choose Control library project template (in order to generate a DLL so that it can be added to in any Silverlight application), then remove the MainControl user control from your solution and add a new Child Window. This child window will be opened as a modal dialog, so we are now ready for changing the style of the child window and make it look like the screen shot.

Designing the MessageBox

In Objects and timeline panel, right click on the ChildWindow node, then choose Edit Template, then Edit a Copy. Now we will be able to customize the layout of the child window to meet our requirements. You will realize that the 5^th Border is the most important one that includes all the UI elements.

Expand the 5^th border control and choose the Chrome node; the Chrome node is the header of the messagebox, so we are going to change its background color using the gradient brush using the following XAML code:

After finishing the header style, we are going to add a background image to give it a better appearance, so add an image in the grid that hosts the chrome element, or you can just adjust the background color of that grid, so it's up to you.

Adding Controls for the MessageBox

At this point, we have finished styling our custom messagebox layout, but we want to display the text message and add some buttons to the body of the messagebox, so back to the childwindow we are going to add the following items:

1. Textblock element in order to display the text message to the user.
2. Image element that displays the icon of the message according to the user choice.
3. butto3 - 3 buttons (Yes, No, & Cancel), but the user may want to display just only 2 buttons (Yes & No) or may be just one (Ok), so we are going to group them into a StackPanel in order to keep them centered in the dialog.

So the final UI tree should look like this in the Objects & timeline panel:

Adding Some Options for the User

So far we've finished all the design work for the user control, so let's add some options for the user. We are going to add two enums in our namespace (MessageBoxButtons & MessageBoxIcon), in order to enable the user to select the correct message type, for example he/she may want to display an error message, so we should display the error icon in the message.

public enum MessageBoxButtons { Ok, YesNo, YesNoCancel, OkCancel }
public enum MessageBoxIcon { Question, Information, Error, None, Warning }

Getting the messagebox Result

One last thing we want to know is which button was clicked by the user, so what about making a public method Show(string message, string title); that returns the DialogResult exactly like the messagebox class in the Windows Forms? Unfortunately this is not applicable in Silverlight, because in windows forms the messagebox waits for a response from the user so that the program can complete processing, but this is not the same case in Silverlight. The modal dialog will be opened and the rest of code will be executed as well, so the application is not waiting for the user to close the dialog in order to complete its work. In order to overcome this issue, we are going to handle the close event of the messagebox control so that we can know the clicked button.

I declared a delegate function with one parameter of type MessageBoxResult in order to know which button was clicked.

//delegate to get the selected MessageBoxResult
public delegate void MessageBoxClosedDelegate(MessageBoxResult result);

//event will be fired in the Close event of the usercontrol
public event MessageBoxClosedDelegate OnMessageBoxClosed;

//property to keep the result of the messagebox
public MessageBoxResult Result { get; set; }

Handling the Close Event

private void MessageBoxChildWindow_Closed(object sender, EventArgs e)
{
	if (OnMessageBoxClosed != null)
	OnMessageBoxClosed(this.Result);
}

How To Use

First you will need to add the generated DLL from this class library to any Silverlight application. The child window class has a public method called "Show()" so we are going to use it for opening the messagebox, but we want to set its title, text message, icon & number of buttons according to user choices; so we can send these parameters whether through a public method or through an overload for the constructor, I chose the 2^nd option and created another overload for the default constructor and passed the parameters through it, so use the following code to open the messagebox:

//displayed message
string msg = "An error has occurred and the operation was cancelled, 
		Are you sure you want to continue?";

//creating new instance from the MessageBoxControl
MessageBoxControl.MessageBoxChildWindow w = 
	new MessageBoxControl.MessageBoxChildWindow("Error", msg, 
	MessageBoxControl.MessageBoxButtons.YesNo,
	MessageBoxControl.MessageBoxIcon.Error);

//define the close event handler for the control
w.OnMessageBoxClosed += 
	new MessageBoxControl.MessageBoxChildWindow.MessageBoxClosedDelegate
	(w_OnMessageBoxClosed);

//open the message
w.Show();

Final Word

I've attached a test application that displays the messagebox dynamically, so that you can test all of its capabilities.

History

• This article was written on 18^th September 2009.