Hybrid WebView Navigating and navigated event Xamarin Form

Question

I am developing a Cross-platform app in c# using xamarin forms. I have created a cross-platform PCL project. I have implemented Hybrid Web View in it. As I am trying to load my html content in it. I just want to know how to capture the hybrid webview's navigated and navigating event. I am very new to Xamarin and native mobile development.

I want to get OnNavigating and OnNavigated events in hybrid web view for all platforms Android, iOS, UWP, WinPhone.

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:Demo;assembly=Demo"
             x:Class="Demo.MainPage"
             Title="Dashboard">
  <ContentPage.Content>
    <local:HybridWebView x:Name="hybridWebView"  Uri="local.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
  </ContentPage.Content>
</ContentPage>

MainPage.xaml.cs

public UserDashboard()
        {
            InitializeComponent(); 
        }

HybridwebViewRendered.cs for Android

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace FISE.Droid
{
    public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
    {
        const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

        protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
        {
            base.OnElementChanged(e);
            Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);

            if (Control == null)
            {
                var webView = new Android.Webkit.WebView(Forms.Context);
                webView.Settings.JavaScriptEnabled = true;
                webView.Settings.DomStorageEnabled = true;
                Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);
                webView.SetWebChromeClient(new WebChromeClient());
                webView.SetWebViewClient(new WebViewClient());
                SetNativeControl(webView);
            }
            if (e.OldElement != null)
            {
                Control.RemoveJavascriptInterface("jsBridge");
                var hybridWebView = e.OldElement as HybridWebView;
                hybridWebView.Cleanup();
            }
            if (e.NewElement != null)
            {
                Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                Control.LoadUrl(string.Format("file:///android_asset/Content/{0}", Element.Uri));
                InjectJS(JavaScriptFunction);
            }
        }

        void InjectJS(string script)
        {
            if (Control != null)
            {
                Control.LoadUrl(string.Format("javascript: {0}", script));
            }
        }

    }
}

And I am unable to debug my Html pages inside hybrid webview. How can I do it? My hybrid webview's height is not setting to 100%. The html pages inside web view are neglecting height:100% property. How can set hybrid webview's height to fit screen size?

Manuel Franco Manuel Franco · Accepted Answer · 2017-04-19T06:41:12

I think you need to use a stackLayout o any layout you prefer to reach 100% screen size with Margin, Padding and Spacion set to 0.

  <ContentPage.Content>
     <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0" Spacing="0">
        <local:HybridWebView x:Name="hybridWebView"  Uri="local.html"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
     </StackLayout>
 </ContentPage.Content>

I´m sorry, but I think you can´t debug Html, the reason its that Html its not a programming language that you can debug like C#. What its the features you want to do debugging Html?

Hybrid WebView Navigating and navigated event Xamarin Form

2 Answers