Create Page Navigation in Windows Store Apps

In this article we are explaining how to create page navigation in Windows Store apps.

Introduction

Today we will create page navigation in Windows Store apps. In Windows Store apps, page navigation allows you to navigate between two pages or more than two pages. To implement page navigation in Windows Store apps you must use the Navigation method of the Frame class. In the navigation method we put the page name where you want to create a navigation link.

Step 1

Open Visual Studio 2012 and create a Windows Store app project.

New-Pro-Windows-Store-Apps.jpg

Step 2

Go to Solution Explorer and double-click on "MainPage.xaml".

Solution-Explorer-Windows-Store-Apps.jpg

Step 3

The "MainPage.xaml" page is as in the following code:

<Page

    x:Class="PageNavigation1.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:PageNavigation1"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="This is the first page click on button to go on second page" FontSize="25" VerticalAlignment="Top" Margin="329,357,0,0"/>

        <Button Content="Go" x:Name="GoBtn" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="623,418,0,0" Click="GoBtn_Click"/>

 

    </Grid>

</Page>

Step 4

Add another page with the name of  "SecondPage".

Step 5

In the "MainPace.cs" page put the following code in the button click:

private void GoBtn_Click(object sender, RoutedEventArgs

        {

            if (this.Frame != null)

            {

                this.Frame.Navigate(typeof(SecondPage));

            }

        }

Step 6

Now run the program and click on "Go" to navigate to the second page.