To display HTML contents within your Universal Windows Platform applications, Webview is always the best choice. But, when came across while working on the app to navigate the previous page, it became a challenge.

By default, if user press on the physical back button on mobile device, virtual back button on desktop (in tablet mode) the app will exit or closed. This brought superb unpleasant experience to users.

Of course, developers can always put a set of navigation button to address this issue. But, to leverage the Hardware Back Button, Virtual Back Button and AppView Back Button are definitely make your app stand out.

Lets build a simple UWP Browser App to demonstrate the usage of Hardware, Virtual and AppView Back Button. This applications must achieved the following:

1. If user already navigate to other website, by pressing the Hardware or Virtual Back Button, it should return to the previous page.
2. If user already navigate to other website, AppView Button should be shown on none Tablet mode; by pressing it, should return to previous page.
3. The application only exit when there is no more “Page” to go back.

In light of above requirements, here is the code snippet of how it was implemented:

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <WebView Name="webview" NavigationCompleted="webview_NavigationCompleted" />

    <TextBox Name="addressBox" Grid.Row="1" KeyDown="addressBox_KeyDown" />
</Grid>

Codes Behind

public MainPage()
    {
        this.InitializeComponent();

        SystemNavigationManager.GetForCurrentView().BackRequested += SystemNavigationManager_BackRequested;
    }

    private void SystemNavigationManager_BackRequested(object sender, BackRequestedEventArgs e)
    {
        Frame frame = Window.Current.Content as Frame;

        if (frame.CanGoBack || webview.CanGoBack)
        {
            e.Handled = true;

            if (webview.CanGoBack)
                webview.GoBack();


            if (frame.CanGoBack)
                frame.GoBack();
        }
    }

    private void addressBox_KeyDown(object sender, KeyRoutedEventArgs e)
    {
        if (e.Key == VirtualKey.Enter)
        {
            string url = addressBox.Text.ToLower();

            if (!url.Contains("http://") || !url.Contains("https://"))
            {
                url = "http://" + url;
            }

            webview.Navigate(new Uri(url));
        }
    }

    private void webview_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
    {
        addressBox.Text = webview.Source.ToString();

        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                webview.CanGoBack ?
                AppViewBackButtonVisibility.Visible :
                AppViewBackButtonVisibility.Collapsed;
}

The sample codes for this app is available at GitHub https://github.com/snakechia/UWP-Browser-Sample