Introduction to Windows Phone 7 and Page Navigation

By Rosario A.

First we need to join Visual Studio 2010 and select the Windows Phone Application project

Solution Explorer
This is the appearance in the Solution Explorer for the generated project. Instead of quoting the entire content of each file, I will describe its purpose.

ApplicationIcon.png
This image should be replaced with the one that is going to represent the application. It is the one that the users will see in the phone application. Make sure it is memorable.

App.xaml
The idea is to see this file as the web.config in ASP.NET. Here is where you will find comprehensive data and application settings. It is also where I prefer to keep my styles, even thought is not required to place them there.

App.xaml.cs
The underlying code for the previous file; this is where the off-activation cycle (tombstoning) is handled. The concept of off-activation will be covered on day # 14 of the 31 days of Windows Phone.

AppManifest.xml
A simple file with the application manifest required to generate the XAP package.

AssemblyInfo.cs
Another configuration file that contains meta-information such as name and program version and which is incorporated in the final assembly.

Background.png
This is the image that will be used when the application is posted on the home screen. The beating is to use a similar design to ApplicationIcon.png.

MainPage.xaml
The first page of the application. In almost all cases, it should NOT be the only page. The phone knows how to handle the forward and backward between pages and should not be accumulating all the functionality of the application in a single xaml file. Segment it. You will thank me later. We will cover in depth the issue of page navigation tomorrow morning, day # 2 of the 31 days of Windows Phone.

MainPage.xaml.cs
Contains the code-behind file for MainPage.xaml. When you need things to happen in the code, here is where they usually are written. Almost always it is necessary to interact with objects in the XAML file. During the series we will cover a lot of issues that require us to write code in this file (and similar to code-behind).

SplashScreenImage.jpg
The default image will be displayed while the application loads. It can be replaced with another of our liking, but remember that its only purpose is to notify the user that the delay is because the application is loading.

WMAppManifest.xml
Another file with metadata describing specific aspects of the application such as title, location of icons, and similar skills.

Navigation among pages

We have several pages and want to give the user a way to move between them. For this we will build a simple graphical interface navigation that allows us to do that.

1) Create a Windows Phone Application

2) Add several pages with Windows Phone Portrait

There were created three vertical pages: Pasta.xaml, Sauce.xaml and Cheese.xaml. We will associate pages using various methods.

3) Change the title of each page to distinguish them
Each page has an element created XAML (TextBlock) called PageTitle, which is assigned the string "page name ". It’s necessary to change it in each so that is evident in what page you're working.

4) Create some links on MainPage.xaml
There are several ways to create links between pages. The first is using only XAML. For this we use the HyperLinkButton:

                 NavigateUri="/Pasta.xaml"

                 Height="30"

                 Name="hyperlinkButton1"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left"/>

                 NavigateUri="/Cheese.xaml"

                 Height="30"

                 Name="hyperlinkButton2"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left" />

                 NavigateUri="/Sauce.xaml"

                 Height="30"

                 Name="hyperlinkButton3"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left" />

When running the project it should be possible to click on either button links and go to the specific page (assuming you have the same page as me). By using the back button we will go to the previous screen. If you go back far enough, you exit the application to pass beyond the first screen.

5) Going to sites via code
If you prefer to use code instead of just using XAML, you can use any XAML of your choice. There will be created three buttons and each pointing to the same event handler. In the following C # code you will find out which button was pressed and then go to the appropriate page. The original function of the back button is still available in its entirety.

XAML

        Height="72"

        Name="BotónPasta"

        Width="160"

        Click="Botón_Click"/>

        Height="72"

        Name="BotónQueso"

        Width="160"

        Click="Botón_Click" />

        Height="72"

        Name="BotónSalsa"

        Width="160"

        Click="Botón_Click" />

C#

private void Botón_Click(object sender, RoutedEventArgs e)

{

    Button botónPulsado = sender as Button;

    switch (botónPulsado.Name)

    {

        case "BotónPasta":

            NavigationService

                   .Navigate(new Uri("/Pasta.xaml",

                                     UriKind.Relative));

            break;

        case "BotónQueso":

            NavigationService

                   .Navigate(new Uri("/Cheese.xaml",

                                     UriKind.Relative));

            break;

        case "BotónSalsa":

            NavigationService

                   .Navigate(new Uri("/Sauce.xaml",

                                     UriKind.Relative));

            break;

    }

}

As you can see, all user actions are recorded, allowing back on the path taken by simply using the NavigationService.