Zommable ScrollView in Xamarin Forms

 Xamarin Form Project

Create the interface in your Xamarin Form Project.

ZoomableScrollView.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
 
namespace TestApp.Renderer
{
    public class ZoomableScrollView : ScrollView
    {
    }
}
 

Now Create a Dependency Service in your Xamarin Android & Xamarin iOS Project.

Xamarin Android Project (ZoomableScrollViewRenderer.cs)

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Views.Animations;
using Android.Widget;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TestApp.Droid.CustomRenderers;
using TestApp.Renderer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using static Android.Views.ScaleGestureDetector;
 
[assembly: ExportRenderer(typeof(ZoomableScrollView), typeof(ZoomableScrollViewRenderer))]
namespace TestApp.Droid.CustomRenderers
{
    public class ZoomableScrollViewRenderer :  ScrollViewRenderer, IOnScaleGestureListener
    {
        private float mScale = 1f;
        private ScaleGestureDetector mScaleDetector;
        public ZoomableScrollViewRenderer(Context context) : base(context)
        {
 
        }
 
        public bool OnScale(ScaleGestureDetector detector)
        {
            float scale = 1 - detector.ScaleFactor;
 
            float prevScale = mScale;
            mScale += scale;
 
            if (mScale < 0.5f) // Minimum scale condition:
                mScale = 0.5f;
 
            if (mScale > 1f) // Maximum scale condition:
                mScale = 1f;
            ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1f / prevScale, 1f / mScale, detector.FocusX, detector.FocusY);
            scaleAnimation.Duration = 0;
            scaleAnimation.FillAfter = true;
            StartAnimation(scaleAnimation);
            return true;
        }
 
        public override bool DispatchTouchEvent(MotionEvent e)
        {
            base.DispatchTouchEvent(e);
            return mScaleDetector.OnTouchEvent(e);
        }
 
        public bool OnScaleBegin(ScaleGestureDetector detector)
        {
            return true;
        }
 
        public void OnScaleEnd(ScaleGestureDetector detector)
        {
        }
 
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
 
            base.OnElementChanged(e);
            mScaleDetector = new ScaleGestureDetector(Context, this);
 
        }
    }
}

Xamarin iOS Project (ZoomableScrollViewRenderer.cs)

using Foundation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TestApp.iOS.CustomRenderers;
using TestApp.Renderer;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
 
[assembly: ExportRenderer(typeof(ZoomableScrollView), typeof(ZoomableScrollViewRenderer))]
namespace TestApp.iOS.CustomRenderers
{
    public class ZoomableScrollViewRenderer : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            MaximumZoomScale = 3f;
            MinimumZoomScale = 1.0f;
 
        }
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
 
            if (Subviews.Length > 0)
            {
                ViewForZoomingInScrollView += GetViewForZooming;
            }
            else
            {
                ViewForZoomingInScrollView -= GetViewForZooming;
            }
 
        }
        public UIView GetViewForZooming(UIScrollView sv)
        {
            return this.Subviews.FirstOrDefault();
        }
    }
}

How to Use (Xamarin Form Project)

MainPage.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:renderer="clr-namespace:TestApp.Renderer"
             x:Class="TGS_Event_App.MainPage">
 
    <renderer:ZoomableScrollView >
        <StackLayout>
            <!-- Content -->
        </StackLayout>
    </renderer:ZoomableScrollView>
</ContentPage>