Page navigation in windows store app

Navigation to different pages is an important part of any application. In Windows Store App it is handled by the Frame class.

A Windows Store app consist of a Parent frame and pages inside it. This frame provides a method named Navigate() that handles all the navigation between the pages. Navigate method takes the type of Page to navigate as parameters, additionally we can also specify the data to pass to the next page. The Navigate method triggers an event named OnNavigatedFrom inside the page when navigating away from the page and OnNavigatedTo in the page to which we are navigating. The data passed during navigation is caught in the NavigationEventArgs object of the Events above.
The parameter passed from the Previous page is stored in the Parameter property of the NavigationEventArgs that is received while navigating.

The parameters to be passed to the next page has to be either a string, char, numeric or GUID, so that the serialization is possible using GetNavigationState method of the Frame Class.

Let’s understand it better with a code piece with Demonstration of all the events associated with it. Pages involved in this navigation example are MainPage.xaml and PageSecond.xaml

Navigation Code on Button Tap:

//Event fired on button tap in MainPage.xaml
//navigates to the next page named PageSecond
private void btnNavigateToNextPage_Tapped(object sender, TappedRoutedEventArgs e)
	     string sendingParameters = “Navigation from first Page”;
	     //takes type of page which is the class name for the other page
             //send some parameters to the next page
             this.Frame.Navigate(typeof(PageSecond), sendingParameters);

Code for Event fired on navigation from MainPage.xaml to pageSecond.xaml:

//NavigationEventArgs  catches all the parameter being sent
protected override void OnNavigatedFrom(NavigationEventArgs e)
		//optional block can dispose objects free memory etc.

Code for Event fired when navigated to PageSecond.xaml from MainPage.xaml:

//NavigationEventArgs  catches all the parameter being sent
async protected override void OnNavigatedTo(NavigationEventArgs e)
                //optional block can receive parameters and work on it.
		//work on xaml controls etc according to requirement.

		//show parameters received from the previous page in message box
 		MessageDialog  msgShowPopup = new MessageDialog(Convert.ToString(e.Parameter));
                await  msgShowPopup.ShowAsync();

Using the frame class and its Navigate method, we can navigate to various pages and also pass parameters from one page to another. It also gives us the access to two different events which we can use to Free Memory, finish tasks for a particular page, work on XAML controls and other functions for the app.

Written By: Anobik Dey, Software Developer, Mindfire Solutions

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s