Navigation in Windows Phone

Introduction

Either you are developing a Windows Phone Application or a Web Application. Linking a page from another is an essential feature. This process of navigating or switching is known as Navigation. You may have used NavigateTo() in ASP.NET or, in HTML:

<a href="mySecond.html">

All are used for navigation.



Set Up

Step 1: Open Visual Studio (whatever you have), select "New Project", then choose "Silverlight for Windows Phone".

Step 2:



For the instant, we have 7 files in our Solution Explorer.

• Properties: Here, we have System Files that will take care of assembly information. For the time being, it is of no use.
• References: Here, you have your all working refrences/namespace for the application.
• App.xaml: It is a public static class that creates the viewModel of the application.
• ApplicationIcon.png: Icon of the application.
• Background.png: Icon of the application on Home Screen.
• MainPage.xaml: Default Opening Page of the application.
• SplashScreenImage.jpg: The very first image of the application is the Splash Screen Image. You may change it further. By default, it's a simple black screen.

Step 3:

Add a button to the default grid, from the toolbox. Change the text property to :"Navigate to Next page:".

You may have the following XAML code :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Content="Navigate to Next Page" Height="95" HorizontalAlignment="Left" Margin="38,73,0,0" Name="button1" VerticalAlignment="Top" Width="368" />

</Grid>

</Grid>

Step 4:

Now we need an extra page, where the application will be navigated to when the user taps (clicks) on a button.

So, add a Potrait Page from "Add New Item".



In Solution Explorer, right-click on "Root File" (in other words, WP_Navigation, what I have). Then "Add" > "New Item".

Select Windows Phone Portrait Page and change the Name to "Page2.xaml".

After that, you have Page2.xaml in your Solution Explorer.



Until now, we have a Button on the Grid and changed its text.

And an extra Page2.xaml in Solution Explorer.

Now, we will code the Click event of the button.

Step 5:

Double-click on the button to generate the click event in the back end .cs file.

After clicking you may get this:



In those blocks, use the following code:

Uri myPage2 = new Uri("/Page2.xaml", UriKind.Relative); // LINE 1

NavigationService.Navigate(myPage2); //LINE 2

What we have done in the code above is:

• Line 1: Here, we defined a URI object. URI is Uniform Resource Identifier, that locates a resource in the application.

So, you must locate your XAML page in the URI object.

We ed two arguments, the first is the name of the page (string type) and the second one is the type of URI.

URI are mainly 3 types:

1. Absolute: Local resource files, that will remain in your device.
2. Relative: Remote Files, which is not in the scope of your device. Either it is of your application's or any web services.
3. RelativeOrAbsolute: If you are in confusion, then use the following:

Uri myPage2 = new Uri("/Page2.xaml", UriKind.Relative);

And, we defined the object with the name :"myPage2:".

• Line 2: Next, we have NaviagationService Class.

And we call a static method Navigate() to navigate to that particulate URI.

So, we will write:

NavigationService.Navigate(myPage2);

And, myPage2 (URI object ) as an argument in the Navigate() method.

In shorthand, you may write this:

NavigationService.Navigate(new Uri("/Page2.xaml",UriKind.Relative))

Step 6:

Run your project and enjoy.

Moving to the next section ing a string to the navigated page.

Until now, we have tried a simple navigation.

Now, we will try something new that will navigate with some data.

Suppose you have entered your name in Page1.xaml. Page2.xaml will greet you like "Hello <Your Name>".

Step 1: In MainPage.xaml, add a Text Box and Text Block as shown in the picture.



Name the TextBox as myNameTextBox.

Step 2: Now, generate the Button's Click event as in the following:



And use the following code.

If you concentrate then then you can figure out the difference from the previous code.

Here, we used the Query String concept that is used in ASP.NET.

You see, when I 'm navigating to Page2.xaml there is an extra "name" variable that will take the value of myNameTextBox's value to itself.



Step 3: Now, we have ed the value to the next navigated page.

So, let's extract the value in Page2.xaml.

Fisrt, define an onNavigatedTo() method as in the following:

protected override void OnNavigatedTo(NavigationEventArgs e)

{

string iName;

 

if (NavigationContext.QueryString.TryGetValue("name", out iName))

{

textBlock1.Text = "Hello " + iName;

}

}

Since we need to override the method, we refine its feature.

At this instance, we need a string type variable to store that navigated value, as in: "string iName;".

In the next line we will check if there is a Query String.

In the argument, we an actual string (in other words, Query name) and the second argument is the out argument in which a query value will be stored.

In simple words, the first argument will be the same name as what you have used in MainPage.xaml in URI string and and the second argument will be the name of the local string variable to which the value will be stored.



Step 4: After execution you are supposed to get positive output.