Customizing Message Prompt Control in Windows Phone 7

Amit Maheshwari
Mar 19, 2012

10.1k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.

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.

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

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">

<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>

</Border.Background>

</Border>

</StackPanel>

</Border>

</UserControl>

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 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 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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock.Foreground>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</StackPanel>

<Grid.Background>

</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>

</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>

</Button.Background>

</Button>

</Grid>

</phone:PhoneApplicationPage>

Step 9: In this step you just see the Design figure of the MainPage.xaml file which is given below.

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.

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.

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.