Windows 8 Consumer Preview and Visual Studio 11 Beta – Show Message Dialogs and Popup Menus (Part 9/11)

February 29, 2012

This post is about popups. Why popups? Who need them?

Popups needed to present some important info to the user in modal way or to present some overlays above other screen elements.

Lets start from Message Box.

WinRT lacks MessageBox support in classic understanding or this UI element.

image

While showing classic dialog box over Metro application is definitely possible from technical point of view (see screenshots in the post about In-App purchases), it completely destroys Metro look and feel of the application. For this reason WinRT provides MessageDialog class in Windows.UI.Popups namespace. This class not only enables showing popups directly over Metro application but also provides it integrated look and feel and enables customizing the dialog box buttons.

Show simple dialog with one standard button (labeled “Close”), simply create a new instance of MessageDialog class and invoke it asynchronously:

Windows.UI.Popups.MessageDialog dialog = 
     new Windows.UI.Popups.MessageDialog("Copyright by Alex Golesh, (c) 2012", 
                                         "Valentine Love Catcher");

dialog.ShowAsync();

This code produce the following dialog:

image

It is possible to customize the experience, and provide custom number of buttons, set default button, create custom button labels, define commands invoked on button press and get the command object after dismissing the dialog:

private async void btnAbout_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Popups.MessageDialog dialog = 
        new Windows.UI.Popups.MessageDialog("Copyright by Alex Golesh, (c) 2012", 
                                            "Valentine Love Catcher");


    //Customize dialog buttons
    dialog.Commands.Add(new UICommand("Good work!", new UICommandInvokedHandler((args) =>{
        //Executes code on closing dialig using this command
        loveFound = !loveFound;
    })));
    dialog.Commands.Add(new UICommand("Thanks!"));
    dialog.Commands.Add(new UICommand("Just close this dialog"));
    //Makes "Thanks!" a default button being invoed while user press Enter key
    dialog.DefaultCommandIndex = 1;
            
    //Returns UICommand object which makes possible to know how this dialog was dismissed
    var dismissedBy = await dialog.ShowAsync();

    txtStatus.Text = "Dismissed by button labeled '" + dismissedBy.Label + "'";
}

This code snippet produces the following message box:

image

Note: all buttons dismiss the dialog. To wire some functionality (like asking use question providing “Yes”/”No” buttons) on dialog dismiss, use “await” syntax. ow l

Now lets look at Context Menu.

Same namespace (Windows.UI.Popups) enables creating popup (formally context) menus by using new PopupMenu class. Working with this menu very similar to working with MessageDialog – the only real difference is that you cannot provide content/label texts but only UICommands.

private async void imgBoy_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    Windows.UI.Popups.PopupMenu popupMenu = new PopupMenu();
    popupMenu.Commands.Add(new UICommand("Look for soulmate", new UICommandInvokedHandler((args) =>
    {
        //Invoke some functionality
        btnSearch_Click(sender, e);
    })));

    if (null != licenseInformation)
    {
        //Add additional commands only if user purchased some in-app products
        if (licenseInformation.ProductLicenses["ValentineBouquet"].IsActive || 
            licenseInformation.ProductLicenses["NewYearGift"].IsActive)
            popupMenu.Commands.Add(new UICommandSeparator()); //Create separator line

        if (licenseInformation.ProductLicenses["ValentineBouquet"].IsActive)
            popupMenu.Commands.Add(new UICommand("Send valentine bouquet"));

        if (licenseInformation.ProductLicenses["NewYearGift"].IsActive)
            popupMenu.Commands.Add(new UICommand("Send New Year gift"));
    }
    var dismissedBy = await popupMenu.ShowAsync(e.GetPosition(this));

    txtStatus.Text = "Dismissed by command labeled '" + dismissedBy.Label + "'";
}

This code snippet produces the following result:

image

Note: like in MessageDialog, any command releases the popup menu. To wire some functionality on popup menu dismiss, use “await” syntax.

This is it about the popups.

 

Stay tuned for the next part.

Alex

Add comment
facebook linkedin twitter email

Leave a Reply to Mona123 Cancel Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

3 comments

  1. mona123March 22, 2012 ב 5:49

    I need help.
    which tags are used for creation of lower popup(Which raise on right click on window). How to add that bar & settings for its child?

    Reply
  2. Mona123March 22, 2012 ב 6:20

    very useful .. Thanks a lot 🙂

    Reply
  3. Mona123March 22, 2012 ב 10:27

    very useful 🙂 thanks a lot

    Reply