Navigation on Window Phone with Silverlight: Hour 2

Overview : Navigation on Window Phone uses the same navigations techniques which are used in Silverlight. There are two important elements in the application level which are frames and pages and one important element in the device level.

Use of frame : Frames are integrated within the whole layout of a Window Phone application, and only one frame can be used throughout the application. Several characteristic related to frame are properties that can be used like full screen, orientation, the ability to expose page areas in it and provide a location for the system tray and application bar.

The system tray is an area in which system status such as battery, signal etc are displayed. Application bar on the other hand provides space for frequently used tasks.

Use of Page: A page fills up the whole content of the frame. Main characteristics of a page are title and the ability to show an application bar specifically on certain pages.

Back Button: One important element which has become standard in every window phone device is a Back button. This button is used to move one page backward. with this button present , we are advised not to add any back button in the application, unless absolutely necessary, By default the back button will also close any pop -up menu displayed and bring users back to the previous screen.

How to navigate between pages in a window phone application; let us try out in few east steps:

Step 1 : Create a new project, Window Phone Application with name Navigation.



Step 2 : Rename MainPage.xaml to Page1.xaml. Also change the text of page to My Page 1.



Step 3 : Add a page and similarly rename it to Page2.xaml and change the text to My Page 2.



Step 4 : Open Page1.xaml and drag a button and a textbox like below; rename as in image below;



Step 5 : Change the codes in the Button's click event handler into the following:

private void btnNavigate_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative);
}

Navigate is a static function from NavigationService which is used to navigate to desired pages using target URI as the parameter

Step 6 : Press F5 and see the result. Click on the Button to go forward to the next page.





We can use the Back button to return to the previous page. Additionally, if we want to go one page backwards using custom button, we can do so by typing the following code into an event handler.

Step 7 : If we do not want to use Phone back button, then we can create a custom back button on page two to navigate back.
Open page2.xaml and insert a button and on click write below code;

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.GoBack();
}

Build and this time do not use phone back button rather our custom button it will work in same way as expected.

Step 8 : Here we will see how to pass value in navigation. Now we will pass textbox value from page1 to page2 and display there in a textblock.

Open page1.xaml and write below code for button click handler.

private void btnNavigate_Click(object sender, RoutedEventArgs e)
{
    //NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
    NavigationService.Navigate(new Uri("/Page2.xaml?msg=" + txtSearch.Text, UriKind.Relative));
}

Step 9 : On the second page, we will try to retrieve the sent string and show it on the page title. Type the following code to do so:

Open Page2.xaml and write below code;

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    string msg = "";
    if (NavigationContext.QueryString.TryGetValue("msg", out msg))
    pagetitle.Text ="Hi"+ msg;
}

Step 10 : Rebuild the application and run it. Press F5 and see the result. Type any string into TextBox then press Button. The title on the second page will change according to the input text.



Tune for next hour tutorial