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:

Open Visual Studio Express 2012 for Windows 8
Choose "File" -> "New" -> "Project..."; here the New Projects Dialog Box will be opened
From the installed application panel select "Visual C#" then Select "Windows Store Apps"
From the middle panel select "Blank application" & press the Enter key for the project name "NavigationDemo"
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:

Go to the Solution Explorer.
Right-click on the projects then select "Add New Item". The Add New Item dialog box opens.
In the "Installed" pane, expand "Visual C#"
Select the "Windows Store app" template type
From the middle panel, select "Basic Page" with the name "BasicPage1"
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".

4 Comments

Join the conversation! Your thoughts help the community grow.

Sultan Zaman11y ago
What if I want to navigate to a page without any button click event?
raj jariwala11y ago
same error like mayanja lawrence what can i do?
James Croft11y ago
Beginner developers will find this very useful. There are plenty of ways of expanding on this tutorial using MVVM Light and creating navigation aware view models tied together with a navigation provider which will do the work for you with very little code.
mayanja lawrence12y ago
Error 1 'navigation_Demo.MainPage' does not contain a definition for 'Frame' and no extension method 'Frame' accepting a first argument of type 'navigation_Demo.MainPage' could be found (are you missing a using directive or an assembly reference?) c:\users\pml\documents\visual studio 2010\Projects\navigation Demo\navigation Demo\MainPage.xaml.cs 26 17 navigation Demoit showed the above error