[Translation] WP7 Quickstart-Article 10-page navigation

Address: http://create.msdn.com/en-US/education/quickstarts/Navigation

Note: This articleArticleIt is the tenth article translated from Microsoft's official WP7 Quickstart, which describes the page navigation under WP. Some of the content is added to your understanding and expression habits. The main purpose of this series is to practice English, and to give yourself an understanding of WP7 development as a bi developer. For some improper translations, I hope you will point out criticism and correction]

Windows Phone navigation can be defined as allowing users to move back and forth between pages with different content. This navigation model allows you to create a view-based application that is more compatible with Windows Phone.Program. This article mainly describes how to navigate between different pages in a program.

It mainly includes the following content:

Framework and page

Page navigation

Data Transmission

Application bar

Back button

Framework and page

The navigation in Windows Phone is similar to that in traditional Silverlight, but it has been extended to provide the special features of mobile phones. This navigation model is based on the phoneapplicationframe control. This control contains one or more phoneapplicationpage controls that you can navigate.

A page is a set of continuous states. It can be regarded as a Silverlight page that contains content or links to other pages. The application can also contain pop-up pages, message boxes, logon pages, and initial screens.

Only moving between two pages is considered as Windows Phone navigation. Moving from the logon interface or initial screen to the home page is not considered a navigation, but a transfer ].

Page navigation

The simplest way to navigate to a page is through the hyperlinkbutton control, where the navigationuri attribute is used to specify which page to navigate. The following example shows how to navigate from one page to another page called secondpage. XAML.

XAML

<Hyperlinkbutton navigateuri = "secondpage. XAML"/>

If you do not want to use hyperlinkbutton, you can use navigationservice for navigation. This class contains attributes, methods, and events to help you navigate. The navigationservice. navigate method is used to navigate to a specified page. To navigate from one page to another, follow the steps below.

1. Create a Windows Phone application in Visual Studio.

2. Add a Windows Phone portrait page named secondpage. XAML. The mainpage on the home page will be directed to this page.

3. Use the navigationservice. navigate method to navigate to secondpage. XAML.

4. Use the navigationservice. Goback method to return to mainpage. XAML

The following example creates two pages named Home and second. You can click go to the second page on the home page to go to the second page. This is achieved by calling the navigationservice. navigate method and the URL Information of the second page in the event processing of Button clicking. On the second page, you can also click "Go back to main page" to return to the home page. The navigationservice. Goback method is called here. This method will return to the nearest page. In this example, it is the home page. Before calling this method, you must use the navigationservice. cangoback attribute to determine whether a page has been rolled back.

Tip:

Although the navigationservice. Goback method is used in this example, you can click the back button on the device to navigate to the previous page.

Mainpage. XAML

<Grid X: Name = "layoutroot" background = "Transparent">

<Grid. rowdefinitions>

<Rowdefinition Height = "Auto"/>

<Rowdefinition Height = "*"/>

</Grid. rowdefinitions>

<! -- Titlepanel contains the name of the application and page title -->

<Stackpanel X: Name = "titlepanel" grid. Row = "0"

Margin = ",">

<Textblock X: Name = "applicationtitle" text = "navigation"

Style = "{staticresource phonetextnormalstyle}"/>

<Textblock X: Name = "pagetitle" text = "home page"

Margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/>

</Stackpanel>

<! -- Contentpanel-place additional content here -->

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Button X: Name = "mybutton" Height = "100" width = "350"

Click = "mybutton_click" content = "go to second page"/>

</GRID>

</GRID>

Mainpage. XAML. CS

Private void mybutton_click (Object sender, routedeventargs E)

{

Navigationservice. navigate (New uri ("/secondpage. XAML ",

Urikind. relativeorabsolute ));

}

Secondpage. XAML

<Grid X: Name = "layoutroot" background = "Transparent">

<Grid. rowdefinitions>

<Rowdefinition Height = "Auto"/>

<Rowdefinition Height = "*"/>

</Grid. rowdefinitions>

<! -- Titlepanel contains the name of the application and page title -->

<Stackpanel X: Name = "titlepanel" grid. Row = "0"

Margin = ",">

<Textblock X: Name = "applicationtitle" text = "navigation"

Style = "{staticresource phonetextnormalstyle}"/>

<Textblock X: Name = "pagetitle" text = "second page"

Margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/>

</Stackpanel>

<! -- Contentpanel-place additional content here -->

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Button X: Name = "btnback" content = "go back to home page"

Click = "btnback_click" Height = "100" width = "350"/>

</GRID>

</GRID>

Secondpage. XAML. CS

Private void btnback_click (Object sender, routedeventargs E)

{

If (navigationservice. cangoback)

Navigationservice. Goback ();

}

The home page and second page are displayed. The navigation between them is implemented through the navigationservie. navigate and navigationservice. Goback methods.

Data Transmission

