Image zoom in Xamarin forms - ios

Question

I want to implement Xamarin forms image zoom property. I did search the internet for quite some time but I didn't find any relevant documentation, can anyone provide me some information on how to implement it in Xamarin Forms?

Answer 1

Currently there is no zoom property for image. You have to use custom renderer to acheive that.
Try using ScaleTo, Itz similar to zoom but not exactly zoom functionality.. Hope it helps...
var img = new Image {
Source = "foo.png",
Scale = .9
};
var stepper = new Stepper {
Minimum = .1,
Maximum = 1,
Increment = .1,
Value = .9,
};
stepper.ValueChanged += async (object sender, ValueChangedEventArgs e) => {
img.ScaleTo(e.NewValue);
};

Answer 2

I had the same need to implement zoom, click, ... on images on Xamarin Forms.
On the forum i find a plugin that define custom renderers for the 3 platforms that can allow you to get coordinates of click on image and then to implement the zoom you want to do.
Here the website of the plugin : http://www.mrgestures.com/
It costs 10euros for every application you develop. Depending on what you need to implement and how many times you will need it it's not expensive at all.

Answer 3

The issue comes with scale property that its scaled to the center of x and y ,
I've implemented this extension no need for extra renderer.
public static Task<bool> ScaleTo(this VisualElement view, double scale, double anchorX, double anchorY, uint length = 250, Easing easing = null)
{
var tcs = new TaskCompletionSource<bool>();
if (easing == null)
{
easing = Easing.Linear;
}
new Animation(
(v) =>
{
view.Scale = scale;
view.AnchorX = anchorX;
view.AnchorY = anchorY;
}, 0, length
).Commit(view, nameof(view), 16, length, easing, finished: (f, a) => tcs.SetResult(a));
return tcs.Task;
}

Answer 4

You can implement pinch to zoom by using a pinch gesture recognizer.
Here is the documentation on pinch to zoom
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pinch
At the same time if you want to add pan, you can combine the above code with
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pan
Then you would have a pretty good full screen image viewer in Xamarin.Forms

Answer 5

You can use this library, just install on your .netstandard project and that's it!
You can then use Rg.Plugin.Popup and add the image dynamically by providing the link
xmlns:pinch="clr-namespace:Xamarin.Forms.PinchZoomImage;assembly=Xamarin.Forms.PinchZoomImage"
<pinch:PinchZoom.Content>
<Image Source="xxamarin.jpg" />
</pinch:PinchZoom.Content>