Developing for Modern Windows

Tips, tricks, and guides for developing on modern Windows platforms

Title Bar Back Button in Windows 10 UWP

You’ve had a chance to play around with the final Windows 10 release for about a week now, and you’re probably wondering how to implement some of the new functionality in Universal Windows Platform (UWP) apps. In this quick post I’ll show you how to use the new Back button that sits in the app’s title bar:

back_button_title_bar

Title bar back button from my game Puzzle Detective, which I’m currently updating for Windows 10 UWP

The new Back button is easy to implement, and it can all be done in code behind. Here are the steps:

  1. Make the button visible
  2. Detect button presses
  3. Handle the button press
  4. Remove the button handler when necessary.

Enable the Button

You should do this when you need the button to show (or hide). I use OnNavigatedTo(), which seems the best place for it, so add the following two lines to OnNavigatedTo():


var currentView = SystemNavigationManager.GetForCurrentView();

currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

The above code simply gets a reference to the current view, then changes the AppViewBackButtonVisibility property to show the button (it’s collapsed/not visible by default). The button needs to be visible to be used. Use AppViewBackButtonVisibility.Collapsed to hide the button (for example when navigating to the first page of the app where the user can’t go back any further).

You can use Frame.CanGoBack() to determine whether to show the button or not.

Capture the Button Press

After the code above, add the following line to add an event handler to capture the button tap/click:


currentView.BackRequested += backButton_Tapped;

This ensures that the backButton_Tapped() method is called whenever the back button is tapped (once we’ve created the method, of course).

Handle the Button Press

Add the following method to your page to handle the button press:


private void backButton_Tapped(object sender, BackRequestedEventArgs e)

{

    // insert anything you need to do before navigating

    if (Frame.CanGoBack) Frame.GoBack();

}

Usually all you’ll need is the Frame.GoBack() command, which tells your app to go to the previous page (after checking if it’s possible first).

Remove the Event Handler

It’s important to remove the event handler when your user moves to a different page (if you don’t, the handler will stay around, and you’ll end up with multiple Frame.GoBack() commands firing at once).

The best place for this is in OnNavigatedFrom(), so that the handler is disconnected whenever the page is navigated away from. So inside OnNavigatedFrom(), add the following:


var currentView = SystemNavigationManager.GetForCurrentView();

currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

currentView.BackRequested -= backButton_Tapped;

That code is just the reverse of what you did earlier to add the event handler.

That’s it! I find this much cleaner than in Windows 8.x. It’s great that there is no need for a XAML button stealing screen space from your app.

Look out for Puzzle Detective for Windows 10 soon (or get the already-published Windows 8 or Windows Phone version).

Tags: , ,

3 Responses to “Title Bar Back Button in Windows 10 UWP”

  1. Kinjan Bhavsar says:

    Thanks for the article, it’s really helpful. What I need to do to disable back button when I reach the first page?

    • Damien says:

      To disable the back button you follow the same steps as enabling it, except you set it to collapsed:

      var currentView = SystemNavigationManager.GetForCurrentView();

      currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;

  2. Nexxkinn says:

    Is it possible to recreate an universal back button without using built-in one?

Leave a Reply

Your email address will not be published.