Creating Custom Message Box in Silverlight 3

In this post we will learn how to create a user defined message box control in Silverlight 3. So that, you can use it in any Silverlight application instead of the default messagebox.

Creating the MessageBox child window user control:

At first we will create our own user control. Then we will use it in a sample application. 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 MainPage.xaml from your solution and add a new Child Window.

In expression blend, now you can easily change the appearance of this child window. You can change the information bar back ground, change the whole layout, the power is on your hand. How to beautify it is up to you, I will not discuss about that in this post. For this demo, I removed all the default assets and included the followings in the layout root of the child window:

<StackPanel Height="23" HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal"> 

<Button x:Name="btnYes" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" /> 

<Button x:Name="btnNo" Content="OK" Click="OKButton_Click" Width="75" Height="23" />                 

<Button x:Name="btnCancel" Width="75" Content="Button"/>

</StackPanel>           

<TextBlock x:Name="txtMsg" Text="TextBlock" TextWrapping="Wrap" Margin="155,51,8,87"/>           

<Image x:Name="imgIcon" HorizontalAlignment="Left" Width="100" Margin="8,66,0,99"/>

Now in the code delete all the default things.Now my requirement was to show four types of information : question,warning,error message and general information. Also I had to show relative icons in the left hand side of the box too. So in the code I added the followings:

public enum MessageBoxButtons

{

    Ok, YesNo, YesNoCancel, OkCancel

}

 

public enum MessageBoxIcon

{

    Question, Information, Error, None, Warning

}

So now user is having the option as per the requirement, he/she can select the message box buttons and icons to. You can modify it as per as your requirement.

We have created our message box. One last thing we have to know that which button is clicked. I tried using implementing similar to the default message box show method, but in this method the application didn't wait for the user to close the dialog in order to complete its work. In order to overcome this issue, I decided 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.

public delegate void MessageBoxClosedDelegate(MessageBoxResult result);

public event MessageBoxClosedDelegate OnMessageBoxClosed;

public MessageBoxResult Result { get; set; }

private void MessageBoxChildWindow_Closed(object sender, EventArgs e)

{

    if (OnMessageBoxClosed != null)

       OnMessageBoxClosed(this.Result);

}

All set. I am not going to explain the rest of the codes. You can download the zip file and go through it. Trust me, It will be easy to understand.Now build the project and you will be having the dll.

Using the Message Box user control in project:

First you need to add the dll and also the System.Windows.Control dll to your project. Then create an instance of the MyMessageBox class and in the constructor decide which type of message box you want. Then call the default show method. And on the close event, decide what to do when a particular button is clicked.

MyMessageBox newBox = new MyMessageBox("Error!!", "An unexpected error occured", MessageBoxButtons.Ok, MessageBoxIcon.Error);

newBox.OnMessageBoxClosed += new MyMessageBox.MessageBoxClosedDelegate(newBox_OnMessageBoxClosed);           

newBox.Show();

That's it.Enjoy!!