How to use a DrawingView inside a scrollable layout, in .NET MAUI

Learn how to solve the interactivity issues, on iOS, when using the .NET MAUI Community Toolkit DrawingView inside a scrollable layout.

TLDR: Click here to check a fully working sample that has the fix for the problem explained and solved on this post.

The problem

If you have used the DrawingView control, from .NET MAUI Community Toolkit in your iOS apps, you might have come across an issue where it becomes difficult to interact with it, because the touch event is being captured by another control. This issue happens when the DrawingView control is wrapped by a scrollable layout (eg. ScrollView, TableView). (See GitHub issue)

The explanation

This issue is caused by a specific behavior that exists on iOS. There is an implicit timer when a touch gesture begins in an UIScrollView, that is used by the platform to decide what to do with that gesture based on user action (see here). This timer is causing the gesture to be passed on to the ScrollView instead of the DrawingView control.

The solution

Good news is, that the UIScrollView control on iOS has a property called DelaysContentTouches that allows the developer to decide if such a delay timer should be used or not. By default this property is set to true, so we’ll need to explicitly disable it.

NOTE: I’ll show you how you can solve this issue when using a ScrollView and TableView. If you’re using a different type of scrollable layout in your .NET MAUI app, the solution might be similar, so continue reading !

Fix for ScrollView
You can use an extension provided by .NET MAUI that allows you to directly control the value of the DelaysContentTouches.

<ContentPage
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">

    <ScrollView ios:ScrollView.ShouldDelayContentTouches="false">

        <DrawingView />

    </ScrollView>

</ContentPage>

Fix for TableView
The extension to manipulate the DelaysContentTouches works specifically for ScrollView, so we’ll need to do a bit more work to solve the issue for TableView.
There are two possible solutions I can think of:
- create a specific extension for TableView
OR
- override the renderer of the TableView

I’ll show you the renderer approach, so that will get you going.

If you take a closer look at the implementation of the TableViewRenderer for iOS, you’ll notice that the TableView is mapped to a UITableView. Furthermore, the UITableView is a subclass of UIScrollView, which means that it also has the same DelaysContentTouches property!

We just need to override the renderer and set this property to true!

public class MyTableViewRenderer : TableViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // Apply the fix for the TableViewRenderer on iOS
                Control.DelaysContentTouches = false;
            }
        }
    }

Don’t forget to register the custom renderer!

public static MauiApp CreateMauiApp()
 {
  var builder = MauiApp.CreateBuilder();
  builder
   .UseMauiApp<App>()
   .UseMauiCommunityToolkit()
   .ConfigureFonts(fonts =>
   {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
   })
            .ConfigureMauiHandlers((handlers) =>
            {
#if IOS
                handlers.AddHandler(typeof(TableView), typeof(Platforms.iOS.Renderers.MyTableViewRenderer));
#endif
            });

Conclusion
I’ve shown you how to avoid the annoying interaction delay when using a DrawingView is inside a scrollable layout, in .NET MAUI for iOS. Hope it’s helpful and feel free to share your thoughts about this post.

Here you can find a working sample with the implementation suggestion s described on this post.