Search code examples
c#xamarinxamarin.formsxamarin-studio

Xamarin Forms - Webview not showing up


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

  • 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