Zoom em Imagens – Xamarin.Forms

Olá, neste post irei demonstrar como você pode implementar zoom nas imagens em suas aplicações Xamarin.Forms de uma maneira fácil e rápida utilizando custom renderer.

Comece criando a classe estática chamada “DoubleExtensions” no projeto compartilhado.

DoubleExtensions.cs

	using System;

	namespace DemoZoomImage
	{
	public static class DoubleExtensions
	{

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

	}
	}

view raw

DoubleExtensions.cs

hosted with ❤ by GitHub

Em seguida crie a classe “PinchToZoomContainer” em seu projeto compartilhado, ela será responsável em capturar o GestureStatus e aplicar o zoom na imagem.

PinchToZoomContainer.cs

	using System;
	using Xamarin.Forms;

	namespace DemoZoomImage
	{
	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;
	}
	}
	}
	}

view raw

PinchToZoomContainer.cs

hosted with ❤ by GitHub

Xaml

Para utilizar no arquivo xaml, adicione uma Image dentro do PinchToZoomContainer.Content como demonstrado a seguir.

	<?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:DemoZoomImage"
	x:Class="DemoZoomImage.MainPage">

	<Grid Padding="20">
	<local:PinchToZoomContainer>
	<local:PinchToZoomContainer.Content>
	<Image Source="wallpaper.jpg"/>
	</local:PinchToZoomContainer.Content>
	</local:PinchToZoomContainer>
	</Grid>

	</ContentPage>