Customizing Message Prompt Control in Windows Phone 7


Introduction

In this article we are going to explore how to customize a Message Prompt control in Windows Phone 7. As we have discussed about the Message Prompt control in my previous articles. Further we will discuss in details how to customize the Message Prompt control in Windows Phone 7. In this article we will use a user control and will display it inside the Message Prompt control. In the user control we are using a border content, inside it we have a stack panel with some control body. So whenever we click on the first one button then it will simply display the user control inside the Message Prompt control which you will see further. Well as we know, basically Message Prompt is an UI component that derives from the toolkit`s UserPrompt class . As its name implies it is a kind of extended popup that displays a message. A Message Prompt can display different content like Title, composite Body content, custom buttons, etc. To that first of all you will install C4F toolkit from here and then you should follow the steps given below.

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

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

my1_1.gif

my_1_2.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 will you add it.

my_2_1.gif

Step_2_2fig.gif

my_2_3.gif

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

Step_3fig.gif

Step 4: In this step first of all you will add a user control and give it a name as you prefer; the code for the Mycontrol.xaml file is given below.

Code:

<UserControl x:Class="Mymessageprompt.Mycontrol"

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

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

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

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

    mc:Ignorable="d"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    d:DesignHeight="100" d:DesignWidth="389">

    <Border BorderBrush="#FFFF0101" BorderThickness="2">

        <StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}"  Margin="0,0,0,10">

            <TextBlock Text="My UserControl with body" HorizontalAlignment="Center" FontFamily="Comic Sans MS" />

            <Border Height="100" Width="400">

                <TextBlock Text="Hey Friends you just see the Body section of the user control which will dispay as message prompt in windows phone 7."

                           TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Comic Sans MS" />

                <Border.Background>

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

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

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

                    </LinearGradientBrush>

                </Border.Background>

            </Border>

        </StackPanel>

    </Border>

</UserControl>


 Step_4_fig.gif

Step 5: In this step you will see the code for the message prompt via user control which is shown below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)

 {

    mymsgprompt = new MessagePrompt();

    mymsgprompt.Title = "My User Control";

    mymsgprompt.Body = new Mycontrol();

    mymsgprompt.Show();

 }

Step_5_fig.gif

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

 

Code:

MessagePrompt mymsgprompt;
private void button2_Click(object sender, RoutedEventArgs e)

 {

     mymsgprompt = new MessagePrompt();

     mymsgprompt.Message = "Displaying Message.";

     Button customButton = new Button() { Content = "Custom Button" };

     customButton.Click += new RoutedEventHandler(customButton_Click);

     mymsgprompt.ActionPopUpButtons.Add(customButton);

     mymsgprompt.Show();

 }

void customButton_Click(object sender, RoutedEventArgs e)

 {

     mymsgprompt.Background = new SolidColorBrush(Colors.Orange);

 }

Step_6_1fig.gif  Step_6_2fig.gif

Step 7: 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)

        {

            mymsgprompt = new MessagePrompt();

            mymsgprompt.Title = "My User Control";

            mymsgprompt.Body = new Mycontrol();

            mymsgprompt.Show();

        }

        MessagePrompt mymsgprompt;

        private void button2_Click(object sender, RoutedEventArgs e)

        {

            mymsgprompt = new MessagePrompt();

            mymsgprompt.Message = "Displaying Message.";

            Button customButton = new Button() { Content = "Custom Button" };

            customButton.Click += new RoutedEventHandler(customButton_Click);

            mymsgprompt.ActionPopUpButtons.Add(customButton);

            mymsgprompt.Show();

        }

        void customButton_Click(object sender, RoutedEventArgs e)

        {

            mymsgprompt.Background = new SolidColorBrush(Colors.Orange);

        }

    }

}
 

Step 8: 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="Customized Message Prompt" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="32">

              <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="Message Prompt via User Control" Height="91" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" 

                    VerticalAlignment="Top" Width="440" FontFamily="Comic Sans MS" FontSize="24" 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="Customized Message 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 9: In this step you just see the Design figure of the MainPage.xaml file which is given below.

 

Designfig.gif

 

Step 10: 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.


Out1.gif

 

Output 2: In this output, whenever you click on the button named Message Prompt via user control, a popup window with user control inside the Message Prompt will be opened as shown in the figure given below.


Out2.gif

 

Output 3: In this output, whenever you click on the second button then you just see a customized Message Prompt with a Button control; whenever you click on the button it's color changes, which is shown in the figure given below.


Out3.gif   Out4.gif

 

Here are some other resources which may help you.


Message Prompt in Windows Phone 7 Via WCF Service

Password Input Prompt in Windows Phone 7 Via WCF Service

Input Prompt in Windows Phone 7 Via WCF Service

Passing a Message Between Pages in Windows Phone 7

Custom Background in Windows Phone 7