Navigation in Windows Store App

Introduction

An app may be developed to provide various functionalities for the user. However, it is very difficult to provide all the functionalities on a single page. Therefore you may need to add multiple pages to your application. When you add multiple pages to your app, you may need navigational capability in your app. So navigation provides the ability to switch from one page to another page in a Windows Store app.

Step 1. Create a blank project and name it a navigation demo.

Step 2. Type the following code into the mainpage.XAML file.

The code above will create one text block and button in your main. xaml page as shown below.

Step 3. Add one page to your app and name it Page2.xaml. Type the following code on the page.XAML file.

The code above will add one text box containing a message that “you are on the Second Page” as shown below.

Step 4. Add the following code in the click event of the Button.

The Navigate method of the Frame class navigates from one page to another page. In our case, we want to navigate from the main page to page 2.

Passing Parameter to Frame. Navigate method

Consider the scenario that you want to pass information from one page to another page instead of simply navigating. To do this several overloaded versions of the Navigate method are available. This overloaded version you can use to pass simple string data as well as complex data like a collection. Let's do it practically.

Step 1. Create a blank project or modify the preceding project. Type the following code into the mainpage.XAML file.

Step 2. Add another page to your project and name it Page2.xaml. Add one text block on page2.xaml.

Step 3. On the click event of the Say Hello Button type the following code.

Step 4. In the Page2.xaml.cs file inside the OnNavigatedTo (NavigationEventArgs e) event handler type the following code.

The Navigate method gets the parameter value passed from the previous page to the current page.

Let's see the output. Run your app. Type a name into the text box and click on the Say Hello button. If everything goes fine then you will get the following output.

Passing multiple values from one page to another page

Sometimes you might need to pass more than one value from one page to another page. In this situation, the preceding approach is not useful. To do it we need to create a custom class or navigational context class. Let's do it practically.

Step 1. Create a new project and name it PassingMultipleValues.

Add a page to the project and name it page2.xaml.

Step 2. Right-click on the project select "Add class" then name it EmpDataContex.

Write the following code in the EmpDataContex.cs file.

Step 3. Design the mainpage.xaml as shown below.

Step 4. On the click event of the "save data" button write the following code.

Step 5. Add one text block on page2.xaml and set the name property of the text block to text.

Type the following code in the OnNavigatedTo method to retrieve a value from the dt object on page 2.

Step 6. Run your application. If everything goes fine then you will get the following output.

Click on the save data button.