How to create a Custom MessageBox in Windows phone application

CustomMessageBox is a new control inside the Windows phone toolkit which is exactly what it sounds like, a customizable, Windows Phone-UI compliant, easy to use message box offering the following features:

 

1. Native look & feel including font sizes, layout, alignment and animations

2. Ability to display full screen or to only consume as much space as needed

3. Very simple “basic” mode with ability to easily extend it to complex scenarios

4. Customizable buttons without needing to re-template

 

In this blog post I shall explain you how to use it and will explain its different features to you.

 

Getting Started

CustomMessageBox is a component that is present in the Windows phone toolkit assembly. To use the CustomMessageBox in your app you first need to add the following toolkit into your project.

 

You can add the Windows phone toolkit to your project with the help of NuGet Package Manager.

 

1

 

If you don’t know how to integrate a toolkit with your project you can refer to the following blog post.

http://www.windowsapptutorials.com/windows-phone/how-to-integrate-a-toolkit-or-third-party-sdk-with-windows-phone-app-using-nuget-package-manager-2/

 

Different Types of Usage

 

Now I shall be explaining different uses of CustomMessageBox to you.

 

Type 1: Basic MessageBox

 

The basic usage is very similar to the default MessageBox. You need to set the different properties, add the Dismissed eventhandler when user dismisses the MessageBox and call the show method.

 

The different properties that you can customize are

 

  • Caption – sets the title caption of the message box
  • Message – the actual message to display to the user
  • LeftButtonContent, RightButtonContent – the buttons that appear on the bottom of the dialog, if you omit the text then the button won’t be shown.

 

An Example of the following type is given below

 

2

 

The code required to display the following Message is given below.

 

 

Type 2: CustomMessageBox with Content Property

 

What we have done till now is good. But what is custom comes with the content property where you insert your own content into the overall layout.  You can define your extra content in either code-behind or as a XAML resource and then set it to the Content of the CustomMessageBox.

I shall be demonstrating both the methods in this post.

 

Example 1:

Suppose you want to display the following message give below in the picture

 

3

 

The code required to display the following Message is given below.

 

 

By default the message box only takes up as much space as required but you can force it to full-screen by setting the property IsFullScreen to true.

 

Example 2:

Suppose you want to display a message box with checkbox as shown below.

 

4

 

The code required to display the following Message is given below.

 

 

Example 3:

To add a listpicker to the CustomMessagebox

 

5

 

The code required to display the following Message is given below.

 

 

Type 3: CustomMessageBox with ContentTemplate Property

You can easily predefine the data template you wish to display inside the custom message box in the Xaml window. And set the content template source directly to it.

Suppose I wish to display the following message to user

 

6

 

The steps you need to follow to display the following message are

1. Create a new data template for the above message having the name MyContentTemplate.

 

 

2. Define it inside the MainPage.xaml above the Grid named LayoutRoot as shown below.

 

7

 

3. The following code to display the custom message box with MyContenttemplate defined in the MainPage.xaml is as following

 

 

I hope this post will be helpful to you. You can download the full project source file from the link given below.

 
Download full project file Custommessagebox.zip