Using Coding4Fun Message Prompt Control in Windows Phone 7

In this article we are going to explore how to use a Message Prompt control in Windows Phone 7.


Introduction

In this article we are going to explore how to use a Message Prompt control in Windows Phone 7. After that I will describe in details how to use a Message Prompt control in Windows Phone 7. Basically in this article I will explain everything about the main features, available public API, and many examples in various scenarios. After that I will explain that basically a Message Prompt is an UI component that derives from the toolkit`s UserPrompt class. As its name says it is a kind of extended popup that displays a message. A Message Prompt can display various contents like Title, composite Body content, custom buttons, etc . To accomplish such a task first of all you will install C4F toolkit from here and then you should follow the steps given below. Let's begin with an understanding of some properties, methods and events in details which is given below.

Properties

Here we will discuss the properties of the Message Prompt control:

  • ActionPopUpButtons  The first one, named ActionPopUpButtons, is also a property of the Message Prompt control. It is a dependency property of type List<Button>. It represents a list of action buttons. You can add whatever button you prefer here and as a result it will appear immediately next to the default OK button.
  • Body The second one, named Body, is also a property of the Message Prompt control. It is a dependency property of type object. It gets or sets the Body of the MessagePrompt control.
  • IsAppBarVisible The third one, named IsAppBarVisible, is also a property of the Message Prompt control. It is a dependency property of type bool. It determine whether the app bar is visible or not.
  • IsCancelVisible The fourth one, named IsCancelVisible, is also a property of the Message Prompt control. It is a dependency property of type bool. It determines whether the cancel button is visible or not.
  • IsOpen The fifth one, named IsOpen, is also a property of the Message Prompt control. It is a read only dependency property of type bool which determines whether the popup is opened or not.
  • HasGesturesDisabled  The sixth one, named HasGesturesDisabled, is also a property of the Message Prompt control. It is a dependency property of type bool. It determines whether Gestures are disabled or not disabled.The default value is true.
  • Message Is also a property named Message. This is a dependency property of type string. It gets or sets the Message of the MessagePrompt control.
  • Overlay  Is also a property named Overlay. This is a dependency property of type Brush. It gets or sets the overlay of the MessagePrompt control.
  • Title Is also a property named Title. This is a dependency property of type string. It gets or sets the Title of the MessagePrompt control.

Methods and Events

  • Show() Is a method of the Prompt control. This method is used to show the MessagePrompt control.
  • Completed event This event occurs when the popup is closed.

Step 1: In this step, first of all we have to open a Windows Phone application; let's see how to open it.

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named Silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   

Step_1_1fig.gif

Step_1_2fig.gif

Step 2: Now in this step first of all we have to add the assemblies reference to the Windows Phone application; let's see how to add it.

Step_2_1fig.gif

Step_2_2fig.gif

Step_2_3fig.gif

Step 3: In this step you will have to add a namespace to the MainPage.xaml page which is given below.

Step_3fig.gif

Step 4: In this step you will see the code for the simple message prompt which is shown below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)

  {

     var MymsgPrompt = new MessagePrompt

     {

         Title = "Prompt Message",

         Message = "Hey it's default MessagePrompt which is popup in Windows Phone 7.",

     };
     MymsgPrompt.Show();
  }

 

Step_4fig.gif

 

Step 5: In this step we will see the code for the advance Message Prompt which is given below.

 

Code:

 

private void button2_Click(object sender, RoutedEventArgs e)

 {

     var MymsgPrompt = new MessagePrompt

     {

         Title = "Advanced Prompt Message",

         Body = new TextBlock { Text = "Hiiii this is the Body of the Coding4Fun MessagePrompt.", Foreground = new SolidColorBrush(Colors.Yellow),

         FontSize = 30.0, TextWrapping = TextWrapping.Wrap },

         IsAppBarVisible = true,

         IsCancelVisible = true

     };
     MymsgPrompt.Show();
 }

 

Step_5fig.gif

 

Step 6: In this step you will see the complete code for the MainPage.xaml.cs file whixh is given below.

 

Code:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Coding4Fun.Phone.Controls;

namespace Mymessageprompt

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }
        private void button1_Click(object sender, RoutedEventArgs e)

        {

            var MymsgPrompt = new MessagePrompt

            {

                Title = "Prompt Message",

                Message = "Hey it's default MessagePrompt which is popup in Windows Phone 7.",

            };
            MymsgPrompt.Show();

        }
        private void button2_Click(object sender, RoutedEventArgs e)

        {

            var MymsgPrompt = new MessagePrompt

            {

                Title = "Advanced Prompt Message",

                Body = new TextBlock { Text = "Hiiii this is the Body of the Coding4Fun MessagePrompt.", Foreground = new SolidColorBrush(Colors.Yellow), FontSize = 30.0, TextWrapping = TextWrapping.Wrap },

                IsAppBarVisible = true,

                IsCancelVisible = true

            };
            MymsgPrompt.Show();
        }

    }

}

 

Step 7: In this step you will see the code for the MainPage.xaml file which is given below.

 

Code:

 

<phone:PhoneApplicationPage

    x:Class="Mymessageprompt.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"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    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 x:Name="PageTitle" Text="My Message Prompt" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"

                       FontFamily="Comic Sans MS" FontSize="48">

                <TextBlock.Foreground>

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

                      <GradientStop Color="Black" Offset="0" />

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

                   </LinearGradientBrush>

                </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>

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

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Grid.Background>

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

                    <GradientStop Color="Black" Offset="0" />

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

                </LinearGradientBrush>

            </Grid.Background>

            <Button Content="Click to see Message Prompt" Height="91" HorizontalAlignment="Left" Margin="10,10,0,0"

                    Name="button1" VerticalAlignment="Top" Width="440" FontFamily="Comic Sans MS" FontSize="28" Click="button1_Click">

                <Button.Background>

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

                        <GradientStop Color="Black" Offset="0" />

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="Click to see Advance Msg Prompt" Height="91" HorizontalAlignment="Left" Margin="10,90,0,0"

                    Name="button2" VerticalAlignment="Top" Width="440" FontFamily="Comic Sans MS" FontSize="26" Click="button2_Click">

                <Button.Background>

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

                        <GradientStop Color="Black" Offset="0" />

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

        </Grid>

    </Grid> 

</phone:PhoneApplicationPage>

 

Step 8: In this step you just see the design of the MainPage.xaml file which is given below.

 

Designimg.gif

 

Step 9: In this step I am going to run the application by pressing F5 and the output regarding this is given below.

 

Output 1: It's the default output which is given below.


Output1.gif

 

Output 2: In this output whenever you click on the Click button to see the Message Prompt then a popup window will open which is shown in the figure given below.


Out2new.gif

 

Output 3: In this output whenever you click on the second one button then you just see some advance Message Prompt which is shown in the figure given below.


out3.gif

 

Here are some other resources which may help you.


Message Prompt in Windows Phone 7 Via WCF Service

A Glimpse of Coding4Fun Button Controls in Windows Phone 7

Working With Coding4Fun Toolkit MetroFlow Control in Windows Phone 7
Using Coding4Fun ColorSlider Control in Windows Phone 7

Using Coding4Fun ColorPicker Control in Windows Phone 7