#Win8Dev Tutorial: Working with Message Dialog in WinRT apps

As a Silverlight, WPF or WPDev you might be aware of the MessageBox class present in the SDK to show a message to the user and ask the user to interact with the application on some special cases. As a Win8Dev, you will find it missing in WinRT.

What to do? There is a class named MessageDialog which does the same thing but asynchronously in Windows 8 applications. If you are new to Win8Dev, you will find it useful.

Before starting with the post, let me tell you that, a collection of Windows 8 Application Development tutorials has been published in my blog. If you didn’t access them yet, check it out.

The MessageDialog class is a sealed class, implements IMessageDialog interface and present in the Windows.UI.Popups namespace. It exposes a method called ShowAsync() which asynchronously pops up the message in the screen.

To integrate a message dialog in your application, first create an instance of the same passing an appropriate message content. Register the command buttons that you want to show in the dialog and then finally call the ShowAsync() to display the message.

Here is a code snippets that shows you how to integrate a MessageDialog:

var messageDialog = new MessageDialog("Are you sure, you want to navigate away?");

messageDialog.Commands.Add(new UICommand("Yes", delegate(IUICommand command)

                                                    {

                                                        // write your business logic

                                                    }));

messageDialog.Commands.Add(new UICommand("No"));

// call the ShowAsync() method to display the message dialog

messageDialog.ShowAsync();

Check out the above code snippet where we added a delegate command to execute on “Yes” button click event. If you don’t want to use a delegate, you can easily call a method as shown below:

var messageDialog = new MessageDialog("Are you sure, you want to navigate away?");

messageDialog.Commands.Add(new UICommand("Yes", OnYesButtonClicked);

messageDialog.Commands.Add(new UICommand("No"));

// call the ShowAsync() method to display the message dialog

messageDialog.ShowAsync();

.

.

.

private void OnYesButtonClicked(IUICommand command)

{

    // write your business logic to implement for "Yes" button click

}

In case you don’t want to do any operation on click of a button and just want to close the dialog, left the second parameter of the UICommand blank as shown above for the “No” button click operation.

Now once you run your application, you will see a Message Dialog in the screen as demonstrated below:

Yes, this is not exactly the same UI that we see in normal applications like HTML, Silverlight, Windows Phone or WPF. Just a bit more spreading the entire screen width (as per the Windows 8 design guidelines).

I didn’t yet find any way to customize the MessageDialog template to include color or any different controls like image etc. If you know about that, please share the link here. In case any other queries, get in touch with me on Twitter, Facebook and/or Google+. Don’t forget to subscribe to my blog’s RSS feed and email newsletter to get the updates directly to your inbox.