maui
maui copied to clipboard
dotnet
Android: Pinch gesture not working properly in Carousel
Description
We want to have a carousel with images that can be zoomed. We want to swipe so the carousel to change the image, and with pinch and pan gesture we want to zoom in or out or move the zoomed image.
On Android if you have an ContentView with PinchGestureRecognizer added from the code, the pinch event is not triggered at all. In order to trigger the event you have to manually add the PinchGestureRecognizer from the XAML code directly to the Image you want to zoom and call your pinch event from the xaml.cs (as exemplified in the repro). Even though we managed to trigger the pinch event, the problem is that only on Android the event is not triggered correctly. The pinch values are sent chaotic and the image is zoomed very strange. Apart that the Pinch event can be triggered with just one finger which should not be possible.
This issue was found in .net7 we tested both on simulator and real device in debug and release mode.
We found out that if you set the PinchGestureRecognizer in the first Grid of the page, the event triggers correctly and smoothly, this should work in some cases where you have just one picture in the page but in our case we have a carousel-view with images and we want to zoom each image and block the scrolling while zooming. In order to be able to trigger the events on the grid, the carousel-view needs to be set input transparent. But the problem is if the carousel is transparent, we lose the functionality behind with the scrolling.
We tried different scenarios where we manually set the PinchGestureRecognizer directly to the carousell-view or the ZoomContentView but we encountered the same behaviour.
On iOS it works perfectly.
Steps to Reproduce
- Create new Project
- Add a carousell-view
- Implement a ZoomContentView with mathematical calculations behind for the pinch event
- In carousell-view data template add the ZoomContentView where we set the gestures
- Add an image in the content of the ZoomContentView
- Add PinchGestureRecognizer to the image control
- Call the implemented method from ZoomContentView when the PinchGestureRecognizer OnPinchUpdated is triggered.
- The pinch is not working smoothly and it can be triggered with one finger
Link to public reproduction project repository
https://github.com/flesarradu/AndroidPinchGestureIssue
Version with bug
7.0.96
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
No response
Did you find any workaround?
No
Relevant log output
No response
Having investigated this issue further I have found that the Pinch Zoom on Android using the above technique and as documented in Microsoft learn has the same issue with or without being contained in a Carousel view. It is not clear yet if there is an issue with the gesture recogniser or the math used to do the scaling. However using a dedicated Android SimpleOnScaleGestureListener in an Native DotNet Android app does work as expected. Suggest a potential workaround would be to use this via a custom Handler.
Upon further investigation it does appear that the CarouselView on Android does block pinch gestures when IsSwipeEnabled is true. When false Pinch Gestures work as expected allowing pinch to zoom. As a workaround I have found a way to capture 2 finger touch events using th OnTouchEvent handler along with the DownTime property on the MotionEvent to distinguish betweeg single and two finger touch down events. This information can then be used to disable the IsSwipEnabled when two fingers touch events occurs and enable during single finger touch events. Ideally this logic should be baked into the MAUI Carousel so that the behaviour is consistent with other platforms.
We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.
Hey @BenBtg would you be able to share a bit of code with your workaround here?
We are moving this one to the Backlog again for future consideration as we're working on improving our processes and transparency around planning work for servicing.
Hi @unombun. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.
@BenBtg Could you update your sample for the working solution by chance? I am facing the same issue.
Sorry for the delay. Just back from leave. The suggested workaround wasn't sufficient. The eventual approach taken was to navigate to a dedicated zoom page outside of the carousel.
This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.
This issue needs to remain open. Current proposed workaround is not sufficient.
The same sample running on Xamarin.Forms: Issue18569.zip
Sometimes the pinch to zoom not works (for the same .NET MAUI issues, touch conflicts), but once works is working fine, panning works, etc. The behavior is better in Xamarin.Forms than in .NET MAUI.
Does that mean this issue should be treated as a regression?
Not in .NET MAUI itself, but is a different behavior from Xamarin.Forms.
@BenBtg Could you update your sample for the working solution by chance? I am facing the same issue. @ramonB1996 FYI here is a branch with a possible workaround I found using Platform Behaviours to handles zooming and disabling swipe on the caroursel. It's a bit convoluted but I think it's probably the best option in NET7. https://github.com/BenBtg/AndroidPinchGestureIssue/tree/SwipeZoom