Navigation in Windows Store App

Introduction

Today we will talk about navigation between pages in a Metro style application. In Metro apps navigation will be implemented with the help of a navigate method of the frame class. This function has one overloaded method that will take two arguments but in this case it will take only one argument, the name of the page that we want to navigate to. In this application we will show a simple navigation from the registration page to the lagout page. In the registration page we will enter the information and click the register button; on the click event of the button we will call the navigate method for navigation to the logout page.

In the following we are including the entire code of the XAML file and the code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# -> Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page
    x:Class="App1.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App5"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Rectangle Fill="SkyBlue" Grid.Column="0" Grid.Row="0" RadiusX="20"
                   RadiusY="20" Opacity="0.8" StrokeThickness="0" />
        <Grid Grid.Column="0" Grid.Row="0" Margin="10,10,10,10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="260" />
                <ColumnDefinition Width="260" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
             <TextBlock Grid.Column="0" Grid.Row="0" Text="Registration Page" FontSize="20"
                        FontWeight="Bold" Foreground="Red"></TextBlock>
            <TextBlock Text="NAME" Margin="10,5,10,5" Grid.Row="1" Grid.Column="0"
                       FontSize="20" Foreground="BlueViolet" FontWeight="Bold" HorizontalAlignment="Right" />
            <TextBlock Text="EMAIL ID" Margin="10,5,10,5" Grid.Row="2" Grid.Column="0"
                       FontSize="20" Foreground="BlueViolet" FontWeight="Bold" HorizontalAlignment="Right"/>
            <TextBlock Text="CONTACT NO" Margin="10,5,10,5" Grid.Row="3" Grid.Column="0"
                       FontSize="20" Foreground="BlueViolet"  FontWeight="Bold" HorizontalAlignment="Right"/>
            <TextBox x:Name="eName" Margin="10,5,10,5" Grid.Row="1" Grid.Column="2"
                     FontSize="20" Foreground="Black" />
            <TextBox x:Name="id" Margin="10,5,10,5" Grid.Row="2" Grid.Column="2"
                     FontSize="20" Foreground="Black" />
            <TextBox x:Name="econt" Margin="10,5,10,5" Grid.Row="3" Grid.Column="2"
                     FontSize="20" Foreground="Black" />
           <Button x:Name="bindData" Margin="10,5,10,5" Grid.Row="4" Grid.Column="2"
                    Content="Register" FontSize="20" Background="Red" Click="bindData_Click" />
            <TextBlock x:Name="msg" Grid.Column="1" Grid.Row="4" Margin="150,20,-151,0"
                    Text="Please fill all above values" FontSize="20"
                      FontWeight="Bold"
               Foreground="Green" Visibility="Collapsed">
           </TextBlock>
        </Grid>
    </Grid>
</Page>

 Step 4 : Add a XAML page to our project where we want to navigate to; the code related to this page is given below:

Code :

<Page

    x:Class="App1.BlankPage1"

    IsTabStop="false"

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

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

    xmlns:local="using:App5"

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

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

    mc:Ignorable="d">

 

    <Grid Background="Yellow">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock Grid.Column="1" Grid.Row="0"  Text="LogOut Page"

                   FontSize="20" FontWeight="ExtraBold" Foreground="Blue"

                   Margin="20,200,20,20"></TextBlock>

         <Rectangle Grid.Column="1" Grid.Row="1" Fill="Red">

            

         </Rectangle>

        <TextBlock Grid.Column="1" Grid.Row="1" Text="Congratulation"

                   FontSize="30"  FontWeight="ExtraBold"

                   Margin="100,50"></TextBlock>

        <TextBlock Grid.Column="1" Grid.Row="1" Text="You Registered Successfully"

                   FontSize="30" FontWeight="Bold" Margin="30,100"></TextBlock>

    </Grid>

</Page>

Step 5 : The MainPage.xaml.cs file is as in the following code:

Code :

 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

 

namespace App5

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

          

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

        private void bindData_Click(object sender, RoutedEventArgs e)

        {

            if (eName.Text != "" && id.Text != "" && econt.Text != "")

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

            else

                msg.Visibility = Windows.UI.Xaml.Visibility.Visible;

        }

    }

}

Step 6 : After running this code the output looks like this: