×
Namespaces

Variants
Actions

Telerik RadControls - Rapid About Page for Windows Phone apps

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to create an "About" or "Information" page for a Windows Phone application, using the Project Template from Telerik RadControls.

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 ExampleTested with
Devices(s): Nokia Lumia 820
CompatibilityArticle
Created: saramgsilva (18 Mar 2013)
Last edited: croozeus (12 Sep 2013)

Contents

Introduction

Telerik RadControls have a standard application template which has optional predefined features, including an "About Page". Using this template a developer can add the "About" without adding code (all that is needed is to change some placeholder text). Of course, a developer can code to customize the page as needed.

This article shows how to create and customise the Telerik About Page. The left image below shows the default page, while the second image shows the page following our customisation:

Tip.pngTip: Telerik supply a trial version which you can use to explore all controls. Nokia Premium Developer Program members get a full licence for free!

Project creation

First install the Telerik RadControls (trial version) and create the project specifying the "About Page".

  1. Create the project:
    Creating the project
  2. Telerik has an interface for initial selection. Select the platform and Telerik references we want:
    Selecting the platform and Telerik references
  3. Select the About Box template in the following screen:
    Selecting features - About page

The resulting project structure will be:

Telerik projectScruture.png

When the application is run the application will consist of a home page. You can click "About" on this page to launch the About Page.

We can customise the prompt and how it is launched.

How to customize the About

The About Page is defined in AboutPage.xaml:

<phone:PhoneApplicationPage x:Class="NokiaDev.RadControlsSample.About"
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"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:viewModels="clr-namespace:NokiaDev.RadControlsSample.ViewModels"
Name="Root"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
SupportedOrientations="Portrait"
d:DesignHeight="768"
d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d">
 
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.DataContext>
<viewModels:CommandSampleViewModel />
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
 
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle"
Style="{StaticResource PhoneTextNormalStyle}"
Text="APP TITLE" />
<TextBlock x:Name="PageTitle"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"
Text="about" />
</StackPanel>
 
<Grid x:Name="ContentPanel"
Grid.RowSpan="2"
Margin="12,160,12,1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
 
<StackPanel>
<TextBlock Margin="12,0,12,0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding ApplicationName,
ElementName=Root}" />

 
<StackPanel Orientation="Horizontal">
<TextBlock Margin="12,0,12,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="Version number" />
<TextBlock Margin="12,0,12,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="{Binding Version,
ElementName=Root}" />

</StackPanel>
</StackPanel>
 
<TextBlock Grid.Row="1"
Margin="12,24,12,24"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneSubtleBrush}"
TextWrapping="Wrap">
This application show an 'About page' sample for Windows Phone applications.
<LineBreak />
See more about it, please see the following reference:&quot;
</TextBlock>
<HyperlinkButton Grid.Row="2"
Margin="0,12,0,0"
HorizontalAlignment="Left"
Command="{Binding SendAnEmailCommand}"
Content="technical support/feedback email"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneAccentBrush}" />
<HyperlinkButton Grid.Row="3"
Margin="0,12,0,0"
HorizontalAlignment="Left"
Command="{Binding RateThisAppCommand}"
Content="rate this app"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneAccentBrush}" />
<StackPanel Grid.Row="4"
Margin="12,0,12,50"
VerticalAlignment="Bottom">
<Image HorizontalAlignment="Left"
Source="Images/CompanyLogo.png"
Stretch="None" />
<TextBlock Margin="0,12,0,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="Copyright (c) 2013 Nokia Developer Wiki." />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="Nokia" />
</StackPanel>
</Grid>
</Grid>
 
</phone:PhoneApplicationPage>


And

public partial class About : INotifyPropertyChanged
{
/// <summary>
/// The application manifest
/// </summary>
private readonly ApplicationManifest _applicationManifest;
 
/// <summary>
/// Initializes a new instance of the <see cref="About"/> class.
/// </summary>
public About()
{
InitializeComponent();
 
// class that helps to get the application name and version (that is defined in manifest)
var applicationManifestService = new ApplicationManifestService();
_applicationManifest = applicationManifestService.GetApplicationManifest();
}
 
/// <summary>
/// The property changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
 
/// <summary>
/// Gets the application name.
/// </summary>
public string ApplicationName
{
get
{
if (_applicationManifest != null)
{
return _applicationManifest.App.Title;
}
 
return "N/D";
}
}
 
/// <summary>
/// Gets the version.
/// </summary>
public string Version
{
get
{
if (_applicationManifest != null)
{
return _applicationManifest.App.Version;
}
 
return "N/D";
}
}
 
/// <summary>
/// The on property changed.
/// </summary>
/// <param name="propertyName">
/// The property name.
/// </param>
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

How to launch the About

In the default app template the About Page is launched from the "About" link text defined in MainPage.xaml. If you search within the XAML you can see that the About is launched using GoToAbout() in C#. You can customise how the About is launched by calling this method elsewhere - for example in a menu.

<ListBoxItem Content="About" Tap="GoToAbout" />

The C# code behind (MainPage.cs) defines the method as:

        /// <summary>
/// Navigates to about page.
/// </summary>
private void GoToAbout(object sender, GestureEventArgs e)
{
this.NavigationService.Navigate(new Uri("/About.xaml", UriKind.RelativeOrAbsolute));
}


Summary

This sample

  1. Doesn't implement the MVVM pattern, but can.
  2. Uses the ApplicationManifest class from (Cimbalino toolkit - which source code is ApplicationManifestService). Represents a class for a service capable of reading from the application manifest.
  3. Uses the SendAnEmailCommand that is an implementation of ICommand for send email. This is used in support/feedback option.
  4. Uses the RateThisAppCommand that is an implementation of ICommand for rate application.

For more advanced/customized “About Page" see Advanced About Page for Windows Phone apps.

References

This page was last modified on 12 September 2013, at 05:35.
109 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×