[Bug] Xamarin Forms Using Shell, Pinch to Zoom performance issue with Android

[blackadder1000]

I have a Xamarins Form Shell project with a PinchToZoom code for a Content view. This works perfectly on IOS but on Android it's terrible. I have seen mentions of similar in the past but wondered if anyone has fixed this or worked around it?

My Code...

` public class PinchToZoomContainer : ContentView { private const double MIN_SCALE = 1; private const double MAX_SCALE = 4; private const double OVERSHOOT = 0.15; private double StartScale; private double LastX, LastY, StartX, StartY;

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

        var pan = new PanGestureRecognizer();
        pan.PanUpdated += OnPanUpdated;
        GestureRecognizers.Add(pan);

        var tap = new TapGestureRecognizer { NumberOfTapsRequired = 2 };
        tap.Tapped += OnTapped;
        GestureRecognizers.Add(tap);

        Scale = MIN_SCALE;
        TranslationX = TranslationY = 0;
        AnchorX = AnchorY = 0;
    }

    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
    {
        Scale = MIN_SCALE;
        TranslationX = TranslationY = 0;
        AnchorX = AnchorY = 0;
        return base.OnMeasure(widthConstraint, heightConstraint);
    }

    public void OnTapped(object sender, EventArgs e)
    {
        if (Scale > MIN_SCALE)
        {
            this.ScaleTo(MIN_SCALE, 250, Easing.CubicInOut);
            this.TranslateTo(0, 0, 250, Easing.CubicInOut);
        }
        else
        {
            AnchorX = AnchorY = 0.5; //TODO tapped position
            this.ScaleTo(MAX_SCALE, 250, Easing.CubicInOut);
        }
    }

    public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                StartX = (1 - AnchorX) * Width;
                StartY = (1 - AnchorY) * Height;
                break;
            case GestureStatus.Running:
                AnchorX = Clamp(1 - (StartX + e.TotalX) / Width, 0, 1);
                AnchorY = Clamp(1 - (StartY + e.TotalY) / Height, 0, 1);
                break;
        }
    }

    public void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
    {
        switch (e.Status)
        {
            case GestureStatus.Started:
                StartScale = Scale;
                AnchorX = e.ScaleOrigin.X;
                AnchorY = e.ScaleOrigin.Y;
                break;
            case GestureStatus.Running:
                double current = Scale + (e.Scale - 1) * StartScale;
                Scale = Clamp(current, MIN_SCALE * (1 - OVERSHOOT), MAX_SCALE * (1 + OVERSHOOT));
                break;
            case GestureStatus.Completed:
                if (Scale > MAX_SCALE)
                    this.ScaleTo(MAX_SCALE, 250, Easing.SpringOut);
                else if (Scale < MIN_SCALE)
                    this.ScaleTo(MIN_SCALE, 250, Easing.SpringOut);
                break;
        }
    }

    private T Clamp<T>(T value, T minimum, T maximum) where T : IComparable
    {
        if (value.CompareTo(minimum) < 0)
            return minimum;
        else if (value.CompareTo(maximum) > 0)
            return maximum;
        else
            return value;
    }
}

`

[jsuarezruiz]

@blackadder1000 In order to do some tests, some questions:

• What version of Xamarin.Forms are you using?
• Happens if you use the PinchToZoomContainer without a Shell?
• If you have a small example where reproduce the example, could you attach it?

[blackadder1000]

Hi

Xamarin forms is 4.8.0.1560.

I will create a project now without a shell to test.

Thanks

Mike

[blackadder1000]

HI @jsuarezruiz while creating the test projects and playing I have discovered exactly what causes the issue. If the Pinch to zoom container is inside a scroll view then you get the problem, if no scollview then UI behaves. This is a bit of a pain because of the screen contents. I have three images, two fits on the page third you can scroll down to see.

The below code works... but originally had scrollview around top stacklayout.

Should I be able to do it?

NON WORKING CODE

`

` WORKING CODE `

</ContentPage.Content>`