02. Page Navigation

Series LogoIn the previous post, we talked about Solution Explorer files in a default Windows Phone Application.

This is the second post in “Discover Windows Phone” development series  we’ll be covering Page Navigation.
This topic is important for the following two reasons:
1. because you don’t want to build your project based on only one page.
2. because you can make use that your application will automatically be able to leverage the phone’s built-in hardware back button. This will allow your user to navigate backwards in your application when they want to get back to what they were doing previously.

Let’s start applying how to simply navigate between pages

Simple Navigation
We have multiple pages, and we want to give the user a way to get between them. Let’s build a simple navigation UI that will allow us to do just that.

Last post we’ve created a default Windows Phone Application, let’s open it.
1) Open the application from where you saved it last time. Probably it will be in Documents>Visual Studio 2013>Projects

2) Right Click on the Project in the Solution Explorer>Add>New Item
Screenshot (115)

3)(Under Windows Phone on the left pane) Windows Phone Portrait Page. Name it Meals.xaml
Screenshot (118)

4) Change page’s title, so we know we’re on each page. Look for the XAML Textblock element with Text “page name” to “Meals”
Screenshot (119)

5) Repeat step 3 and 4 with page name Beverages.xaml and page name “Beverages”.

6) Go back to MainPage.xaml and also change “page name” to “Main Page”.
Screenshot (120)

7) Add 2 buttons in the MainPage.xaml by dragging the “Button” control from the Toolbox window to the MainPage designer view.
Screenshot (121)

8) Change the text that appears on each button by going to the Properties windows on the left. Under Common, change Content from “button” to Meals. Do the same to button 2 and change Content to “Beverages”.  Also change the name of each button from the same properties window as shown. Change names to “button_meals” and “button_beverages”.
Screenshot (124)

 9) Add a Click event to the button, that when you click on the button a special event happens, which in our case is to navigate to a specific page. To do this, double click on the button itself in the design view and it will automatically create an event handler and take you to the C# page where you write what happens when the button is clicked. Do the same click to the second button.
Screenshot (126)

10) Now is finally time to write the statement of navigation to another page.
for button_meals

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

And for button_beverages

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

Download the Source code from here:

As you can see, by simply navigating using the NavigationService, all of your user’s actions are recorded, and using the Back button will allow them to return through their decision tree. Next post will be covering Application Bar.

For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

Advertisements

One thought on “02. Page Navigation

  1. Pingback: Yasmine Abdelhady | “Discover Windows Phone” development series for Absolute Beginners

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s