Transformation of Data in Page Navigation in Windows Store App

When you create a Windows 8 App in Visual Studio 2012  then you can create more than one page in the application. You can navigate among the pages and also transfer data from one page to another page. To create an app with multiple pages you first create an app then add pages to that app. In this article I describe how to create a Metro style app and then adding pages to that app and after that transferring of data from one page to another page.

Creation of Windows 8 App

1. First start Visual Studio 2012
2. Click on "File"
3. Select "New"
4. Select "Project..."
5. Select Visual C# or Visual Basic
6. Now select Windows Store
7. Then select Blank app (XAML)
8. Give a name to your project and then give a location with the help of Browse
9. Click OK; now your project is created

Now to add pages to your project use these steps:

1. Right-click on the project name
2. Select new
3. Select blank page
4. Give a name to your page
5. Click Ok
6. Repeat these steps to add more pages.

Now write the following code to your page1.xaml for adding a text block (like label in ASP.Net), textbox and a hyperlink button. You can also simply drag and droop these controls. You write this code in the lower half and the design is shown in the upper half.

<Page

    x:Class="navigation.page1"

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

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

    xmlns:local="using:navigation"

    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}">

        <StackPanel>

            <TextBlock Name="txt1" Text="First page" FontSize="22" Margin="594,31,622,687" Height="50" Width="150"/>

        </StackPanel>

        <StackPanel Orientation="Vertical" Margin="150,250,0,0">

        <StackPanel Orientation="Horizontal" >           

            <TextBlock Name="txtb_f_name" Text="Please enter your  Name    " FontSize="22"/>               

            <TextBox Name="txtF_name" Height="50" Width="150"></TextBox>

        </StackPanel>

        </StackPanel>

        <StackPanel Grid.Row="1" Margin="550,250,0,5">

            <HyperlinkButton x:Name="btn1" Content="Please click here to go second page" FontSize="22" Margin="104,0,0,0" Width="412" Click="btn1_Click"/>

        </StackPanel>

    </Grid>
</Page>

Your first page will look like the following:

Now write the following code to your page2.xaml:

<Page

    x:Class="navigation.page2"

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

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

    xmlns:local="using:navigation"

    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}">

        <StackPanel Margin="463,10,-463,-10">

            <TextBlock Name="txt2" Text="My_Second page" FontSize="22"/>
       </StackPanel>

        <StackPanel Orientation="Vertical" Margin="150,200,0,0">

            <StackPanel Orientation="Horizontal">

                <TextBlock Name="txtb_name" Text=" Your name " FontSize="22"></TextBlock>

                <TextBox Name="txt_name" Width="200" Height="50" TextChanged="txt_name_TextChanged"></TextBox>

            </StackPanel>

        </StackPanel>

        <StackPanel Grid.Row="1" Margin=" 550,200,0,0">

            <HyperlinkButton Name="btn2" Content=" Please click here to go  first page " FontSize="22" Click="btn2_Click"></HyperlinkButton>

        </StackPanel>

    </Grid>

</Page>

Your second page will look like the following:



For navigation and transfer of data from the first page to the second page write the following code on the page1.xaml.cs for the click event of the hyper link button:

private void btn1_Click(object sender, RoutedEventArgs e)
{

    this.Frame.Navigate(typeof(page2),txtF_name.Text);  //for navigating the second page and transfer the value of textbox from 1st page to the 2nd page.

}

Note : Frame is a class that contains the methods Navigate, GoBack and GoForwerd.

The code for the second page (page2.xaml.cs) for receiving data from the first page is the following code in page2.xaml.cs:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
      string str = e.Parameter as string;
      if (!string.IsNullOrWhiteSpace(str))
      {
           txt_name.Text = str;
      }
      else
      {          
        txt_name.Text = "PLease ente ryour on first page ";
      }
}

For navigation from the second page (page2) to page1 write the following code for the click of the hyperlink button:

private void btn2_Click(object sender, RoutedEventArgs e)

{           

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

}

Summary

In this article I explained creation of Windows 8 apps and Navigation and transformation of data from one page to another page. I hope you understand navigation and transformation of data from one page to other page.