Xamarin Forms - creating a web view back

Question

Morning everything

I am working on a small cross-platform webview project in Xamarin.Forms. My webview is working, but I want to add a toolbar with the back and forward buttons.

I tried several different ways, but nothing works, especially good. I tried to implement this function by following this reputation post navigation toolbar

I will attach my code below, and if someone can give me a hand with this or a solution that will be great!

And if this question has already been answered earlier by another user, I apologize.

App.cs

using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace DisplayWebPage { public class App : Application { public App() { // The root page of your application MainPage = new WebPage(); } protected override void OnStart() { // Handle when your app starts } protected override void OnSleep() { // Handle when your app sleeps } protected override void OnResume() { // Handle when your app resumes } } } 

WebPage.cs

 using System; using System.Collections.Generic; using System.Linq; using System.Reflection.Emit; using System.Text; using Xamarin.Forms; namespace DisplayWebPage { public class WebPage : ContentPage { public WebPage() { Content = new StackLayout { Children = { new WebView { Source = "http://www.google.com" } } }; } } } 

We look forward to an answer to this question, since I have long been stuck on it.

Yours faithfully

Answer 1

Edit your code as follows. First wrap MainPage in NavigationPage to make the toolbar visible.

It basically boils down to creating a variable that makes it easier to access your WebView .

Then create a button in the ToolbarItems collection that can trigger the event. And in this case, you can call the already available GoBack() method on the WebView .

You probably want to check out the Xamarin documentation on WebView , it is probably a good idea to check if you can really go back with the CanGoBack property.

Note that I assigned BackIcon.png , you can replace it with null or your own icon, of course. Also, the code has not been tested, it's just because of the head, so maybe some half-columns or something else are missing.

App.cs

 // ... other code public App() { // The root page of your application MainPage = new NavigationPage(new WebPage()); } // ... other code 

WebPage.cs

 using System; using System.Collections.Generic; using System.Linq; using System.Reflection.Emit; using System.Text; using Xamarin.Forms; namespace DisplayWebPage { public class WebPage : ContentPage { private WebView _webView; public WebPage() { // Assign a WebView to a global variable _webView = new WebView { Source = "http://www.google.com" }; // Create toolbar items here ToolbarItems.Add(new ToolbarItem("Back", "BackIcon.png", () => { _webview.GoBack(); })); Content = new StackLayout { Children = { _webView} }; } } } 

Answer 2

Try the following: Add a navigation event to the WebView object

  List<string> history = new List<string>(); WebView myWebView = new WebView { Source = "http://www.google.com" }; myWebView.Navigated += WebViewPage_Navigated; Children = myWebView; 

Then define the following function:

 public void WebViewPage_Navigated(object sender, WebNavigatedEventArgs e) { WebNavigationResult result = e.Result; if(result.Equals(WebNavigationResult.Success)){ currentUrl = e.Url; history.Add(currentUrl); } } 

Now you can bind the Forward and Prev elements based on the list of the history list and the current element (if moved to the background and then added to the list forward). Hope this helps.

Answer 3

Gerald Verslois' answer is magnificent. Based on this, I would like to share what my code looks like after I tried to solve the following problems:

• Tried to implement toolbar and webview in XAML (using VS2017)
• Hiding the toolbar when displaying the first page (no need back)
• Override device return button

App.xaml.cs

 // ... using, namespace etc public partial class App : Application { public App() { InitializeComponent(); MainPage = new NavigationPage(new MainPage()); } } // ... 

MainPage.xaml

 <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyApp" x:Class="MyApp.MainPage" NavigationPage.HasNavigationBar="False" Title="My App"> <ContentPage.ToolbarItems> <ToolbarItem Name="Back" Clicked="OnBack"></ToolbarItem> </ContentPage.ToolbarItems> <WebView x:Name="browser" Navigating="OnNavigating"></WebView> </ContentPage> 

MainPage.xaml.cs

 using System; using Xamarin.Forms; namespace MyApp { public partial class MainPage : ContentPage { string Url; public MainPage() { InitializeComponent(); browser.Source = Url = GetUrl(); } void OnBack(object sender, EventArgs args) { browser.GoBack(); } protected override bool OnBackButtonPressed() { if (browser.CanGoBack) { browser.GoBack(); return true; } else return base.OnBackButtonPressed(); } void OnNavigating(object sender, WebNavigatingEventArgs args) { // Checking if we are at the home page url // browser.CanGoBack does not seem to be working (not updating in time) NavigationPage.SetHasNavigationBar(this, args.Url != Url); } string GetUrl() { // Possibly some mechanism to accomoddate for several locales return "..."; } } }