Windows Phone 8 Dev – About Page from scratch using C# and XAML


One of the things we need to take care of before submitting apps to the Windows Store is providing technical support information such as:

  • app name
  • version info
  • contact information


The typical way to take care of this is with a About page. Here we can take care of some Store obligations and provide image credits (if required) and a way for users to rate the app.

While there are NuGet packages such as YLAD (Your Last About Dialogue) that you can use I wanted to create an About page from scratch. This meant that I had to learn the following:

  • simple page navigation
  • command bar button
  • version number
  • rate app
  • hyperlinks

Let’s start at the beginning and create an About.xaml page. Press Ctrl, Shift + A to  open the Add New Item dialogue. Select Windows Phone and Windows Phone Portrait Page (unless you need a landscape page).

Add New Item

Name the file About.xaml and then click the Add button.

Now that we have an About page but we need to be able to navigate to it using the Command bar.

Command Bar

My command bar contains an icon button, with a click event and an icon. I also set it to run minimized (see bottom of this page for icon source):


I put my command bar in MainPage.xaml. As you can see I have my about_Click event, path to my icon IconURI and the about text tag for the button.

        <shell:ApplicationBar Mode="Minimized"
            <shell:ApplicationBarIconButton Click="about_Click"
                                            Text="about" />

In MainPage.xaml.cs I have the code behind for the click event:

private void about_Click(object sender, EventArgs e)
    NavigationService.Navigate(new Uri("/About.xaml", UriKind.Relative));

As you can see it points directly to the About page that we created earlier.

Now that I had a page that I could navigate to the first challenge was to show the version number of the app.

The version number is contained in AssemblyInfo.cs and WMAppManifest.xml – the number should be kept the same in both files.

Add this code to App.xaml.cs to query the app version number:

public static string GetVersion()
            var versionAttribute = Assembly.GetExecutingAssembly().GetCustomAttributes(typeof(AssemblyFileVersionAttribute), true).FirstOrDefault() as AssemblyFileVersionAttribute;

            if (versionAttribute != null)
                return versionAttribute.Version;
            return "";

Also add the following using statement at the top of App.xaml.cs:

using System.Linq;

Then in the code behind for the About page (About.xaml.cs) add the highlighted line of code – note that we define ApplicationTitle.text here:

public About()
    ApplicationTitle.Text += " Version " + App.GetVersion();

We now have code in place to query and get the app version number but we still need to display it on the About page.

<TextBlock x:Name="ApplicationTitle"
                               Style="{StaticResource PhoneTextSubtleStyle}" />

This textblock refers back to ApplicationTitle and displays the app version number.


The next thing on my list was a Rate app button so that users could rate my app. In the code behind in About.xaml.cs I have this code:

private void Rate(object sender, RoutedEventArgs e)
    MarketplaceReviewTask marketplaceReviewTask = new MarketplaceReviewTask();

This hooks up to a simple button on my About.xaml page:

<Button Content="Rate app"
                            Click="Rate" />

When the user taps the button they get taken to this page to review the app:


This leaves the final item on my wish list for my About page – hyperlinks. I thought that this would be easier to do than it was. I was surprised that I could not put a hyperlink in a TextBlock but found that I could put one in a RichTextBlock.

This is a RichTextBlock with a hyperlink click event in my About.xaml:

<RichTextBox Margin="0,12,0,12">
            <Paragraph Foreground="#99FFFFFF">blog:
            <Hyperlink Click="Blog"></Hyperlink>

Here is the code behind in About.xaml.cs:

 private void Blog(object sender, RoutedEventArgs e)
            WebBrowserTask webBrowserTask = new WebBrowserTask();
            webBrowserTask.Uri = new Uri("");

As you can see we need to use the WebBrowserTask to activate the hyperlink. When the user taps on the link it opens in the Phone browser.

Here is the code behind for the email address hyperlink:

private void email(object sender, RoutedEventArgs e)
            EmailComposeTask emailcomposer = new EmailComposeTask();
            emailcomposer.To = "";
            emailcomposer.Subject = "Terminal 9 Support";
            //emailcomposer.Body = "This is a test mail from Email Composer";

This will allow users to email directly for app support if needed.

This is the finished About page – I’m quite happy with it – and I learned more than I thought I would.


Happy coding!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s