UWP/C#: Display back button if certain html file is opened in a WebView

Question

I'm working to a porting from a Cordova app for the Universal Windows Platform. At this time, I basically created a container in which local html files are displayed (they were ported from the Cordova app too). Now, I would like to add a back button at the top-left corner of the window just like any UWP app. To do this, I use this instruction:

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

It works perfectly, but I want this button appears only when a certain html file is displayed into the webview. It should be a logic like this:

1) If certain_file.html is loaded
1.1) Show the back button
2) Else
2.1) Hide the back button

I'm working with Visual Studio and Visual C#. Do you have any idea about how can I do this thing?

Thanks!

Answer 1

Updated code, now everything works perfectly!

1) MainPage.xaml

<WebView Name="OnomeWebContainer" Source="ms-appx-web:///www/index.html" DOMContentLoaded="OnomeWebContainer_DOMContentLoaded"></WebView>

2) MainPage.xaml.cs

private void OnomeWebContainer_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
    {
        if (args.Uri.LocalPath == "/www/security_auth.html")
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
        }
        else
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
        }
    }

Thanks to Xavier Xie for its help! :)

Answer 2

@Xavier Xie - MSFT This is the MainPage.xaml

<Page
x:Class="Project_Onome.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project_Onome"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <WebView x:Name="OnomeWebContainer"/>
    <WebView HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <WebView Source="ms-appx-web:///www/index.html"/>
    <WebView DOMContentLoaded="OnomeWebContainer_DOMContentLoaded"/>
</Grid>

And this is the MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace Project_Onome
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            WebView OnomeWebContainer = new WebView();
            OnomeWebContainer.DOMContentLoaded += OnomeWebContainer_DOMContentLoaded;
        }
    private void OnomeWebContainer_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
    {
        if (args.Uri.LocalPath == "/security_auth.html")
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
        }
        else
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
        }
    }
}

}

Answer 3

You could use the DOMContentLoaded event of the webview to decide if the back button is displayed.

For example:

<WebView DOMContentLoaded="WebView_DOMContentLoaded" Source="ms-appx-web:///HTMLPage1.html"></WebView>

private void WebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    if (args.Uri.LocalPath == "/HTMLPage1.html")
    {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
    }
    else
    {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
    }
}