×
Namespaces

Variants
Actions

Coding4Fun - using the AboutPrompt control

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to use the "AboutPrompt " control from the Coding4Fun toolkit in a Windows Phone application.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: About Page Sample
Tested with
SDK: Windows Phone SDK 8.0
Devices(s): Nokia Lumia 820
Compatibility
Platform(s): Windows Phone 7.5 and later
Windows Phone 8
Windows Phone 7.5
Article
Keywords: Coding4Fun Toolkit, About Page
Created: saramgsilva (18 Mar 2013)
Last edited: croozeus (12 Sep 2013)

Contents

Introduction

The Coding4Fun Toolkit provides AboutPrompt, an "About" implementation that can be used to very quickly and easily create a basic informational prompt for an application. The prompt has default fields for Title, WaterMark, VersionNumber, Body, Footer and has an associated popup (AboutPersonItem) which is intended for displaying additional information about people or companies referenced from the prompt. The "Body" can be used for adding any "free form" controls needed by the application. The main functionality provided by AboutPrompt is well covered by geekchamp.com.

This code example provides a specific implementation of a basic prompt that displays the following information:

  • Application name
  • Application version
  • Copyright
  • Summary/overview of app
  • Website, Support and Privacy Policy
About for Windows Phone application using Coding4Fun control

Implementation

We need to start with project creation, in this case we can choose the target we want because this feature in general is independent of the target. After, we need to install the Coding4Fun Nuget package:

Coding4Fun installPackage.png


Let's add the control to our application:

  private void BtnAboutClick(object sender, EventArgs e)
{
var aboutprompt = new AboutPrompt ();
aboutprompt.Show();
}

After this, run the application. Like we can see, we have the Name and the Version for the "About" feature, but it can have more details.

To add more information we can create a UserControl with additional information and at the end it only needs to be added in the Body.

Let's do it!

To keep congruence with our sample from Advanced About Page for Windows Phone apps, we will use a similar interface to our initial source code.


AboutControl.xaml

<UserControl x:Class="NokiaDev.AboutPageSample.Controls.AboutControl"
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="480" d:DesignWidth="480">
 
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<StackPanel Margin="0,-12,0,24">
<TextBlock Style="{StaticResource PhoneTextLargeStyle}" Text="by saramgsilva" />
 
<TextBlock Style="{StaticResource PhoneTextNormalStyle}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Margin="12,12,0,0" FontWeight="Bold"
Text="Copyright (c) 2013 Nokia Developer Wiki." />
 
<TextBlock Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,24,0,0" FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="Wrap">
This application show an 'About page' sample for Windows Phone applications.
<LineBreak/>See more about it, please see the following reference:
</TextBlock>
<HyperlinkButton NavigateUri="http://www.developer.nokia.com/Community/Wiki/About_page_for_Windows_Phone_applications"
Foreground="{StaticResource PhoneAccentBrush}"
TargetName="_new" FontSize="{StaticResource PhoneFontSizeSmall}"
HorizontalAlignment="Left"
Content="About page for Windows Phone applications" />
 
<TextBlock Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,24,0,12" FontWeight="Bold"
Text="More informations:"
FontSize="{StaticResource PhoneFontSizeMedium}" />
 
<HyperlinkButton NavigateUri="http://www.developer.nokia.com/"
Foreground="{StaticResource PhoneAccentBrush}"
TargetName="_new"
HorizontalAlignment="Left"
Content="Website" />
 
<HyperlinkButton NavigateUri="http://www.developer.nokia.com/"
Foreground="{StaticResource PhoneAccentBrush}"
TargetName="_new"
HorizontalAlignment="Left"
Content="Support" />
 
<HyperlinkButton NavigateUri="http://www.developer.nokia.com/"
Foreground="{StaticResource PhoneAccentBrush}"
TargetName="_new"
HorizontalAlignment="Left"
Content="Privacy Policy" />
 
</StackPanel>
</Grid>
</UserControl>


HomePage.xaml

The HomePage.xaml is:

<phone:PhoneApplicationPage
x:Class="NokiaDev.AboutPageSample.Views.HomePage"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
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 Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Nokia Developer Wiki Samples" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Article" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock Text="About page for Windows Phone applications"
FontSize="{StaticResource PhoneFontSizeSmall}"
Foreground="{StaticResource PhoneAccentBrush}"
Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 
</StackPanel>
 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser Source="http://www.developer.nokia.com/Community/Wiki/About_page_for_Windows_Phone_applications" />
</Grid>
</Grid>
 
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar.about.png" Text="About" x:Name="btnAbout" Click="BtnAboutClick"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="AboutMenuItem" Text="About" Click="BtnAboutClick"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>


HomePage.xaml.cs

In the code behind we define the behaviour when we click in "About" option.

namespace NokiaDev.AboutPageSample.Views
{
using System;
 
using Coding4Fun.Toolkit.Controls;
 
using NokiaDev.AboutPageSample.Controls;
 
/// <summary>
/// The home page.
/// </summary>
public partial class HomePage
{
/// <summary>
/// Initializes a new instance of the <see cref="HomePage"/> class.
/// </summary>
public HomePage()
{
InitializeComponent();
}
 
/// <summary>
/// The button about click.
/// </summary>
/// <param name="sender">
/// The sender.
/// </param>
/// <param name="e">
/// The e.
/// </param>
private void BtnAboutClick(object sender, EventArgs e)
{
var aboutprompt = new AboutPrompt { Body = new AboutControl() };
aboutprompt.Show();
}
}
}

The final result is as shown in the screenshot in the introduction.

Summary

This code example delivers a basic "About" page using the Coding4Fun toolkit. For a more advance/customized "About Page" see Advanced About Page for Windows Phone apps.

References

This page was last modified on 12 September 2013, at 09:10.
199 page views in the last 30 days.