Windows Phone 8 : Windows Phone Toolkit (part 5) - CustomMessageBox

To use the CustomMessageBox, you simply create an instance of the class and set certain properties. At a minimum you should set the Caption, Message, and Button content properties, like so:

var myMessage = new CustomMessageBox()
{
  Caption = "A Custom MessageBox",
  Message = "This is a custom MessageBox example.",
  LeftButtonContent = "cancel",
  RightButtonContent = "ok",
};

myMessage.Show();

Running this code results in a message box at the top of the screen, as shown in Figure 17.

FIGURE 17 Simple CustomMessageBox

The underlying page is obscured with a semitransparent overlay. The Caption property is shown in larger text at the top of the message box, and the Message is shown in smaller text. The Caption should be the title of the message box, and the Message is used to hold a longer set of text to convey the information to the user.

In addition to the simple Caption and Message, you can also specify the Content of the message box to show specialized controls as necessary. For example, you could have a HyperlinkButton that enables the user to navigate to a specified page:

var link = new HyperlinkButton()
{
  Content = "About...",
  NavigateUri = new Uri("http://wp7book.com")
};

var myMessage = new CustomMessageBox()
{
  Caption = "A Custom MessageBox",
  Message = "This is a custom MessageBox example.",
  LeftButtonContent = "cancel",
  RightButtonContent = "ok",
  Content = link,
};

myMessage.Show();

In this case, creating a complex control (for example, HyperlinkButton) and then assigning it to the Content of the control places it after the Message, as shown in Figure 18.

FIGURE 18 Using Content in the CustomMessageBox

You can also specify that the CustomMessageBox is a full-screen message box by specifying the IsFullScreen property. You can see this same message box with the IsFullScreen flag enabled in Figure 19.

FIGURE 19 The CustomMessageBox in Full Screen Mode

The CustomMessageBox class has the concept of a left and right button. When the user selects either of these, the message box is closed. The user can also press the back button to close the message box without selecting a button. You will want to be able to know which button (if any) was pressed. To deal with this, you’ll need to handle the Dismissed event as shown:

var myMessage = new CustomMessageBox()
{
  Caption = "A Custom MessageBox",
  Message = "This is a custom MessageBox example.",
  LeftButtonContent = "cancel",
  RightButtonContent = "ok",
};

myMessage.Dismissed += myMessage_Dismissed;

myMessage.Show();

The event handler will be passed however the user actually dismissed the message box. You can test this by checking the event arguments of the event:

void myMessage_Dismissed(object sender, DismissedEventArgs e)
{
  switch (e.Result)
  {
    case CustomMessageBoxResult.RightButton:
      results.Text = "Right";
      break;
    case CustomMessageBoxResult.LeftButton:
      results.Text = "Left";
      break;
    case CustomMessageBoxResult.None:
    default: // Back button or escape
      results.Text = "None";
      break;
  }
}

The DismissedEventArgs contains a property called Result that contains the type of dismissal the message box handled. As the code here shows, you can see whether the left or right button was pressed. If neither was pressed, the result will contain the CustomMessageBoxResult.None as the value. In this way, you can handle the dismissal correctly.