How to Zoom in Images [Xamarin.Forms]

Introducción

En este artículo veremos de una manera fácil y rápida cómo efectuar el acercamiento o Zoom, como se le conoce a nuestras imágenes dentro de nuestra aplicación de Xamarin.Forms.

Comencemos
Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado esto, procedamos a crear una clase estática a la cual denominaremos “ZoomExtension” en el proyecto compartido.

using System;

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

Posterior a esto deberemos de crear otra clase en la misma ruta, la cual será responsable de capturar el GestureStatus y aplicar el zoom en la imagen, llamemosla ” ZoomGestureContainer “.

using System;
using Xamarin.Forms;

namespace ZoomImageDemo
{
    public class ZoomGestureContainer : ContentView
    {
        double currentScale = 1;
        double startScale = 1;
        double xOffset = 0;
        double yOffset = 0;

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

        void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
        {
            if (e.Status == GestureStatus.Started)
            {
                startScale = Content.Scale;
                Content.AnchorX = 0;
                Content.AnchorY = 0;
            }
            if (e.Status == GestureStatus.Running)
            {
                currentScale += (e.Scale - 1) * startScale;
                currentScale = Math.Max(1, currentScale);

                double renderedX = Content.X + xOffset;
                double deltaX = renderedX / Width;
                double deltaWidth = Width / (Content.Width * startScale);
                double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

                double renderedY = Content.Y + yOffset;
                double deltaY = renderedY / Height;
                double deltaHeight = Height / (Content.Height * startScale);
                double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

                double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
                double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

                Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
                Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);

                Content.Scale = currentScale;
            }
            if (e.Status == GestureStatus.Completed)
            {
                xOffset = Content.TranslationX;
                yOffset = Content.TranslationY;
            }
        }
    }
}

Para poder comprobar que lo que llevamos hasta ahora funciona, deberemos agregar una imagen en nuestra página MainPage.xaml especificando que va dentro de nuestro ZoomGestureContainer.

XAML