Customizing AboutPrompt Control in Windows Phone 7

Introduction

In this article we are going to explore how to customize the AboutPrompt Control in Windows Phone 7. In subsequent details we will learn how it is possible to customize the AboutPrompt control in Windows Phone 7. Here in this article I will explain everything about the main features, available public API, and will provide many examples in various scenarios. Further as we know that basically the AboutPrompt is an UI component that derives from the toolkit`s abstract PopUp<T, TPopUpResult> class. Now it's time to become familiar with it in details which is given further. As its name implies it is a kind of extended popup which prompts for the OK button click. It is the control which is used to display various content like Title, VersionName, WaterMark etc. To use it first you have to download the Coding4Fun toolkit from here and follow the steps which are given below.

Step 1: In this step first of all we have to create a Windows Phone application; let's see how you to create 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: In this step we will see from where you add the assembly reference which is shown in the figures given below.

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

Step 4: In this step we will add an user control inside the Windows phone application and whose code is given below.

Code:

<UserControl x:Class="Myapp.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="300" d:DesignWidth="480">

<Border.Background>

</LinearGradientBrush>

</Border.Background>

</Border>

</StackPanel>

</Border>

</UserControl>

Step 5: In this step we will see the code for the MainPage.xaml.cs file which is shown 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 Myapp

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}
private void button1_Click(object sender, RoutedEventArgs e)

{

AboutPrompt MyAbt_p = new AboutPrompt();

MyAbt_p.Title = "Texting of User Control";

MyAbt_p.Body = new MyCOntrol();

MyAbt_p.Show();

}
private void button2_Click(object sender, RoutedEventArgs e)

{

AboutPrompt MyAbt_p = new AboutPrompt();

MyAbt_p.Title = "Prompt with PersonItem";

AboutPersonItem Myp_item = new AboutPersonItem();

Myp_item.AuthorName = "Amit";

Myp_item.EmailAddress = "[email protected]";

Myp_item.Role = "Developer";

Myp_item.WebSiteUrl = @"www.google.com";

MyAbt_p.Show(Myp_item);

}

Step 6: In this step we will see the code for the MainPage.xaml file which is shown below.

Code:

<phone:PhoneApplicationPage

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

</StackPanel>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

</Grid>

</phone:PhoneApplicationPage>

Step 7: In this step we will see the Design Figure of the MainPage.xaml file which is shown below.

Step 8: In this step we are going to run the application by pressing F5 and the output regarding it is given below.

Output 1: It's the default output of the application shown below.

Output 2: Whenever you click on the First button then you will see that a user control is displaying inside the AboutPrompt control which is shown below.

Output 3: Whenever you click on the second button then it will display personal info about the Item which is shown below.

Here are some other useful resources which may help you.

Getting Started With AboutPrompt Control in Windows Phone 7
Customizing Message Prompt Control in Windows Phone 7
WebBrowser Control With ProgressBar in Windows Phone 7
Custom Background in Windows Phone 7
AutoComplete in Windows Phone 7