MAUI iOS - DrawingView inside ScrollView does not draw. Attempted drawing trigger scrolling instead of drawing. (works fine on android)

[mahesh139]

Is there an existing issue for this?

• [X] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When DrawingView is used inside scroll view, attempt to draw triggers scrolling on iOS and drawing does not work. this works fine on android.

I am trying to migrate Xamarin Forms app to MAUI and need to replace signature pad on the form with drawing view. this is a blocker for my migration.

Expected Behavior

DrawingView inside scroll view must work fine on iOS like android. Drawing must not trigger scrolling.

Steps To Reproduce

I have provided link to reproduction repository and video with demo app.

Steps: (problem only on iOS, android works fine)

Create Default MAUI App Add community toolkit to use drawing view Updated MauiProgram.cs and add .UseMauiCommunityToolkit() to builder. Update main page xaml to have drawing view inside scroll view, make sure there is enough content before and after drawing view to have scroll bar on the page try to draw on drawing view (vertically), page scrolls instead of drawing on drawing view.

https://github.com/CommunityToolkit/Maui/assets/11797119/bfee73bf-5a94-46be-aa5c-58c9062398d6

Link to public reproduction project repository

https://github.com/mahesh139/MAUIDrawingView

Environment

- .NET MAUI CommunityToolkit:8.0.1
- OS:Windows 10
- .NET MAUI:8.0.7

Anything else?

No response

[zleao]

I have the same issue, when placing the DrawingView inside a CollectionView. Problem only on iOS. Android works great. It looks like the swipping event is being passed to from the DrawingView to the Parent Control (CollectionView or ScrollView)

[imuller]

Same issue here on iOS. Also when placed inside a Modal page that scrolls when the user interacts with it.

[imuller]

Possible solution might be this: https://github.com/xamarin/SignaturePad/blob/master/src/SignaturePad.iOS/InkPresenter.cs

See line: 34

// If you put SignaturePad inside a ScrollView, this line of code prevent that the gesture inside
// an InkPresenter are dispatched to the ScrollView below
public override bool GestureRecognizerShouldBegin (UIGestureRecognizer gestureRecognizer) => false

[imuller]

Other solution is to use SkiaSharp: https://github.com/dotnet/maui/discussions/18758

[bijington]

2 things:

• how many cracks do you have on that screen 😂

• I agree we should fix something around this but I would question the UX of allowing a user to draw inside a scrollable page. An alternative solution which I think bring a better user experience is to allow the user to tap on the signature area and then show the DrawingView

[mahesh139]

2 things:

• how many cracks do you have on that screen 😂
• I agree we should fix something around this but I would question the UX of allowing a user to draw inside a scrollable page. An alternative solution which I think bring a better user experience is to allow the user to tap on the signature area and then show the DrawingView

On a lighter note... it has less cracks than MAUI :) and doing its testing job nicely. I will do something about phone once MAUI is stable and i can complete my migration hehe.

Back to Problem: When you have a form with question / answers and signatures in between, it will be bad experience for users to tap and go out for signature and than come back and that too multiple times. works fine in android and expectation is that it must work fine for iOS too.

[bijington]

I don't agree that it would be a bad user experience. Having that explicit mode makes more sense to me. Imagine a user attempts to scroll and then accidentally signs in the box instead, if your app requires the user to sign you're opening up to accidental signatures which sounds bad.

Anyway I don't disagree that we shouldn't try and fix something

[zleao]

I solved this problem, by addding the ios:ScrollView.ShouldDelayContentTouches="false" to the ScrollView that contains the DrawingView:

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

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

more info here: https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/scrollview-content-touches?view=net-maui-8.0

[bijington]

@zleao thank you for sharing that! I think we should add that detail to the documentation for the toolkit and that might be all we can do for now.

[bijington]

https://github.com/MicrosoftDocs/CommunityToolkit/pull/423

[mahesh139]

Thanks @zleao ios:ScrollView.ShouldDelayContentTouches="false" works fine.

[bijington]

I am going to close this issue now that the documentation covers the solution

[mnidhk]

Maybe the ShouldDelayContentTouches works for a scrollview but i use the drawingpad in a tableview which has scroll capabilities. On iOS it still scrolls the tableview when to want draw a signature. When i put my finger at the drawingpad, wait for a couple milliseconds, then i can write the signature ( in one stroke, up and down, right and left) Second stroke i need to do the same, Works great on Android. (on XF, it also works great on iOS with the signature pad nuget) Another workaround/possibility when using the drawing pad in not a scrollview?

[zleao]

@mnidhk The TableView in .Net MAUI is mapped to a UITableView for iOS (see here).

The UITableView is a subclass of UIScrollView, which means it has the same capabilities, like the delayContentTouches. You might not be able to directly use the ios:ScrollView.ShouldDelayContentTouches="false" (Haven't tried it so not sure), but maybe you can add this behavior by overriding the TableViewRenderer for iOS

[zleao]

@mnidhk FYI, I've wrote a blog post with an explanation of a possible solution for this problem, for ScrollView and TableView.

https://medium.com/medialesson/how-to-use-a-drawingview-inside-a-scrollable-layout-in-net-maui-2a080e32cdb4

[mnidhk]

@mnidhk FYI, I've wrote a blog post with an explanation of a possible solution for this problem, for ScrollView and TableView.

https://medium.com/medialesson/how-to-use-a-drawingview-inside-a-scrollable-layout-in-net-maui-2a080e32cdb4

Thnx for the info! Working great!