Quickstart: Designing a message dialog (HTML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This quickstart presents guidance on the design and implementation of message dialogs. As described in Adding message dialogs, message dialogs appear edge-to-edge in an app and resize horizontally based on the content of the dialog. You can add a title, a message, and up to three buttons to your dialog.

Prerequisites

Steps

The sample code shows a message dialog that notifies the user that an internet connection cannot be found and prompts the user for a response. Most of the code for this quickstart is in the Message dialog sample.

1. Create the dialog contents.


        // Create the message dialog and set its content
        var msg = new Windows.UI.Popups.MessageDialog(
            "No internet connection has been found.");

2. Add buttons.

        // Add commands and set their command handlers
        msg.commands.append(new Windows.UI.Popups.UICommand(
            "Try again", 
            commandInvokedHandler));
        msg.commands.append(
            new Windows.UI.Popups.UICommand("Close", commandInvokedHandler));

        // Set the command that will be invoked by default
        msg.defaultCommandIndex = 0;

        // Set the command to be invoked when escape is pressed
        msg.cancelCommandIndex = 1;

3. Display the dialog.

        // Show the message dialog
        msg.showAsync();

4. If desired, handle multiple modal UIs.

Sometimes, you might want to launch another modal UI from a dialog, like opening the file picker from a message dialog. Windows won't let you launch the extra modal UI from within the original dialog's command handler.

Instead, you should launch the secondary UI from within the async operation's completed handler. The completed handler runs after the dialog is destroyed and is given the result of the async operation, so that you are still able to tell which command the user clicked on from the original UI.


        var result = await msg.ShowAsync();

        if (result.Label == "Buy")
        {
            await this.YourCustomFLow(result);
        }
 
        private async Task YourCustomFlow(IUICommand command)
        {
            // Your code here.
        }

Summary

This quickstart presented guidance on the design and implementation of message dialogs.

MessageDialog

Message dialog sample