Xamarin.forms: [Enhancement] Android: WebView - Control over Zoom controls

[samhouts]

Rationale

WebViews do not currently expose the zoom controls on Android and pinch-to-zoom cannot be enabled without a custom renderer.

Implementation

Add platform specific methods to WebView:

WebView.On<Android>().EnableZoomControls(true/false);
WebView.On<Android>().DisplayZoomControls(true/false);

Renderer will need to be updated accordingly.

Expected Result

Android

• EnableZoomControls(false) and DisplayZoomControls(true): Default. Cannot zoom the WebView, and no zoom controls are displayed.
• EnableZoomControls(false) and DisplayZoomControls(false): Cannot zoom the WebView, and no zoom controls are displayed.
• EnableZoomControls(true) and DisplayZoomControls(true): Can zoom the WebView with gestures, and default zoom controls are displayed.
• EnableZoomControls(true) and DisplayZoomControls(false): Can zoom the WebView with gestures, and default zoom controls are _not_ displayed.

iOS

No change

UWP

No change

Implications for CSS

None

Backward Compatibility

Since we are adding new properties, there should be no compatibility problems as long as:

1. We ensure that a WebView's zoom defaults to disabled, as is the expected behavior now,
2. We ensure that any Effects or Custom Renderers that may have been created to produce this behavior take precedence over any values that we set, to the best of our ability.

Third party renderers will need to be updated to ensure that this functionality is officially supported.

Difficulty : Easy

This is an easy change and great for a first-time contributor.

[alanag13]

I can take this!

[jassmith]

Hey @alanag13, you still working on this? If not we can move it back to the ready for work column

[alanag13]

I am, I was just waiting for my other PR to be merged since I knew it would conflict with this one. I'll have something soon.

[jassmith]

Thanks a bunch amigo

[cwraks]

Hi all. Good day. This will be very awesome! That being said I know this is probably not the right place to ask this but I'm quite desperate. Can someone kindly help me or point me in the right direction? I need to enable pinch to zoom for iOS. I'm using Xamarin.Forms and have created a custom renderer in my Xamarin.iOS project to enable pinch to zoom using WkWebView, but it's not working. I'm using latest Xamarin Forms. The XAML file is simply a custom webview inside a StackLayout. The renderer OnElementChanged() is shown below. Very many thanks in advance.

`protected override void OnElementChanged(ElementChangedEventArgs e)
{
base.OnElementChanged(e);

        if (Control == null)
        {
            var config = new WKWebViewConfiguration { };

            var webView = new WKWebView(Frame, config);

            webView.ScrollView.MaximumZoomScale = 6f;
            webView.ScrollView.MinimumZoomScale = 0.1f;

            webView.ScrollView.ViewForZoomingInScrollView += (UIScrollView sv) => { return webView; };

            SetNativeControl(webView);
        }
    }`

[alanag13]

@cwraks zooming in wkwebview is enabled by default. If you comment out everything related to the scroll view you should be good.

[alanag13]

If that doesn't work it's possible that another control you have is capturing your input and interfering. In particular, since wkwebview comes with it's own scroll view "attached" you shouldn't have to add one yourself.

[alanag13]

Another gotcha here is that sites will not zoom if their meta viewport html tag is set to disallow this.

[cwraks]

Brilliant! Many thanks @alanag13 for leading me in the right direction! The webpage that was being rendered did have this ''. So I eventually found out that you could use the "IgnoresViewportScaleLimits" property on the WkWebViewConfiguration to ignore the meta viewport, and now it pinches to zoom beautifully!

[alanag13]

I have a local branch of this that is essentially done but I'm probably going to send #1699 first to avoid merge conflicts

[davidortinau]

@alanag13 looks like #1699 is done. Are we ready for this one? We're planning the content of future releases and we should include this in the next if possible.

[alanag13]

@davidortinau absolutely, i can probably send both this and #1632 tonight.

[samhouts]

@alanag13 Did this one get submitted? I don't see the PR in our repo.

[samhouts]

@alanag13 ping! Let us know if you'd like to return this to the backlog. Thanks!

[alanag13]

Hey @samhouts sorry I've been so touch-and-go here. Life got a little busy recently but I think I should be able to get this to you all sometime this week. If I don't then we can go ahead and let someone else do this.

[jfversluis]

Ping me if you can't get it done :)

[alanag13]

As discussed on the twitters, @davidortinau @samhouts sorry to be such a tease for so long about getting this one done! Fatherhood is definitely a blocker for now but I'll make my ( hopefully more predictable ) return to OSS in time. As he is someone who literally wrote the book on XF, I have my confidence in @jfversluis here :-)

[jfversluis]

Thank you for your kind words Alan 🙏

Will get started on this! @samhouts from the first spec I see this:

EnableZoomControls(false) and DisplayZoomControls(true): Default. Cannot zoom the WebView, and no zoom controls are displayed.

I take it the DisplayZoomControls(true) should be DisplayZoomControls(false)? Code and description don't seem to match 🙂

Never mind, I see true is default as per: https://developer.android.com/reference/android/webkit/WebSettings#setDisplayZoomControls(boolean)

So probably they are only shown when Enable is true, _then_ they are shown by default.

[cwraks]

Hi guys a very successful day to you. Not sure if the PR has been tested with the following scenario, but when the webview loads a page that has SSL errors (in this specific case, an idmismatch error), for some weird reason all the zooming function doesn't work (even the zoom controls are not displayed etc). If anyone is able to, can you kindly test by creating a webview with full zooming functionality enabled, then browse to https://obsandgynae.webcodewrite.co.za/terms-and-conditions/ using the webview. In my code I created a custom renderer, and a custom WebViewClient that overrides the "OnReceivedSslError()" method and does a "handler.Proceed()" (effectively ignoring all SSL related errors and carrying on). If there is a solution to this, kindly let me know soonest. Looking forward to your most positive response.

[alanag13]

@cwraks this doesn't work in normal mobile chrome either, which points to a non-xamarin related problem. Looking at the source, I saw this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">. The issue you're experiencing isn't related to SSL -- since your initial and maximum scale are both 1, this disables zooming. Simply removing the maximum-scale attribute should correct this.

[cwraks]

Many thanks @alanag13 you were spot on correct! That attribute was controlled by a "Pinch Zoom" setting on the WordPress theme being used. So I set the option to "On" instead of "Off" and now it zooms like a charm! Much appreciated