Page Navigation in Windows Phone 8 Application

This article shows how to navigate from one page to another as well as how to a parameter or value from one page to another. In the previous tutorials, we saw:

• How to install Windows Phone 8 SDK
• Create your first Windows Phone 8 Application. 

Page navigation is used to navigate from one page to another in Windows Phone 8. Navigation is managed by the NavigationService class.

The NavigationService provides the Navigate method to navigate to the content specified by a Uniform Resource Identifier (URI). The Navigate method takes a URI that is the name of the page on which you want to navigate.

 

Let's Begin

1. Navigation from one page to another

Create a New Windows Phone Application and select Windows Phone 8.0 as a target Windows Phone OS for this application and click on OK. Drop a button control into MainPage.xaml as shown in the following image and name it btn_navigationPage.



MainPage.xaml Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Name="btn_navigationPage"
                    Content="Navigate between page"
                    VerticalAlignment="Top">
            </Button>
</Grid>

Now, right-click on the project, Add, then click on New Item.

 

Add a page (name it AboutPage.xaml).

 

Add a HyperlinkButton control (named it hlb_GoBack). Design the UI of the page as in the following image.

 

AboutPage.xaml Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
            <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus nisl, tempor sit amet sollicitudin ut, finibus

ullamcorper nisl. Nulla facilisi." TextWrapping="Wrap"></TextBlock>
            <HyperlinkButton Name="hlb_GoBack" Content="Go Back"/>
            </StackPanel>
</Grid>

Now, go to MainPage.xaml and double-click the btn_navigationPage button to create a click event and add the following code:

private void btn_navigationPage_Click(object sender, RoutedEventArgs e)
{
        NavigationService.Navigate(new Uri("/AboutPage.xaml",UriKind.Relative));
}

In the preceding code, we have called the Navigate method that navigates to the content specified by the Uniform Resource Identifier. We set UriKind.Relative because AboutPage.xaml is part of the same project or XAP file. We have already added a HyperlinkButton on AboutPage.xaml. We will use this for navigating back to the previous page. (We don't need to code for the hardware back key button in Windows Phone for navigating back to the previous page.)

Double-click on it to generate its click event and add the following lines of code.

private void hlb_GoBack_Click(object sender, RoutedEventArgs e)
{
        //Navigate to most recent entry in the back navigation history
        NavigationService.GoBack();
}

The NavigationService.GoBack() method redirects the user to the previous page.

Preview

 

 

2. parameter/value from one page to another

Let's create a new project and add a page (name it FillDetails.xaml). Drop a TextBox (named txt_Name) and Button (named btn_Submit) control onto it.

 

FillDetails.xaml Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <StackPanel>
            <TextBlock Text="Enter your Name:"></TextBlock>
            <TextBox Name="txt_Name"></TextBox>
            <Button Name="btn_Submit" Content="Submit"></Button>
      </StackPanel>
</Grid>

Add another page (named DisplayDetails.xaml) on which we will display the data ed from the FillDetails.xaml page. 

 

Now, go to the FillDetails.xaml page and create a click event of btn_Submit by double-clicking on it. 

private void btn_Submit_Click(object sender, RoutedEventArgs e)
{
        // Checking txt_Name is not empty
        if (txt_Name.Text != "")
        {
           NavigationService.Navigate(new Uri("/DisplayDetails.xaml?name=" + txt_Name.Text, UriKind.Relative));
        }
        else
        {
           MessageBox.Show("Please Provide Name!");
        }
}

In the preceding code, we ed a name as a query string parameter in the URI. Open the DisplayDetails.xaml.cs code and override the OnNavigatedTo method.

The OnNavigatedTo method is called when the page becomes the active page in a frame. Get the value from the query string and display it on lbl_display using the Text property.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
     base.OnNavigatedTo(e);
     string name = "";
     if(NavigationContext.QueryString.TryGetValue("name", out name))
     {
          lbl_display.Text = "Hello! " + name+"\n Welcome to Windows Phone 8 Apps Development Tutorial Series.";
     }
}

Preview

 

I hope you like this. Thanks.