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.

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.

Run 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.

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.

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.