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
 

How to display message using Message box in Windows phone application

In this blog post I will explain you how to display message to user through a Message box in Windows phone application.

A message box is a very non-invasive way to tell the user that something needs his attention and maybe ask for a choice of action.

 

The Message box class that we shall be using is quite limited when it comes to user customization.

In Silverlight application there are two overload methods available as shown below.

 


 

First method

The first method allow the developer to display a simple message with an OK button – as basic as it can get and it is perfect for situations where you don’t need the user to make a decision.

 

An example is shown below

Type 1:


 

 

There is no title here and no additional buttons, so this might be a limitation in some situations.

 

Second method

The second method by allowing the developer to set the title and actually select, whether there is an OK or OKCancel button set needed.

Examples are given below

 

Type 2:

Ok button with a specific heading

 


 

Type 3:

Ok and cancel button with a specific heading. We track the response from the MessageBox via MessageBoxResult in result variable.


 

Note:

When you want to check the result, you will be prompted with an enumeration of possible values and in fact, it is bigger than you expect:


Only OK and Cancel will work if checked against. Other options will simply be ignored, since there is no Yes or No button available. Now, you might think – what about None? This also isn’t an option – when the user closes the MessageBox in a non-standard manner (e.g. by pressing the Back button), the result that is automatically passed as a response is MessageBoxResult.Cancel, even if no Cancel button is pressed.

 

I have a created a simple application to display the different types of Messagebox as explained above.

You can download the full source code of the project file from the link given below.

Download full project file Messagebox,zip

You can also refer to the following blog post where I have made an efficient use of the Messagebox class to add app review reminder in Windows phone application.

http://www.windowsapptutorials.com/windows-phone/general/adding-app-review-reminder-in-windows-phone-app-without-using-rate-my-app-toolkit/