Xamarin Forms - Webview not showing up

Question

I am working on a small Xamarin.Forms webview application. This is a follow up question to the one answered previously, xamarin-forms-making-webview-go-back

So I have a toolbar and a back button implemented and working. But when I run the program with the emulator already open(im using Genymotion), the program runs and shows the toolbar along with the back button...but no webview will display.

But heres the strange thing, sometimes when I run the program when the emulator is in sleep mode and then switch it back on the program works perfectly. Also, when I tested it on iOS it just showed the toolbar and no webview at all! More often then not, the emulator just wont show the webView. I have also tested this on my Android device and the same thing happens, itll show the toolbar but not the webview.

Abit confusing I know but can anyone help me out with this.

I will attach my code below:

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace WebView_form
{
    public class App : Application
    {
        public App()
        {
            //const string URL = "http://www.google.com";
            MainPage = new NavigationPage(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 WebView_form
{
    public class WebPage : ContentPage
    {
        private WebView webView;

        public WebPage()
        {
            webView = new WebView 
            {
                Source = "https://www.google.com"
            };


            // toolbar
            ToolbarItems.Add(new ToolbarItem("Back", null, () =>
                {
                    webView.GoBack();
                }));

            Content = new StackLayout
            {
                Children = { webView }
            };
        }
    }
}

If anyone can help me out, it'd be great.

Solution 1

Set the VerticalOptions to FillAndExpand and do the same for HorizontalOptions if that's not working.

Probably the WebView is getting a zero size height because when the layout happens the view is still empty.

So change the code in your WebPage.cs like this;

// ... Other code

public WebPage()
{
  webView = new WebView 
  {
     Source = "https://www.google.com",
     VerticalOptions = LayoutOptions.FillAndExpand,
     HorizontalOptions = LayoutOptions.FillAndExpand
  };


  // toolbar
  ToolbarItems.Add(new ToolbarItem("Back", null, () =>
  {
     webView.GoBack();
  }));

  Content = new StackLayout
  {
     Children = { webView }
  };
}

// ... Other code

Solution 2

Another thing to consider: If you are responding to the WebView.Navigating event, be sure to not set its args.Cancel to true if the page loaded is the WevView.Source. The iOS implementation of WebView.Navigating fires when the WebView.Source is loaded but the Android implementation does not. If you set args.Cancel to true when the page in question is the WebView.Source, the WebView will be blank.

Comments

[Alessandro Caliaro]

can you explain better your thought?

[eltiare]

This is not recommended! Do not allow non-HTTPs loads. More than likely you were using a self-signed certificate and so it was blocked.