Navigating Among Pages in Windows Phone 8.1

Introduction

This article shows how to navigate among pages in Windows Phone 8.1. We will also see how to pass parameters between pages (simple string type parameters as well as object parameters).

Step 1

To build a Windows Phone 8.1 application, ensure you have Visual Studio 2013 and the Windows Phone 8.1 SDK installed in your system.

Go to "New Project". Under "Installed" > "Templates" > "Visual C#" > "Store Apps" select "Windows Phone Apps" then select "Blank App (Windows Phone)" and provide it a name as you choose (here I am using "NavigationWP8.1").

Step 2

Navigate to the "MainPage.xaml" section of the project and add a "Button" control that helps to navigate between pages and one "TextBlock" control with the heading Page 1.

<Grid>
    <TextBlock Text="Page 1" Style="{StaticResource HeaderTextBlockStyle}" Width="200" Margin="10,1,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <Button x:Name="NavigateBtn" Content="Go to Page 2" HorizontalAlignment="Left" Height="120" Margin="75,275,0,0" VerticalAlignment="Top" Width="240" FontSize="36" Click="NavigateBtn_Click"/>
</Grid>

Your MainPage will look like this:

Step 3

Now in the Solution Explorer right-click on the solution file and in the Add menu option click on the new item.

A window will then appear; click on the Blank Page and give it a name (I have used the name "Page2.xaml"). A blank page in your project will then be formed.

Step 4

Now add a TextBlock Control to the project.

<Grid>
    <TextBlock Text="Page 2" Style="{StaticResource HeaderTextBlockStyle}" Width="200" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>

Step 5

Now go to the MainPage and navigate to the Event of the Button you have added to the project. Add the following line of code:

private void NavigateBtn_Click(object sender, RoutedEventArgs e)
 {
     //Navigate to the Next Page
     Frame.Navigate(typeof(Page2xaml));
 }

Now compile and run the project, when you click on the button in your MainPage of the project , you will then be navigated to the Page2 of the project.

Step 6

Now it's time to pass a parameter from MainPage to the Page2.xaml of the project.

To show the content of the passing parameter in the Page2.xaml we need to add a TextBlock in Page2.xaml as in the following:

<TextBlock x:Name="paramTextBlock" Text="" FontSize="36" Height="100" Margin="10,219,25,321" TextWrapping="Wrap"/>

Step 7

In the Button event of MainPage.xaml of the project add the following line of code:

private void NavigateBtn_Click(object sender, RoutedEventArgs e)
 {
     //Navigate to the Next Page
     // Frame.Navigate(typeof(Page2xaml));
     //Navigate with the Parameter
     Frame.Navigate(typeof(Page2xaml), "Parameter from Page 1");
 }

Now Navigate to the Page2.xaml.cs of the Project and in the OnNavigated Method add the following line of code:

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     //Taking the Parameter recieved by NavigationEventArgs e
     paramTextBlock.Text = e.Parameter.ToString();
 }

Compile and run the project . Now by clicking the button you will be navigated to the next page with the parameters you passed from MainPage.

Step 8

Now suppose if you wanted to pass the object of a class from MainPage to the Page2.xaml.

For this, first of all we must create a class for the project. Right-click on the solution file and in the Add option click on Class.

Name the class, I named it Class1.

Now in the class that we created add the following lines of code:

class Class1
 {
     public string data1 = "Value 1 from Class";
     public int data2 = 2;
 }

Step 9

Now navigate to the Button event of the MainPage and add the following lines of code:

private void NavigateBtn_Click(object sender, RoutedEventArgs e)
 {
     //Navigate to the Next Page
     // Frame.Navigate(typeof(Page2xaml));
     //Navigate with the Parameter
     // Frame.Navigate(typeof(Page2xaml), "Parameter from Page 1");
     //Passing an object as a Parameter
     //creating an object for the class -Class1
     Class1 myClass = new Class1();
     Frame.Navigate(typeof(Page2xaml), myClass);
 }

Step 10

Go to the Page2.xaml.cs in the OnNavigated add the following lines of code:

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     //Taking the Parameter recieved by NavigationEventArgs e
     // paramTextBlock.Text = e.Parameter.ToString();
     //creating a var type variable and save the object parameter from page 1
     //and typecasting it with the Class we have created
     var myObject = (Class1) e.Parameter;
     paramTextBlock.Text = myObject.data1;
     //we can also use other information or data from the class
     //like
     // paramTextBlock.Text = myObject.data2.ToString();
 }

Compile and run your project, when you click on the button it will be navigated to the Page2 with the Object as a parameter.

That's all for the article. If you have any query then feel free to ask.

Thanks. I am including the source code also.