Generally, you want to pass some parameters in the navigation process from one page to another. For example, enter some text on the home page and display it on the second page. In this way, you can use the navigationservice. navigate method to put the parameters behind the navigation page. You can also override the page. onnavigatedto method of secondpage. XAML. CS to check the page navigation request and passed parameters. The following shows how to use the vavigationservice. navigate and page. onnavigatedto methods to pass parameters between pages.

Mainpage. XAML

<Grid X: Name = "layoutroot" background = "Transparent">

<Grid. rowdefinitions>

<Rowdefinition Height = "Auto"/>

<Rowdefinition Height = "*"/>

</Grid. rowdefinitions>

<! -- Titlepanel contains the name of the application and page title -->

<Stackpanel X: Name = "titlepanel" grid. Row = "0"

Margin = ",">

<Textblock X: Name = "applicationtitle" text = "navigation"

Style = "{staticresource phonetextnormalstyle}"/>

<Textblock X: Name = "pagetitle" text = "home page"

Margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/>

</Stackpanel>

<! -- Contentpanel-place additional content here -->

<Stackpanel X: Name = "contentpanel" grid. Row = "1"

Margin = "12,0, 12,0">

<Textbox X: Name = "mytb" Height = "80"

Width = "350"/>

<Button X: Name = "mybutton" content = "go to second page"

Height = "80" width = "350" Click = "mybutton_click"/>

</Stackpanel>

</GRID>

Mainpage. XAML. CS

Private void mybutton_click (Object sender, routedeventargs E)

{

Navigationservice. navigate (New uri ("/secondpage. XAML? MSG = "+

Mytb. Text, urikind. relativeorabsolute ));

}

Secondpage. XAML

<Grid X: Name = "layoutroot" background = "Transparent">

<Grid. rowdefinitions>

<Rowdefinition Height = "Auto"/>

<Rowdefinition Height = "*"/>

</Grid. rowdefinitions>

<! -- Titlepanel contains the name of the application and page title -->

<Stackpanel X: Name = "titlepanel" grid. Row = "0"

Margin = ",">

<Textblock X: Name = "applicationtitle" text = "navigation"

Style = "{staticresource phonetextnormalstyle}"/>

<Textblock X: Name = "pagetitle" text = "second page"

Margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/>

</Stackpanel>

<! -- Contentpanel-place additional content here -->

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Textblock X: Name = "mytbl" fontsize = "25"/>

</GRID>

</GRID>

Secondpage. XAML. CS

Protected override void onnavigatedto

(System. Windows. Navigation. navigationeventargs E)

{

Base. onnavigatedto (E );

String MSG = "";

If (navigationcontext. querystring. trygetvalue ("MSG", out MSG ))

Mytbl. Text = MSG;

}

For example, the text entered on the home page is displayed on the second page.

Application bar

The application bar is a set of single or four buttons that are displayed at the bottom of the screen in portrait mode and at the edge of the screen in Landscape mode. This is the menu system in Windows Phone. The buttons in the application bar provide users with frequently used functions.

The show mode of the Windows Phone application bar is displayed.

Up to four buttons with icons are allowed. If there are more than four buttons, an exception is thrown when the program starts. The ellipsis in the upper-right corner of the application bar is used to expand or close the application bar. The text of the icon button is displayed only when it is expanded. Click events can be used to process the click events of these icon buttons.

Under these buttons, the application bar can also contain one or more text-based menus. These menus are displayed in a list. When you click the ellipsis in the upper-right corner of the application bar or the blank area of the icon button, the menu slides in from the bottom of the screen. In the previous figure, about and settings are menu items. Menu items are not arranged horizontally, so they are not sub-menus of any icon buttons, the menu items here should be operations that are rarely used in applications or that functions that are hard to represent with icons must be described in text.

It is the application bar's expansion and closure mode, as well as the form of single menu items and no menu items.

In Windows Phone, you can use the ApplicationBar class to add the application bar programmatically, includingCode. If you use XAML, the Windows Phone Project template in the Windows Phone development tool will be in mainpage. the XAML contains the implementation of an application bar. All you need to do is cancel the comments in the application bar and use your own icons and menus as needed.

The following shows the modified application bar created by default using the template. There are three icon buttons, new, folder and sync, and two menu items setting and add email accound.

XAML

<Phone: phoneapplicationpage. ApplicationBar>

<Shell: ApplicationBar isvisible = "true" ismenuenabled = "true">

<Shell: applicationbariconbutton X: Name = "newbutton"

Iconuri = "/images/appbar.new.rest.png" text = "new"

Click = "newbutton_click"/>

<Shell: applicationbariconbutton X: Name = "folderbutton"

Iconuri = "/images/appbar.folder.rest.png" text = "Folders"

Click = "folderbutton_click"/>

<Shell: applicationbariconbutton X: Name = "syncbutton"

Iconuri = "/images/appbar.refresh.rest.png" text = "sync"

Click = "syncbutton_click"/>

<Shell: ApplicationBar. menuitems>

<Shell: applicationbarmenuitem text = "Settings"/>

<Shell: applicationbarmenuitem text = "Add email account"/>

</Shell: ApplicationBar. menuitems>

</Shell: ApplicationBar>

