Message Dialog in Windows Store Apps

Introduction

Today I am going to explain how to create a Message Dialog Box. This is usefull when someone wants a confirmation that he or she wants be proceed or not. Also when permission is needed to continue etc. For example, a user fills a form or data; when he submits it, a dialog is shown that asks the user for confirmation to be proceed. So in this way this is also useful for security, since the user again verifies his or her details and if he agrees then only then does he proceed, otherwise the entries are again filled in by the user.

To use the Message Dialog we use the MessageDialog class that is present in the Windows.UI.Popup namespace. This class only applies to Windows Store apps. We can pass one or two string parameters in this class at the time of initialization. If I supply one string parameter then that means this class displays an untitled message dialog, and if I select two string parameters then this means that this class displays a titled message dialog. For example:

var messageDialog = new Windows.UI.Popups.MessageDialog("Are you Want to Continue?");

var messageDialog = new Windows.UI.Popups.MessageDialog("Are you Want to Continue?","Confirmation Message");

This class has various properties but in this article I use the Command that is used to get the set of commands that appear in the command bar of the message dialog.

Now to see how it works let's use the following instructions.

Step 1

Open Visual Studio 2012 and click File -> New -> Project. Then Select Windows Store from the Visual C# template and BlankPage in the center pane and give the name of your application as "Message Dialog".

Step 2

Perform Some designing by writing the XAML code in the MainPage.xaml file as,

<Page

    x:Class="MessageDialog.MainPage"

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

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

    xmlns:local="using:MessageDialog"

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

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

    mc:Ignorable="d">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FFA8CF89" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Grid.RowDefinitions>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>           

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="350"/>

            <ColumnDefinition Width="350"/>          

        </Grid.ColumnDefinitions>

        <TextBlock Text="Enter Employee Details" FontSize="25" Grid.Row="0" Grid.Column="1" Margin="0,20,0,0"/>

        <TextBlock Text="Employee Name" FontSize="20" Grid.Row="1" Grid.Column="0" Height="50" Width="300" />

        <TextBox Grid.Row="1" Grid.Column="1" Height="50" Width="300" Name="emp_name" />

        <TextBlock Text="Employee Address" FontSize="20" Grid.Row="2" Grid.Column="0" Height="50" Width="300" />

        <TextBox Grid.Row="2" Grid.Column="1" Height="50" Width="300" Name="emp_address" />

        <TextBlock Text="Employee Contact" FontSize="20" Grid.Row="3" Grid.Column="0" Height="50" Width="300" />

        <TextBox Grid.Row="3" Grid.Column="1" Height="50" Width="300" Name="emp_contact" />

        <TextBlock Text="Employee Email" FontSize="20" Grid.Row="4" Grid.Column="0" Height="50" Width="300" />

        <TextBox Grid.Row="4" Grid.Column="1" Height="50" Width="300" Name="emp_email" />    

        <Button Content="Proceed" Grid.Row="5" Grid.Column="1" Height="50" Width="250"  Click="Button_Click_1" Margin="64,27,0,23"/>

        <TextBlock  Name="output" Grid.Row="5" Grid.Column="0" Width="300" FontSize="25" Foreground="#FFEA2B2B" />       

    </Grid>

</Page>

Step 3

Write the following code in the MainPage.xaml.cs file:
 

namespace MessageDialog

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private async void Button_Click_1(object sender, RoutedEventArgs e)

        {

            var messageDialog = new Windows.UI.Popups.MessageDialog("Are you Want to Continue?", "Confirmation Message");

            // Add commands and set their callbacks

            messageDialog.Commands.Add(new UICommand("Yes", (command) =>

            {

                output.Text = "Hello !!!" + emp_name.Text;

            }));

            messageDialog.Commands.Add(new UICommand("No", (command) =>

            {

                output.Text = "Enter Details Again";

                emp_name.Text = "";

                emp_address.Text = "";

                emp_email.Text = "";

                emp_contact.Text = "";

            }));

            // Set the command that will be invoked by default

            messageDialog.DefaultCommandIndex = 1;

            // Show the message dialog

            await messageDialog.ShowAsync();

        }

    }

}

Step 4

Run the application to see the output. The output looks like:

After filling in all the details when the user click on the proceeds button a Message Dialog is shown as:



When the user selects the Yes option in this then the form shows the name of the user as:



When No is selected it will say to enter the details again.



Summary

In this article I explained how to work with a Message Dialog in Windows Store apps.