Basic Page Navigation Using XAML & C# In Windows Store Apps

Introduction

Basic Navigation Among Pages using XAML & C# In Windows Store Apps

Description

Navigation is the process of navigating from one page to another page among multiples pages within the application. Microsoft Visual Studio Express 2012 provides page templates for Windows 8 that provides basic navigation support for Windows Store Apps using C# or XAML code. In this article we will use the page templates to manage navigation among multiple pages in Windows Store apps.

Step 1

Create a new project with the name "NavigationDemo" using the following:

1. Open Visual Studio Express 2012 for Windows 8
2. Choose "File" -> "New" -> "Project..."; here the New Projects Dialog Box will be opened
3. From the installed application panel select "Visual C#" then Select "Windows Store Apps"
4. From the middle panel select "Blank application" & press the Enter key for the project name "NavigationDemo"
5. Click the "Ok" button; the project will be created with the specified name

Now you need to add two pages to the project for doing the navigation, so the next step is to add the two pages.

Step 2

Add the two pages to the project using the following procedure:

1. Go to the Solution Explorer.
2. Right-click on the projects then select "Add New Item". The Add New Item dialog box opens.
3. In the "Installed" pane, expand "Visual C#" 
4. Select the "Windows Store app" template type
5. From the middle panel, select "Basic Page" with the name "BasicPage1"
6. Click "Add".

After adding the first basic page, repeat this process again to add the second page with the name "Basic Page2".
We will see the following page details in the Solution Explorer:


BasicPage1.Xaml
BasicPage1.Xaml.cs
BasicPage2.Xaml
BasicPage2.Xaml.cs

Step 3

A. Add two "Button on MainPage.xaml " for navigation 


A. And set the name through XAML code as Content="GoToBasicPage1" given here and the Navigation Page Detail here MainPage->Page1 Navigation.

B. And set the name through XAML code as Content="GoToBasicPage2" given here and the Navigation Page Detail here MainPage->Page2 Navigation.


C. Put the following code in MainPage.xaml.cs to show navigation for various pages from the main page to other pages.

Step 4

A. Adding one "Button on BasicPage1" for navigation.



B. And set the name through XAML code as Content="GoToMainPage" given here and the Navigation Page Detail here Page1->MainPage Navigation.


C. Put the following code in BasicPage1.xaml.cs to show navigation on Button_Click_1.
 
 Step 5

A. Add one "Button on BasicPage2" for navigation.

  

B. And set the name through XAML code as Content="GoToMainPage" given here and the Navigation Page Detail here Page2->MainPage Navigation.

  
C. Use the following code in BasicPage1.xaml.cs to show navigation on Button_Click_:
Step 6 

To perform navigation select "MianPage.xaml" and run it; it will be show as:

 Step 7

 1 Now click on the "GoToBasicPage1" button. You will navigate to Page 1 as shown here:

2 Click on the "GoToBasicPage2" button. You will navigate to Page 2 as shown here:

3 We can click on the "GoToMainPage" button to navigate to "ManPage" after navigating from Page1 or Page2.

4 Now we finally navigate to "ManPage".