The UWP applications can be run on various devices that differ, for example, by availability of the back button. As you can see, such a button exists in the case of smartphones, but it is not available for tablets and desktops. Fortunately, it is possible to use the SystemNavigationManager class to handle pressing the back button on a smartphone to navigate to the previous page in the application. What is more, the mechanism allows you to present the additional back button, at the top of the window, in case of a tablet or desktop-based version. You will learn how to do it in the current recipe.
To complete this recipe, you need the project with two pages, represented by the MainPage and AboutPage classes. Let's imagine that the first page operates as the main menu of the application with a set of menu items. After clicking on the first of them, the user should be navigated to the page with information about the company.
To handle the back button on a smartphone, as well as present an additional back button on tablets and desktops, you need to perform the following steps:
Specify the visibility of the additional back button (on devices without such a button), as well as handle an event of using it. To do so, modify the code of the
OnLaunchedmethod in theApp.xaml.csfile, as shown as follows:protected override void OnLaunched( LaunchActivatedEventArgs e) { (...) if (rootFrame == null) { rootFrame = new Frame(); (...) Window.Current.Content = rootFrame; rootFrame.Navigated += (s, ev) => { SystemNavigationManager.GetForCurrentView() .AppViewBackButtonVisibility = ((Frame)s).CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed; }; SystemNavigationManager.GetForCurrentView() .BackRequested += OnBackRequested; } (...) }Go back to the previous page when the back button is used, by adding the
OnBackRequestedmethod in theApp.xaml.csfile, as shown as follows:private void OnBackRequested(object sender, BackRequestedEventArgs e) { Frame rootFrame = (Frame)Window.Current.Content; if (rootFrame.CanGoBack) { e.Handled = true; rootFrame.GoBack(); } }
By adding the necessary code directly in the App.xaml.cs file, you do not need to specify the same operations in all .xaml.cs files representing pages. The required lines of code are not very complicated and are explained in the following part of this recipe.
First of all, you handle the Navigated event on an instance representing the frame (the roomFrame variable of the Frame type). When a user navigates to some page, the visibility of the back button is specified. Of course, it should be visible only when it is possible to go back from the current page, as specified in the following part of code:
SystemNavigationManager.GetForCurrentView()
.AppViewBackButtonVisibility = ((Frame)s).CanGoBack ?
AppViewBackButtonVisibility.Visible :
AppViewBackButtonVisibility.Collapsed;
Then, you handle an event of the back button being clicked, namely BackRequested. Of course, it supports a scenario of both pressing the hardware-based version and clicking on the additional back button added in the top-left corner of the window, as presented in the following screenshot of mobile and desktop-based versions:
When a user clicks on the back button, the OnBackRequested method is called. Within it, you check whether it is possible to go back from the current page. In such a case, you indicate that the event is handled and call the GoBack method. The operation of such a method is explained in detail in the Navigating between pages recipe.