Custom Message Box Control In WP8

Introduction

This is the first article of the series called "Demystifying WP8 Toolkit". In this series I'll explain the most used controls of the WP8 toolkit with their proper usage and demonstration.

In this article we will learn about the Custom Message Box control of the Windows Phone toolkit. In our app we can use the default message box to show alerts or messages to the user. But it is very limited. The WP8 toolkit removes the limitations of the default message box by providing a Custom Message Box control. So let's see how to get started with it.

Custom Message Box

The Custom Message Box is a control provided in WP8 toolkit for customizing the interface and content of the message box. To understand it in much better way let's start with the basic version of this message box.

In the following demo I have used the following properties of the Custom Message Box:

• Content
  It takes an object as a value. It is displayed in the message box as we see a text in our default message box. The string is also an object and can be used for adding text to the message box.
   

• Height
  To set the height of the message box. It can be set or left to auto fit as per the content size.
   

• Opacity
  To set the opacity of the message box. Value ranging from 0 to 1.
   

• Left Button Content
  It also takes an object as a value. It is the left message button of the message box.
   

• Right Button Content
  It also takes an object as a value. It is the right message button of the message box.

Before you can run the following demo you need to install a WP8 toolkit in your project. It's very easy to do this.

Installing WP8 Toolkit

Use the following procedure to install the WP8 toolkit using Nugget.

1. Open your app project (either an existing one or a new one).
    

2. From the toolbar select "Tools" -> "NuGet Package Manager" -> "Package Manager Console".
    

3. Now in the Package Manager Console type the following:
   
   Install-Package WPtoolkit
   
   After typing this you will probably see the log similar to this:
   
   install-package wptoolkit
   'WPtoolkit 4.2013.08.16' already installed.
   Adding 'WPtoolkit 4.2013.08.16' to Demo.
   Successfully added 'WPtoolkit 4.2013.08.16' to Demo.
    

4. The next step is to add its reference to the XAML page. To do this just add this line:
   
   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    

Demo

The following code demonstrates how to use the Custom Message Box with minimum settings.

XAML

<phone:PhoneApplicationPage

    x:Class="Demo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    mc:Ignorable="d"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

            <Button Content="show message box" Click="openMsgBox" Height="171" VerticalAlignment="Bottom" Margin="0,0,0,258" Grid.Row="1"></Button>

    </Grid>

</phone:PhoneApplicationPage>

C# Code Behind

using Microsoft.Phone.Controls;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Diagnostics;

using Microsoft.Phone.Tasks;

using System.Windows.Media;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

 

        }

 

        private void openMsgBox(object sender, RoutedEventArgs e)

        {

            // Create new Custom Message Box instance

            CustomMessageBox cmb = new CustomMessageBox()

            {

                // Set its content

                Content = "This is a simple message box!",

                Height = 500,

                Opacity = 0.7,

 

                // Left button of message box Button

                LeftButtonContent = "Nice!",

               

                // Right button of message box

                RightButtonContent = "Great!"

            };

 

            //Show the message box...

            cmb.Show();

        }

    }

}

The Show method is used to launch the task.

Output