Xamarin Forms - making webview go back
Edit your code like this.
First wrap your MainPage
in a NavigationPage
to make the toolbar visible.
It basically comes down to create a variable to be able to access your WebView
easier.
Then create a button in you ToolbarItems
collection which can trigger an event. And in that event you can call the already available GoBack()
method on the WebView
.
You probably want to check out the Xamarin documentation on the WebView
, it is probably a good idea to check if you can actually go back with the CanGoBack
property.
Note that I have assigned a BackIcon.png
you can replace it with null
or your own icon of course.
Also the code hasn't been tested, this is just out of the top of my head so maybe there are missing some semi-colons or stuff.
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}
};
}
}
}
The answer by Gerald Versluis is great. Based on that, I would like to share how my code looks like after I tried to solve the following issues:
- Tried to implement the toolbar and webview in XAML (using VS2017)
- Hiding toolbar when front page is displayed (no need for back)
- Overriding the device back 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 "...";
}
}
}