xamarin forms zoomable image (Cross Platform) - xamarin

Question

Is there a way to use pinch to zoom in shared Xamarin Forms, I only found an implementation for each platform.

Answer 1

You can use the Pan Gesture to implement it.
There is a good sample of wrapping an image in PanContainer available here - Adding a Pan Gesture Recognizer.
The pan gesture is used for detecting dragging and is implemented with
the PanGestureRecognizer class. A common scenario for the pan gesture
is to horizontally and vertically drag an image, so that all of the
image content can be viewed when it's being displayed in a viewport
smaller than the image dimensions. This is accomplished by moving the
image within the viewport.
Simple Example :
<Image Source="MonoMonkey.jpg">
<Image.GestureRecognizers>
<PanGestureRecognizer PanUpdated="OnPanUpdated" />
</Image.GestureRecognizers>
</Image>
Pan Container example XAML:
<AbsoluteLayout>
<local:PanContainer>
<Image Source="MonoMonkey.jpg" WidthRequest="1024" HeightRequest="768" />
</local:PanContainer>
</AbsoluteLayout>
Code behind :
public class PanContainer : ContentView
{
double x, y;
public PanContainer ()
{
// Set PanGestureRecognizer.TouchPoints to control the
// number of touch points needed to pan
var panGesture = new PanGestureRecognizer ();
panGesture.PanUpdated += OnPanUpdated;
GestureRecognizers.Add (panGesture);
}
void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
switch (e.StatusType) {
case GestureStatus.Running:
// Translate and ensure we don't pan beyond the wrapped user interface element bounds.
Content.TranslationX =
Math.Max (Math.Min (0, x + e.TotalX), -Math.Abs (Content.Width - App.ScreenWidth));
Content.TranslationY =
Math.Max (Math.Min (0, y + e.TotalY), -Math.Abs (Content.Height - App.ScreenHeight));
break;
case GestureStatus.Completed:
// Store the translation applied during the pan
x = Content.TranslationX;
y = Content.TranslationY;
break;
}
}
}

Answer 2

You can try this modification I made and verified on .NET Maui to TBertuzzi/Xamarin.Forms.PinchZoomImage to:
Adjust image boundaries for not offsetting it while pan gesture.
Sleep for .2 seconds after zoom for pan prevent.
Do not zoom over 4 times.
And it can be used as container like this after importing from appropriate namespace:
<? xml version = "1.0" encoding = "utf-8" ?>
< ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml"
xmlns: collects = "clr-namespace:Mab.Collects"
x: Class = "N3ema.Secondpageimageshow" >
< ContentPage.Content >
< collects:Zoom >
< collects:Zoom.Content >
< StackLayout >
< Image Source = "shahid.jpeg"
HorizontalOptions = "Fill"
Aspect = "Fill"
VerticalOptions = "FillAndExpand" />
</ StackLayout >
</ collects:Zoom.Content >
</ collects:Zoom >
</ ContentPage.Content >
</ ContentPage >