How to perform page navigation on Windows Phone 8
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
This topic will show you how to navigate back and forth between different pages of content in your app.
This topic contains the following sections.
Creating an additional page
In this section, you will create an additional page of content that you can navigate to from your app main page.
To create an additional page
Create a new project by selecting the File | New Project menu command.
The New Project window will be displayed. Expand the Visual C# templates, and then select the Windows Phone templates.
Select the **Windows Phone App ** template. Fill in the project name as desired.
From the designer view on MainPage.xaml, select page title and change this title text to main page in the Text properties or in the XAML directly.
.png)
Right-click your project name in the Solution Explorer, select Add from the menu, and then New Item.
Choose Windows Phone Portrait Page, change the name to SecondPage, and select Add at the bottom of the page.
From the designer view on SecondPage.xaml, select page title and change this title text to second page in the Text properties or in the XAML directly.
Navigating between pages
This section will show you how to navigate back and forth between your MainPage.xaml and SecondPage.xaml.
To navigate between pages
On MainPage.xaml, drag a HyperlinkButton control from the Toolbox onto the designer surface. Select the control and change the Content property to Navigate to Second Page or do this directly in the XAML. You may need to expand the control width to see all of the text.
Double-click the hyperlink button to add an event handler for the hyperlink click event. The MainPage.xaml.cs file will open.
For the hyperlinkButton1_Click event handler, add the following code:
private void hyperlinkButton1_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative)); }Private Sub hyperlinkButton1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) NavigationService.Navigate(New Uri("/SecondPage.xaml", UriKind.Relative)) End Sub
Note
You can also accomplish the above in the MainPage.xaml by setting the NavigateUri property for the hyperlink control to the second page. For example: NavigateUri = “/SecondPage.xaml”
On SecondPage.xaml, drag a Button control onto the designer surface. Select the control and change the Content property to Navigate Back to Main Page or do this directly in the XAML. You may need to expand the control width to see all of the text.
Double-click the button to add an event handler for the button click event. The SecondPage.xaml.cs file will open.
For the button1_Click event handler, add the following code:
private void button1_Click(object sender, RoutedEventArgs e) { NavigationService.GoBack(); }Private Sub button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) NavigationService.GoBack() End SubRun the app by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the app.
When you run the app, you will see that it consists of two pages: the main page and a second page. You can navigate from the main page to the second page using a hyperlink with the destination URI configured in its event handler. You can return from the second page to the main page by using the GoBack() method of the navigation service.
Note
Although the GoBack() method was used in this example, the hardware Back button would also have the effect of returning to the previous page.
.png) |
.png) |
Passing parameters
In this section, you will take text from one page and add the text to a text block control on another page. You will use the previous project for the following procedures.
To pass string data from page to page
On MainPage.xaml, drag a TextBox control and a Button control from the Toolbox onto the designer surface and place the controls side by side. Clear the text already present in the TextBox control in the control properties. For the Button control, rename the control to passParam and change the button text to Go in either the control properties or in the XAML directly.
Double-click the Go button to add an event handler for the button click event. The MainPage.xaml.cs file will open.
For the passParam_Click event handler, add the following code:
private void passParam_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative)); }Private Sub passParam_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) NavigationService.Navigate(New Uri("/SecondPage.xaml?msg=" & textBox1.Text, UriKind.Relative)) End Sub
Note
This line of code will be used to navigate to the second page content and pass the string data entered in the newly created TextBox.
On SecondPage.xaml, drag a TextBlock control from the Toolbox onto the designer surface. Clear the text already present in the TextBlock control in the control properties. You may need to expand the height and width of the control and choose a larger font size for easier viewing. Also name the TextBlock you have created to textBlock1 for this example.
On SecondPage.xaml.cs, create the following method:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e); string msg = ""; if (NavigationContext.QueryString.TryGetValue("msg", out msg)) textBlock1.Text = msg; }Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs) MyBase.OnNavigatedTo(e) Dim msg As String = "" If NavigationContext.QueryString.TryGetValue("msg", msg) Then textBlock1.Text = msg End If End SubRun the app by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the app.
On the main page, enter some text into the TextBox control and tap Go. When you reach the second page, your typed text should be visible in the TextBlock control on the second page.
.png) |
.png) |