Pinch Zoom and DrawingView in Maui

Question

I would like to have a Pinch Zoom container surround a drawing view in Maui. This works perfectly good in iOS but it does not work for Android. The drawing view for Android captures the dual touch.

I have tried a lot of different methods to work around this. I have even settled with a button toggle to disable/enable the drawing view. It still captures the touch input. I even tied this to the InputTransparent property, as well as a CascadeInputTransparent. This works once, sometimes. Although InputTransparent is bindable, for the Android I can only toggle it one time, even if I use a Dispatcher. After its been toggled it will no longer work again.

I have created a Repo to this issue. https://github.com/AustinOberholtzer/PinchZoomDraw

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pinchZoom="using:PinchZoom"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="PinchZoom.MainPage"
             x:Name="View">

    <Grid
        HorizontalOptions="Fill"
        VerticalOptions="Fill"
        BindingContext="{Binding Source={x:Reference Name=View}}">

        <pinchZoom:PinchContainer
            IsClippedToBounds="True"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All">

            <Grid>
                <Image
                    Source="xp.jpg"
                    Aspect="AspectFit"/>

                <toolkit:DrawingView
                    BackgroundColor="Transparent"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    IsMultiLineModeEnabled="True"
                    ShouldClearOnFinish="False" />
            </Grid>
        </pinchZoom:PinchContainer>

    </Grid>

</ContentPage>

Answer 1

It can be achieved by button and OnInterceptTouchEvent/OnTouchEvent:

Add a button in MainPage:

<ContentPage ...>

   <Grid RowDefinitions="50,*"
         ...>

       <Button Grid.Row="0" Text="Disable" Clicked="Button_Clicked"/>
        
        <pinchZoom:PinchContainer
            Grid.Row="1"
            ....>

           <Grid>
                <Image
                    Source="xp.jpg"
                    Aspect="AspectFit"/>

               <toolkit:DrawingView .../>                
            </Grid>
        </pinchZoom:PinchContainer>
   </Grid>
</ContentPage>

MainPage.xaml.cs like this:

namespace PinchZoom
{
    public partial class MainPage : ContentPage
    {
        public static bool flag = false;
        
        public MainPage()
        {
            InitializeComponent();
        }


       private void Button_Clicked(object sender, EventArgs e)
        {
            flag = !flag;
        }
    }
}

Create a ContentViewHandlerEx.cs in Platforms/Android:

using Android.Content;
using Android.Views;
using Microsoft.Maui.Controls.Handlers.Compatibility;


namespace PinchZoom.Platforms.Android
{
    public class ContentViewHandlerEx : ViewRenderer
    {
        public ContentViewHandlerEx(Context context) : base(context)
        {
        }


       public override bool OnInterceptTouchEvent(MotionEvent? ev)
        {
            //return base.OnInterceptTouchEvent(ev);
            return MainPage.flag;
        }
        public override bool OnTouchEvent(MotionEvent? e)
        {
            //return base.OnTouchEvent(e);
            return MainPage.flag;
        }
    }
}

Add ContentViewHandlerEx to AddHandler:

using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;
#if ANDROID
using PinchZoom.Platforms.Android;
#endif

namespace PinchZoom
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    .....
                })
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler<PinchContainer,ContentViewHandlerEx>();
#endif
                });

          ......

        }
    }
}

Hope it can help you!