Custom MessageBox in Universal Windows Platform (UWP)

 

For Universal Apps, the new APIs require you to use await MessageDialog().ShowAsync() (in Windows.UI.Popups) to bring it into line with Win 8.1.

var dialog = new MessageDialog("Your message here");
await dialog.ShowAsync();

The above code produces the result shown below:

messagebox

You can go ahead to add your custom commands such as:

dialog.Title = "Delete?";
dialog.Commands.Add(new UICommand { Label = "Yes", Id = 0 });
dialog.Commands.Add(new UICommand { Label = "No", Id = 1 });

The above implementation of message box cannot be customized to fit into your theme without really getting your hands dirty and if you don’t mind you can go ahead.

A cheap way to quickly display a custom message box in your app is to use the ContentDialog in the Universal Windows template.

ContentDialog class represents a dialog box that can be customized to contain checkboxes, hyperlinks, buttons and any other XAML content. Read more here.

To add ContentDialog, Right-Click on your root project folder, Add -> New Item -> ContentDialog, give it a name and add to your project.

contentdialog_add

Then you have this:

contentdialog_default

Your XAML code will look like this:

<ContentDialog
x:Class="CustomMessageBox.MessageDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomMessageBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TITLE"
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">

<Grid>
</Grid>
</ContentDialog>

The next thing is to remove the following part from your XAML code:

PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick"

The trick here starts by removing the default buttons and adding your own buttons (“OK” & “Cancel”) to the ContentDialog. You can style these buttons as you like and use labels apart from “OK” & “Cancel”.

<Grid>
<StackPanel Orientation="Horizontal">
<Button x:Name="OkBtn" Content="OK"></Button>
<Button x:Name="CancelBtn" Content="Cancel" Margin="10,0,0,0"></Button>
</StackPanel>
</Grid>

Next, we want to handle the click events of our buttons, this is where we will set the result of the dialog. The click events of your buttons should look like this:

 public sealed partial class MessageDisplay : ContentDialog
 {
 public MessageDisplay(string message, string title)
 {
 this.InitializeComponent();

 this.Message = message;
 this.MessageTitle = title.ToUpper();
 this.DataContext = this;
 }

 public string Message { get; set; }
 public string MessageTitle { get; set; }

 public ContentDialogResult DiagResult { get; set; }


 private void OkBtn_Click(object sender, RoutedEventArgs e)
 {
 DiagResult = ContentDialogResult.Primary;
 this.Hide();
 }

 private void CancelBtn_Click(object sender, RoutedEventArgs e)
 {
 DiagResult = ContentDialogResult.Secondary;
 this.Hide();
 }

 private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
 {
 }

 private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
 {
 }
 
 }

In the above code:

  1. We have 3 properties to hold the message to be displayed (Message), the title of the message box (MessageTitle) and the result of the dialog (DiagResult)
  2. When the user clicks OK, we set the result of the dialog to ContentDialogResult.Primary
  3. When the user clicks Cancel, we set the result of the dialog to ContentDialogResult.Secondary

Lastly, We need to show the message box that we’ve just created. We’ll do that like this:

MessageDisplay md = new MessageDisplay("This is to test how the message box displays", "Testing");

md.Closing += (s, args) =>
{
if(md.DiagResult == ContentDialogResult.Primary)
{
//Do something here if the user clicks the "OK" button
}
};

await md.ShowAsync();

The result look like this:

contentdialog_custom

If you feel stuck, you can download my code files here.

In conclusion, you can extend the ContentDialog to suit other purposes such as a login view or other information collection views. If you have any comment or you know a better way to create a custom message box and the use of ContentDialog, kindly drop a comment below. HAPPY CODING!

 

 

avatar

Oludayo Alli

Oludayo Alli is the Chief Solutions Architect at DevCrux Solutions, a programmer with more than seven years experience, a tutor and a mentor. He works with Microsoft Technologies and he's a lover of Windows Phone. He loves to collaborate, so do not hesitate to contact him at oludayo[at]devcrux[dot]com

Leave a Reply