Xamarin Forms Zoom in Zoom out in Web view Does not work Smoothly

lak1104lak1104 Member ✭✭

I an Custom Render Webview In that I load a Pdf. When that Pdf is trying to zoom in or zoom out. I can clearly see lacking. Frist, I thought it's the android problem then I download pdf and try it It's okay it runs smoothly.

Here my code

In the shared Project

   public class CustomWebView : WebView
{
 public static readonly BindableProperty UriProperty = BindableProperty.Create(nameof(Uri),typeof(string),typeof(CustomWebView),default(string));

 public string Uri
 {
    get => (string)GetValue(UriProperty);
    set => SetValue(UriProperty, value);
 }       

}
In anrioid Custom Render Like this

   public class CustomWebViewRenderer : WebViewRenderer
{
public CustomWebViewRenderer(Context context) : base(context)
{
}

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

    if (e.NewElement != null)
    {              
        Control.Settings.AllowUniversalAccessFromFileURLs = true;                   
        Control.Settings.BuiltInZoomControls = true;
        Control.Settings.DisplayZoomControls = true;

    }
    this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
  }
  protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
  {
    if (e.PropertyName != "Uri") return;
    var customWebView = Element as CustomWebView;
    if (customWebView != null)
    {
        Control.LoadUrl(string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", string.Format("file:///android_asset/Content/{0}", 
   WebUtility.UrlEncode(customWebView.Uri))));        
    }
 }

    }

It's getting the pdf and also it's showing without problem but when zoom in or out clearly can see the latching How to solve this latching problem.

The zoom in/out function in Webview is not smooth

Best Answer

Answers

  • yelinzhyelinzh Member, Xamarin Team Xamurai

    With the EnableZoomControls you enable the zooming capabilities. Try to add the code in your WebViewRenderer.cs.

    void UpdateEnableZoomControls()
    {
        var value = Element.OnThisPlatform().ZoomControlsEnabled();
        Control.Settings.SetSupportZoom(value);
        Control.Settings.BuiltInZoomControls = value;
    }
    
    void UpdateDisplayZoomControls()
    {
        Control.Settings.DisplayZoomControls = Element.OnThisPlatform().ZoomControlsDisplayed();
    }
    

    Tutorial :
    https://blog.verslu.is/xamarin/xamarin-forms-xamarin/zooming-android-webview-xamarin-forms/
    Code :
    https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/WebViewRenderer.cs

  • lak1104lak1104 Member ✭✭

    @yelinzh It does not recognize the ZoomControlsDisplayed() method

  • yelinzhyelinzh Member, Xamarin Team Xamurai
    edited June 4

    Sorry for that, I am reseraching how to use ZoomControlsDisplayed.

    You can try to turn on hardware acceleration and add the following settings.

    Control.SetLayerType(LayerType.Hardware,null);
    
    bool isZoom = Control.Settings.SupportZoom();//Gets whether the WebView supports zoom.
    Control.Settings.BuiltInZoomControls = true;//Gets whether the zoom mechanisms built into WebView are being used.
    Control.Settings.DisplayZoomControls = false;
    
  • lak1104lak1104 Member ✭✭

    @yelinzh But In anroid, it does not recognize LayerType.hardware gives an error like this

    Member 'LayerType.Hardware' cannot be accessed with an instance reference; qualify it with a type name instead  
    
  • yelinzhyelinzh Member, Xamarin Team Xamurai

    I deployed the code and no errors occurred.
    See the tutorial: https://docs.microsoft.com/en-us/dotnet/api/android.views.layertype

  • lak1104lak1104 Member ✭✭

    @yelinzh The zoom is working when I take off my hand from the touch I need also it to zooming when it's on touch

Sign In or Register to comment.