How do you implement a custom renderer for webview (which is displaying raw html elements on the page) in Xamarin.Forms.iOS?

Question

I am using WebView in Xamarin.Forms to display html. It's not displaying entire html pages-- just the content which would normally be in the "body" section of an html page (i.e. <h1>Hello</h1>).

However, when the webview is displayed on the page, the displayed html is far too small. Also, there is an issue where the webview does not fill the entire page, even though it should. *Both of these problems do not occur in Android.

Here are some screenshots of the way the html is displayed by the webview in iOS:

simple html paragraph text

larger html element which does not extend to fill the entire page

Here is the code I have in my xaml file:

    <WebView x:Name="webView" HeightRequest="1000" WidthRequest="1000">
        <WebView.Source>
            <HtmlWebViewSource x:Name="announcementHtml"/>
        </WebView.Source>
    </WebView>

And in the code behind, an argument called 'announcement' is passed to the constructor of the page, and I access the raw html with this code: announcementHtml.Html = announcement.Announcement;

You could replicate this in your own project by simply creating a webview on a new page and hardcoding in an html element (like a

, , etc.).

I know that using a custom renderer is the way to solve these problems (or at least the issue of the size of the html), but I do not know how to implement a custom renderer.

Any help would be greatly appreciated!

"I do not know how to implement a custom renderer" - have you read the docs? https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/ — Jason, Sep 10 '20 at 15:15
[iOS webview renderer](https://stackoverflow.com/a/63360358/8935380) — Benl, Sep 10 '20 at 21:07
Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). — nevermore, Sep 15 '20 at 01:38

score 0 · Answer 1 · answered Sep 11 '20 at 06:50

The simplest custom renderer of Webview, you can customizing the webview there:

[assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace App379.iOS
{
    public class MyWebViewRenderer : WkWebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {

                this.ContentMode = UIViewContentMode.ScaleToFill;

            }
        }
    }
}

Refer: Customizing a WebView

How do you implement a custom renderer for webview (which is displaying raw html elements on the page) in Xamarin.Forms.iOS?

1 Answers1