dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.87k stars 1.69k forks source link

PanGestureRecognizer Disables Item Selection In CollectionView #9253

Open flynn248 opened 1 year ago

flynn248 commented 1 year ago

Description

Desire

The desire is to be able to pan inside of a <CollectionView> to move another view across the screen. To do this, the <PanGestureRecognizer> was added inside of the <CollectionView> so that it could recognize a pan gesture. Attempts were made to move the gesture recognizer to the parent view of the <CollectionView>. However, this resulted in the <CollectionView> not recognizing the pan gesture and simply ignored it.

What Happens

The <CollecitonView> is selectable until a pan attempt is made. The first pan gesture doesn't seem to be recognized and it takes a little bit of swiping sometimes before the pan will be recognized. At this point clicking off then then panning again will trigger the <PanGestureRecognizer>. Once that is triggered, the items in the <CollectionView> cannot be selected again until the app is closed and restarted.

It has also been noticed that a <TapGestureRecognizer> placed in the same area as the PanGesture won't trigger until after the pan has occurred. This makes it seem like where the gesture events are handled are being reset somewhere inside of the <CollectionView>.

Reproduction

A simple app to demonstrate the PanGestureRecognizer Issue.

Example GIF

DemoOfBug

Steps to Reproduce

Clone the Repro

For ease of testing, clone this repro that demonstrates the PanGestureRecognizer Issue.

From Scratch

  1. Create a MAUI app.
  2. Add a <CollectionView> that implements the <PanGestureRecognizer>. Example shown below.
    <CollectionView Grid.Row="1"
                SelectionMode="Single"
                SelectionChanged="CollectionView_SelectionChanged"
                BackgroundColor="MediumPurple">
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type System:Int32}">
            <System:Int32>0</System:Int32>
            <System:Int32>1</System:Int32>
            <System:Int32>2</System:Int32>
            <System:Int32>3</System:Int32>
            <System:Int32>4</System:Int32>
            <System:Int32>5</System:Int32>
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.GestureRecognizers>
        <PanGestureRecognizer TouchPoints="1"
                              PanUpdated="PanGestureRecognizer_PanUpdated"/>
    </CollectionView.GestureRecognizers>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type System:Int32}">
            <Label Text="{Binding .}"
                   HeightRequest="100"
                   FontSize="20"
                   FontAttributes="Bold"
                   Padding="6,0,0,0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3" VerticalItemSpacing="0" HorizontalItemSpacing="0"/>
    </CollectionView.ItemsLayout>
    </CollectionView>
  3. [Optionally] Add a view that will pan across when panning. This helps to visualize it.
  4. Select a few items to verify that selection is working.
  5. Pan inside of the <CollectionView>.
  6. Try to select a few items again.

Expected Outcome

Be able to pan a view across the screen. Then be able to select items in the <CollectionView>

Actual Outcome

Able to pan a view across the screen. Unable to select items in the <CollectionView> anymore.

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 11

Did you find any workaround?

The only workaround that I've found thus far is to press a button to remove the <PanGestureRecognizer> in the code behind. Then press a button to re-add the <PanGestureRecognizer>.

Attempting to clear and then add in the same button event didn't work for me. It had to be separate button events. My guess is that something in the <CollectionView> needs to update and doing a clear and add right away is to quick for it to be updated properly.

The button presses aren't the important part from what it seems like to me. The important part is to remove the gesture recognizer and then re-add it in a separate event. Removing and re-adding the gesture recognizer using Xaml Hot Reload worked as well in fixing the issue.

Relevant log output

No response

softlion commented 1 year ago

You must enable simultaneous gesture recognition.

This is not a bug. This is an advanced feature. Also maui gesture recognizers don't support simultaneous recognition with existing recognizers.

See https://stackoverflow.com/questions/59860758/combine-tapgesturerecognizer-and-pangesturerecognizer-in-xamarin-android

You can use an alternate gesture library.

ghost commented 1 year ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

Zhanglirong-Winnie commented 1 year ago

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 7.0. Repro on android platform with sample project. CollectionViewTest-main.zip Android