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_1_1fig.jpg

Step_1_2fig.jpg

Step 2: In this step we will see from where you add the assembly reference which is shown in the figures given below.

Step_2_1fig.jpg

Step_2_2fig.jpg

Step_2_3fig.jpg

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


Step_3fig.jpg

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 BorderBrush="YellowGreen" BorderThickness="2">

        <StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">

            <TextBlock Text="My User Control" FontFamily="Comic Sans MS" />

            <TextBlock Text="It's show you that how to use it with AboutPrompt" FontFamily="Comic Sans MS" />

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

                <TextBlock Text="You can add Body text here" VerticalAlignment="Center" FontFamily="Comic Sans MS" />

                <Border.Background>

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

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

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

                    </LinearGradientBrush>

                </Border.Background>

            </Border>

        </StackPanel>

    </Border>

</UserControl>

User_controlimg.jpg

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

    <!--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 AboutPrompt" Margin="9,-7,0,0" FontSize="36" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontWeight="Normal" FontStyle="Italic" />

        </StackPanel>

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

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

            <Grid.Background>

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

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

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

                </LinearGradientBrush>

            </Grid.Background>

            <Button Content="AboutPrompt with UserControl" Name="button1" Margin="23,33,6,567" FontFamily="Comic Sans MS" Click="button1_Click">

                <Button.Background>

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

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

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Height="73" HorizontalAlignment="Left" Margin="47,139,0,0" Name="button2" VerticalAlignment="Top" Width="381" Content="Prompt with PersonItem" FontFamily="Comic Sans MS" Click="button2_Click">

                <Button.Background>

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

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

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

 

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

 

Designimg.jpg

 

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.


Output0.jpg

 

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.


Output1.jpg

 

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


Output2.jpg


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

Up Next
    Ebook Download
    View all
    Learn
    View all