A WebView or Image control which zooms

HArayaHAraya USMember ✭✭

I need a control which allows the user to Pinch and zoom using xamarin.forms.

I need to display an image in the control and allow the user to zoom it.

Currently I am using WebView to display my image in the app but I am not able to zoom from my device.


  • DirkWeltzDirkWeltz DEMember ✭✭✭

    @HAraya: If you say, you aren't able to zoom from your device, do you mean, that you couldn't do it by program?

    I'm looking also for such a control, but don't know, if WebView is fast enough? How do you insert the images? With Base64? Couldn't you make the zoom with your HTML code?

  • HArayaHAraya USMember ✭✭
    edited September 2014

    Hi Dirk Weltz, I have my html with a meta tag as shown below. but the problem is that the zoom is not consistent.
    My page zooms first time you open the page but does not zoom later.

    WebView v = new WebView();
    v.Source = new HtmlWebViewSource { BaseUrl = Config.Url, Html = html };

    where html is

    <!DOCTYPE html>
    <html lang="en-us">
        <meta name="viewport" content="width=device-width, initial-scale=0.25, user-scalable=yes" />
            body {
                margin: 0 20px 0 0;
                font-family: HelveticaNeue-Light, HelveticaNeue-UltraLight, Helvetica, Consolas, 'Courier New';
        <img src="data:image/png;base64, imagedata" style="width:100%" />
  • HArayaHAraya USMember ✭✭

    I changed the meta tag to this and zooming started working consistently.
    <meta name="viewport" content="width=device-width, initial-scale=0.25, maximum-scale=3.0 user-scalable=1">

  • LakshyaLakshya Member ✭✭✭

    Hi, HAraya
    Could you please post your code...

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    You can see the code two messages above.

  • SzbestaSzbesta Member ✭✭✭

    @Aswathy This should work as well->basically a wrapper for any forms element, which makes it zoomable.

    The Wrapper class:

                public class PinchToZoomContainer : ContentView
                  public PinchToZoomContainer ()
                    var pinchGesture = new PinchGestureRecognizer ();
                    pinchGesture.PinchUpdated += OnPinchUpdated;
                    GestureRecognizers.Add (pinchGesture);
                  void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)

    The Gesture Function:

        void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
          if (e.Status == GestureStatus.Started) {
            // Store the current scale factor applied to the wrapped user interface element,
            // and zero the components for the center point of the translate transform.
            startScale = Content.Scale;
            Content.AnchorX = 0;
            Content.AnchorY = 0;
          if (e.Status == GestureStatus.Running) {
            // Calculate the scale factor to be applied.
            currentScale += (e.Scale - 1) * startScale;
            currentScale = Math.Max (1, currentScale);
            // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
            // so get the X pixel coordinate.
            double renderedX = Content.X + xOffset;
            double deltaX = renderedX / Width;
            double deltaWidth = Width / (Content.Width * startScale);
            double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;
            // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
            // so get the Y pixel coordinate.
            double renderedY = Content.Y + yOffset;
            double deltaY = renderedY / Height;
            double deltaHeight = Height / (Content.Height * startScale);
            double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;
            // Calculate the transformed element pixel coordinates.
            double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
            double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);
            // Apply translation based on the change in origin.
            Content.TranslationX = targetX.Clamp (-Content.Width * (currentScale - 1), 0);
            Content.TranslationY = targetY.Clamp (-Content.Height * (currentScale - 1), 0);
            // Apply scale factor.
            Content.Scale = currentScale;
          if (e.Status == GestureStatus.Completed) {
            // Store the translation delta's of the wrapped user interface element.
            xOffset = Content.TranslationX;
            yOffset = Content.TranslationY;

    Code is from https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pinch if you need more info on this ecerything is there.

  • SzbestaSzbesta Member ✭✭✭

    @Aswathy Well you have the pinch gesture recognizer in the last post. If you need a pan gesture recognizer the following page demonstrates that perfectly https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pan <-Hope it helps
    Unfortunately I don't have time to go through your code line by line.

Sign In or Register to comment.