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

Resultado

Descarga el código completo desde mi GitHub.

¡Hasta la próxima!