</Phone: phoneapplicationpage. ApplicationBar>

The effect is as follows:

Note that the icon image is used in this example. For more information about how to design and create an application bar and how to locate the prepared image, see here.

The application bar is not a Silverlight control, so data binding is not supported. This means that button labels in XAML must be manually written and cannot be internationalized. To enable the internationalization function, you can create an application bar in the code or use C # To change the tag value during runtime.

The following example shows how to create an application bar in code. Use the ApplicationBar class to create an application bar, use the applicationbariconbutton class to create an icon, and use the ApplicationBar. Buttons. Add method to add it to the application bar. Use applicationbarmenuitem to create a menu item and add it to the application bar using ApplicationBar. menuitems. Add.

C #

Public mainpage ()

{

Initializecomponent ();

// Create the ApplicationBar

ApplicationBar = new ApplicationBar ();

ApplicationBar. isvisible = true;

ApplicationBar. ismenuenabled = true;

// Create the icon buttons and setting its properties

Applicationbariconbutton newbutton = new applicationbariconbutton (New URI

("/Images/appbar.add.rest.png", urikind. Relative ));

Newbutton. Text = "new ";

Newbutton. Click + = new eventhandler (newbutton_click );

Applicationbariconbutton folderbutton = new applicationbariconbutton (New URI

("/Images/appbar.folder.rest.png", urikind. Relative ));

Folderbutton. Text = "Folders ";

Folderbutton. Click + = new eventhandler (folderbutton_click );

Applicationbariconbutton syncbutton = new applicationbariconbutton (New URI

("/Images/appbar.sync.rest.png", urikind. Relative ));

Syncbutton. Text = "sync ";

Syncbutton. Click + = new eventhandler (syncbutton_click );

// Add the icon buttons to the application bar

ApplicationBar. Buttons. Add (newbutton );

ApplicationBar. Buttons. Add (folderbutton );

ApplicationBar. Buttons. Add (syncbutton );

// Create menu items

Applicationbarmenuitem settingsmenuitem = new applicationbarmenuitem

("Settings ");

Settingsmenuitem. Click + = new eventhandler (settingsmenuitem_click );

Applicationbarmenuitem addaccountmenuitem = new applicationbarmenuitem

("Add email account ");

Addaccountmenuitem. Click + = new eventhandler (addaccountmenuitem_click );

// Add the menu items to the application bar

ApplicationBar. menuitems. Add (settingsmenuitem );

ApplicationBar. menuitems. Add (addaccountmenuitem );

}

The application bar can define the local or global cost. The local application bar can only be used on the page that defines it. This is useful when different pages in the program need different application columns. For example, if you create an email in a program, the homepage may contain create new email and sync, And the email Writing Page may contain send and delete. Therefore, it is necessary to define different application columns for two pages.

The global application bar can be used by all pages in the program. It is defined in the app. XAML file of the program resource. Follow these steps to create a global application bar.

1. Add the XAML in the application column to the <application. Resources> section of the app. XAML file.

2. Add the following attributes to the <Phone: phoneapplicationpage> node on each page of the application bar you want to use:

ApplicationBar = "{staticresource globalappmenubar }"

For more information on the application bar, see here.

Back button

All Windows phones contain a hard back button. This button allows you to navigate to the previous page of the application or to different applications. For example, you can click a hyperlink in the email program to open the web browser, and then click the back button of the device to return to the mail interface. This is a typical user experience for switching between different programs, whether it is a third-party application or a Windows Phone built-in program. Windows Phone supports the back button function by recording navigation operations in this log maintenance mode.

Display the back button, start button, and search button on the device.

The back button can be rewritten to customize some features you want. Then, when you perform this operation, you should know how the user understands this rollback. For example, if you display a pop-up message in the program, you may implement the exit method in the back button, but what the user wants may be to close the pop-up message box.

Rewrite the row of the backend button as the phoneapplicationpage. onbackkeypress method.

The following example contains a text box. If you enter content in the text box and click the back button on the device, a message will prompt "you are about to discard your changes. continue ". This behavior is implemented by rewriting the phoneaplicationpage. onbackkeypress method.

C #

Protected override void onbackkeypress (system. componentmodel. canceleventargs E)

{

Base. onbackkeypress (E );

If (mytb. Text! = String. Empty)

{

VaR result = MessageBox. Show ("You are about to discard your changes. Continue? ",

"Warning", messageboxbutton. okcancel );

If (result! = Messageboxresult. OK)

{

E. Cancel = true;

}

}

}

The running result is as follows. A message box is displayed when you click the back button.

Follow the following best practices when rewriting the back button:

1. In the program, consider the meaning of the backward button in the user's current operation.

2. If the user clicks the back button for the second time, the default action should occur.

3. Avoid using the back button in the local navigation area.

4. For some interfaces that are relatively short-lived, such as the logon interface, try to use the Silverlight popup control to display the content, which only occupies part of the screen, not all. You can add the phoneapplicationpage. onbackkeypress method in the Code and set E. Cancel to true, so that when popup is displayed, you can use the back button to close it.