Learn to zoom your images in your xamarin forms applications

1. Ing. Vicente Guzmán
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;

2. Ing. Vicente Guzmán
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;
}
}
}
}

3. Ing. Vicente Guzmán
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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ZoomImageDemo"
x:Class="ZoomImageDemo.MainPage">
<Grid Padding="20" >
<local:ZoomGestureContainer>
<local:ZoomGestureContainer.Content>
<Image Source="GitIronMan.jpg" />
</local:ZoomGestureContainer.Content>
</local:ZoomGestureContainer>
</Grid>
</ContentPage>
Resultado

4. Ing. Vicente Guzmán
Descarga el código completo desde mi GitHub.
¡Hasta la próxima!