navigation-history-and-backwards-navigation.md

author	Description	title	ms.assetid	isNew	label	template	op-migration-status	ms.author	ms.date	ms.topic	ms.prod	ms.technology	keywords	ms.localizationpriority
serenaz	The Universal Windows Platform (UWP) provides a consistent back navigation system for traversing the user's navigation history within an app and, depending on the device, from app to app.	Navigation history and backwards navigation (Windows apps)	e9876b4c-242d-402d-a8ef-3487398ed9b3	true	History and backwards navigation	detail.hbs	ready	sezhen	11/22/2017	article	windows	uwp	windows 10, uwp	medium

Navigation history and backwards navigation for UWP apps

Important APIs: BackRequested event, SystemNavigationManager class, OnNavigatedTo

The Universal Windows Platform (UWP) provides a consistent back navigation system for traversing the user's navigation history within an app and, depending on the device, from app to app.

To implement backwards navigation in your app, place a back button at the top left corner of your app's UI. If your app uses the NavigationView control, then you can use NavigationView's built-in back button.

The user expects the back button to navigate to the previous location in the app's navigation history. Note that it's up to you to decide which navigation actions to add to the navigation history and how to respond to the back button press.

Back button

To create a back button, use the Button control with the NavigationBackButtonNormalStyle style, and place the button at the top left hand corner of your app's UI.

<Button Style="{StaticResource NavigationBackButtonNormalStyle}"/>

If your app has a top CommandBar, the Button control that is 44px in height will not align with 48px AppBarButtons very nicely. However, to avoid inconsistency, align the top of the Button control inside the 48px bounds.

<Button VerticalAlignment="Top" HorizontalAlignment="Left" 
Style="{StaticResource NavigationBackButtonNormalStyle}"/>

In order to minimize UI elements moving around in your app, show a disabled back button when there is nothing in the backstack (see code example below).

Code example

The following code example demonstrates how to implement backwards navigation behavior with a back button. The code responds to the Button Click event and disables/enables the button visibility in OnNavigatedTo, which is called when navigating to a new page. The code example also handles inputs from hardware and software system back keys by registering a listener for the BackRequested event.

<Page x:Class="AppName.MainPage">
...
<Button x:Name="BackButton" Click="Back_Click" Style="{StaticResource NavigationBackButtonNormalStyle}"/>
...
<Page/>

Code-behind:

public MainPage()
{
    KeyboardAccelerator GoBack = new KeyboardAccelerator();
    GoBack.Key = VirtualKey.GoBack;
    GoBack.Invoked += BackInvoked;
    KeyboardAccelerator AltLeft = new KeyboardAccelerator();
    AltLeft.Key = VirtualKey.Left;
    AltLeft.Invoked += BackInvoked;
    this.KeyboardAccelerators.Add(GoBack);
    this.KeyboardAccelerators.Add(AltLeft);
    // ALT routes here
    AltLeft.Modifiers = VirtualKeyModifiers.Menu;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    BackButton.IsEnabled = this.Frame.CanGoBack;
}

private void Back_Click(object sender, RoutedEventArgs e)
{
    On_BackRequested();
}

// Handles system-level BackRequested events and page-level back button Click events
private bool On_BackRequested()
{
    if (this.Frame.CanGoBack)
    {
        this.Frame.GoBack();
        return true;
    }
    return false;
}

private void BackInvoked (KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    On_BackRequested();
    args.Handled = true;
}

Here, we register a global listener for the BackRequested event in the App.xaml code-behind file. You can register for this event in each page if you want to exclude specific pages from back navigation, or you want to execute page-level code before displaying the page.

App.xaml code-behind:

Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
Frame rootFrame = Window.Current.Content;
rootFrame.PointerPressed += On_PointerPressed;

private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
{
    e.Handled = On_BackRequested();
}

private void On_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    bool isXButton1Pressed = e.GetCurrentPoint(sender as UIElement).Properties.PointerUpdateKind == PointerUpdateKind.XButton1Pressed;

    if (isXButton1Pressed)
    {
        e.Handled = On_BackRequested();
    }
}

Optimizing for different device and form factors

This backwards navigation design guidance is applicable to all devices, but different device and form factors may benefit from optimization. This also depends on the hardware back button supported by different shells.

• Phone/Tablet: A hardware or software back button is always present on mobile and tablet, but we recommend drawing an in-app back button for clarity.
• Desktop/Hub: Draw the in-app back button on the top left corner of your app's UI.
• Xbox/TV: Do not draw a back button, for it will add unnecessary UI clutter. Instead, rely on the Gamepad B button to navigate backwards.

If your app will run on multiple devices, create a custom visual trigger for Xbox to toggle the visibility of button. The NavigationView control will automatically toggle the back button's visibility if your app is running on Xbox.

We recommend supporting the following inputs for back navigation. (Note that some of these inputs are not supported by the system BackRequested and must be handled by separate events.)

Input	Event
Windows-Backspace key	BackRequested
Hardware back button	BackRequested
Shell tablet mode back button	BackRequested
VirtualKey.XButton1	PointerPressed
VirtualKey.GoBack	KeyboardAccelerator.BackInvoked
Alt+LeftArrow key	KeyboardAccelerator.BackInvoked

The code examples provided above demonstrate how to handle all of these inputs.

System back behavior for backward compatibilities

Previously, UWP apps used AppViewBackButtonVisibility for backwards navigation. The API will continue to be supported for backward compatibility, but we no longer recommend relying on the title bar back button. Instead, your app should draw its own in-app back button.

If your app continues to use AppViewBackButtonVisibility, then the back button will be rendered inside the title bar as usual.

Guidelines for custom back navigation behavior

If you choose to provide your own back stack navigation, the experience should be consistent with other apps. We recommend that you follow the following patterns for navigation actions:

Navigation action	Add to navigation history?
Page to page, different peer groups	Yes In this illustration, the user navigates from level 1 of the app to level 2, crossing peer groups, so the navigation is added to the navigation history. In the next illustration, the user navigates between two peer groups at the same level, again crossing peer groups, so the navigation is added to the navigation history.
Page to page, same peer group, no on-screen navigation element The user navigates from one page to another with the same peer group. There is no navigation element that is always present (such as tabs/pivots or a docked navigation pane) that provides direct navigation to both pages.	Yes In the following illustration, the user navigates between two pages in the same peer group. The pages don't use tabs or a docked navigation pane, so the navigation is added to the navigation history.
Page to page, same peer group, with an on-screen navigation element The user navigates from one page to another in the same peer group. Both pages are shown in the same navigation element. For example, both pages use the same tabs/pivots element, or both pages appear in a docked navigation pane.	No When the user presses back, go back to the last page before the user navigated to the current peer group.
Show a transient UI The app displays a pop-up or child window, such as a dialog, splash screen, or on-screen keyboard, or the app enters a special mode, such as multiple selection mode.	No When the user presses the back button, dismiss the transient UI (hide the on-screen keyboard, cancel the dialog, etc) and return to the page that spawned the transient UI.
Enumerate items The app displays content for an on-screen item, such as the details for the selected item in master/details list.	No Enumerating items is similar to navigating within a peer group. When the user presses back, navigate to the page that preceded the current page that has the item enumeration.

Resuming

When the user switches to another app and returns to your app, we recommend returning to the last page in the navigation history

Related articles

• Navigation basics