Include CSS within WebView in Xamarin Forms with a Source URL (iOS & Android)

Question

I am trying to include some custom css within a webview on xamarin forms so the website being used can be customized with css styles, changing colors or other css style classes.

I have done this before using native code in Xcode and Android Studio, however this project is using xamarin forms and visual studio.

I believe what we need to do is include css within a custom webview renderer for android and ios. (would not be surprised if there was an easier way).

I have tried various methods being shown online and can not find a solution. Searching online there are some methods however they are not for xamarin forms.

Below is a snippet of my xaml:

<WebView x:Name="WebView" Source="https://odapps.org/" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Navigating="WebViewTesti_OnNavigating"/>

Another snippet of my xaml.cs:

public WebViewPage()
        {
            InitializeComponent();
            CheckConnectivity();
            WebView.Navigated += WebView_Navigated;
        }

I am trying to have inline css styles load while using an external source url like google.com.

For those curious, this is how I have done it in xcode and android studio, but need it for Xamarin Forms:

Xcode:

ViewControllers file within xCode

let cssString = "*:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; } footer{display:none;}"

Android Studio:

public void onPageFinished(WebView view, String url)

view.loadUrl("javascript: $('.footer,#sg-smartbanner').css('display','none')");

Lucas Zhang - MSFT Lucas Zhang - MSFT · Accepted Answer · 2019-08-21T07:11:37

You can use Custom Renderer and load the CSS style in iOS.

in iOS project

using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(WebView), typeof(myWebRender))]

namespace xxx.iOS
{
    class myWebRender : WebViewRenderer
    {

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {   // perform initial setup
                UIWebView myWebView = (UIWebView)this.NativeView;
               
            }
        }

        private void LoadFinished(object sender, EventArgs e)
        {
          //. . .

          NSString jsStr= new NSString("xxx");
          webView.EvaluateJavascript(jsStr); 
        }
    }
}

And for Android , you just need to implement it in forms.

webView.Navigated += WebView_Navigated;

private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
   var webview = sender as WebView;

   var jsString = "$('.footer').css('display','none')";

   webview.Eval(jsString);
}

Update

In android , webview will block JS event in default . So you can enable it by using Custom Renderer

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Webkit;
using Android.Widget;

using xxx;
using xxx.Droid;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebViewRenderer))]
namespace xxx.Droid
{
    public class MyWebViewRenderer:WebViewRenderer
    {
        public MyWebViewRenderer(Context context):base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if(Control!=null)
            {

                Android.Webkit.WebView webview =(Android.Webkit.WebView) Control;
                WebSettings settings = webview.Settings;


                settings.JavaScriptEnabled = true;

            }

        }

    }

}

Include CSS within WebView in Xamarin Forms with a Source URL (iOS & Android)

1 Answers

in iOS project

Update