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

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

Now to add pages to your project use these steps:

Right-click on the project name
Select new
Select blank page
Give a name to your page
Click Ok
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">

</StackPanel>

</StackPanel>

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

</StackPanel>

</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.