Discussion on Windows Phone 7 development on the 31st day -- 2nd: page navigation

By Jeff Blankenburg

This article is about Windows Phone 7 development on the 31st day"2nd day of the series.

Today, we will discuss how to navigate between pages in Silverlight for Windows Phone. This is very important for two reasons: first, you are not willing to build the entire application in a XAML file. Second, because of the following principles, your program will automatically use the built-in return buttons on the mobile phone. This allows your users to navigate forward when they want to return to the previous operation. We will discuss the return buttons in depth tomorrow.

There are many ways to navigate between pages, but I plan to only talk about one. I prefer simple Web navigation. The method used here is similar to the one you navigate to the HTML page. Of course there are other frameworks available (such as MVVM), but the purpose of this article is to explain this simple method.

Simple Web navigation

Suppose we have many pages, and we want to provide users with a way to shuttle between them. Let's first build a simple navigation UI so that we can do the above, now start:

1)Create a new Windows Phone Application.

 

 2)Add several Windows Phone portrait pages.

We will discuss the page direction (vertical and horizontal) on June 4th ). Now we will only talk about the vertical direction. I created three vertical pages: Pasta. xaml, Sauce. xaml and Cheese. xaml. I will associate them in several different ways.

3)Change the page title so that you can know the location after the page is changed.

When you create a new page, a XAML element named "PageTitle" is set to "page name" by default ". Change this element in each page to know which page you are currently on. I like this because it reduces the chance of errors. You will find that the initial code looks very similar when you put effort into creating a project, so it will be helpful to make them look different (at least coding.

4)Create several hyperlinks in MainPage. xaml ).

There are several different ways to create links between pages. The first is the full XAML solution. Therefore, you can use the HyperlinkButton control. The following code is used:

Code <HyperlinkButton Content = "Pasta" NavigateUri = "/Pasta. xaml" Height = "30" HorizontalAlignment = "Left"
Margin = "200," Name = "hyperlinkButton1" verticalignment = "Top" Width = ""/>

<HyperlinkButton Content = "Sauce" NavigateUri = "/Sauce. xaml" Height = "30" HorizontalAlignment = "Left"
Margin = "200," Name = "hyperlinkButton2" verticalignment = "Top" Width = ""/>

<HyperlinkButton Content = "Cheese" NavigateUri = "/Cheese. xaml" Height = "30" HorizontalAlignment = "Left"
Margin = "200," Name = "hyperlinkButton3" verticalignment = "Top" Width = ""/>

 

When running a project, you can click any hyperlink button to jump to the corresponding page. You can also use the return key to return to the previous interface. If you return multiple times, you will find that once the first page of the program is crossed, you will leave the current application.

5)Navigate to the page by code.

If you prefer to use code instead of fully using XAML, you can use only some XAML elements. In this example, we use the button. I created three buttons, each pointing to the same event handler. In the following C # code, you will see which button is actually clicked and navigate to the corresponding page. All functions of the Return key are still available.

XAML

Code <Button x: Name = "PastaButton" Content = "Pasta" Click = "Button_Click" Width = "200" Height = "75"/>

<Button x: Name = "SauceButton" Content = "Sauce" Click = "Button_Click" Width = "200" Height = "75"/>

<Button x: Name = "CheeseButton" Content = "Cheese" Click = "Button_Click" Width = "200" Height = "75"/>

 C #

Code Private void Button_Click (object sender, RoutedEventArgs e)
{
Button clickedButton = sender as Button;
Switch (clickedButton. Name)
{
Case "PastaButton ":
NavigationService. Navigate (new Uri ("/Pasta. xaml", UriKind. Relative ));
Break;
Case "SauceButton ":
NavigationService. Navigate (new Uri ("/Sauce. xaml", UriKind. Relative ));
Break;
Case "CheeseButton ":
NavigationService. Navigate (new Uri ("/Cheese. xaml", UriKind. Relative ));
Break;
}
}

As you can see, only NavigationService is used to record the user's actions, and the Return key can be used to make it return along the decision tree.

Download Sample Code

Tomorrow, we will explore how to use the return button to implement more features.

Address: http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-2-Page-Navigation.aspx