How to enable zoom in and zoom out on a contentpage in xamarin forms?

Question

How can I enable zoom on a contentpage in xamarin.forms? Is it possible to enable it on the entire contentpage? Or is it only possible to zoom in on images?

Answer 1

You can use the pinch gesture inside a ContentPage , here is the official page:

https://developer.xamarin.com/guides/xamarin-forms/user-interface/gestures/pinch/

and for the entire project sample:

https://github.com/xamarin/xamarin-forms-samples/tree/master/WorkingWithGestures/PinchGesture

Here is an example of what you can achieve:

Xamarin.Forms Pinch Example

Answer 2

Try this Class , this solution do not scroll when you zoom . Source found here: Source Code

    public class PinchToZoomContainer : ContentView {
    double currentScale = 1;
    double startScale = 1;
    double xOffset = 0;
    double yOffset = 0;

    public PinchToZoomContainer ()
    {
        var pinchGesture = new PinchGestureRecognizer ();
        pinchGesture.PinchUpdated += OnPinchUpdated;
        GestureRecognizers.Add (pinchGesture);
    }

    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;
        }
    }
}

Helper DoubleExtensions

    public static class DoubleExtensions
{
    public static double Clamp (this double self, double min, double max)
    {
        return Math.Min (max, Math.Max (self, min));
    }
}

Answer 3

You can try using the Scale Api on the Content page. This seemed to work for me on a small test app.

public App ()
{
    // The root page of your application
    var scaleUp = new Button {
        Text = "Scale Up"
    };
    scaleUp.Clicked += (sender, e) => {
        this.MainPage.Scale += 1;
    };

    var scaleDown = new Button {
        Text = "Scale Down"
    };
    scaleDown.Clicked += (object sender, EventArgs e) => {
        this.MainPage.Scale -= 1;
    };

    MainPage = new ContentPage {
        Content = new StackLayout {
            VerticalOptions = LayoutOptions.Center,
            Children = {
                scaleUp,
                scaleDown

            }
        }
    };
}

Answer 4

Trying to use this in conjunction with other controls that take the Pan/scroll gesture seems to fail. ScrollView and ListView for example grab the Pinch gesture even though they themselves don't Pinch but they do scroll/pan. So it seems like Pinch inherits/uses that gesture so it is grabbed by the wrapped control. This seems to make Pinch a very niche feature that can only work on very static views of Label and Image for example, but nothing more complex.

Answer 5

You can use gestures. Sample here : http://arteksoftware.com/gesture-recognizers-with-xamarin-forms/