| Navigation | ||
|---|---|---|
| Back Button | Master/detail | Navigation menu (XAML) |
| Pivot | Projection | XHR, handling navigation errors, and URL schemes |
Back Button Sample （回退按钮）
This sample demonstrates how to set up an event handler for the back button event and how to enable the title bar back button for when the app is in windowed Desktop mode.
Specifically, this sample covers:
- Setting up an event handler for BackRequested and to navigate back in the page stack.
- Enabling and disabling the title bar back button based on the app's internal page stack.
Master/detail sample （宽屏幕上同时展示详细信息，窄屏幕则导航到详细页）
This sample shows how to implement a responsive master/detail experience in XAML. In the master/detail pattern, a master list is used to select an item that will then appear in a detail view.
When the app view is sufficiently wide, the master list and detail view should appear side by side in the same app page. However, on smaller screen sizes, the two pieces of UI should appear on different pages, allowing the user to navigate between them. This sample shows how to implement these experiences and adaptively switch between them based on the size of the screen.
Specifically, this sample demonstrates:
- Creating a side-by-side master/detail experience in XAML: In
MasterDetailPage.xaml, a master list is used to switch between detail items in a side-by-side view. This page will also responsively update to include just the master list when the view is narrow. - Navigating between the master list and a detail view: At narrow screen sizes, the user can navigate between the master list in
MasterDetailPage.xamland detail view inDetailPage.xamlto view different items. - Changing the navigation model when the app is resized: This sample contains the code necessary to adaptively switch between the two experiences described above at runtime based on screen size.
Navigation menu (XAML) sample （导航菜单）
This sample demonstrates how to provide a top-level navigation menu to users (a.k.a. a hamburger menu).
Specifically, this sample shows how to:
- Utilize a SplitView control: The SplitView is a control with two content areas: the Pane and the Content. The Pane can be opened or closed. Using the DisplayMode property the app can switch the Pane to Overlay the Content or appear Inline. When the available space is constrained the Pane can be put into a CompactOverlay or CompactInline mode where it provides a visual hint to the user.
- Customize a ListView to present menu items with a single-selection experience: This uses a ListView to present the default visuals for the menu items and customizes the keyboarding behavior to provide a single selection model where up/down/tab/shift+tab moves through each item and 'Enter' and 'Space' select the item.
Pivot sample （相当于手机上的Tab控件）
This sample shows how to use a Pivot control in your UWP application.
Specifically, this sample shows how to:
- Use pivots across devices : No longer just a mobile control, pivot works great with mouse, keyboard, and touch
- Show custom header content: Learn how to create responsive experiences with the new header content areas
- Create custom experices: With its improved flexibility, learn how to create a 'tabs-style' experience with Pivot
Projection sample （用于投影或多屏）
This sample demonstrates how to display two different views of your app UI on different screens, as users might do when projecting your app in a meeting or conference.
The sample demonstrates:
- Displaying two different views of your app on different screens.
- Starting, stopping and swapping views.
- Using ProjectionManager and ApplicationViewSwitcher APIs.
- Enumerating available screens to project to and projecting a view of your app to a specific one.
XHR, handling navigation errors, and URL schemes sample （仅用于JS）