Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

TapGestureRecognizer is not working for ScrollView And CollectionView

AmitManchandaAmitManchanda USMember ✭✭
edited May 24 in Xamarin.Forms

I am facing an issue with TapGestureRecognizer, I tried various solution for it but nothing worked. I am sharing my code snippets.

If I comment the scroll view it is working fine but for refresh view we need scroll view and when I uncomment this scrollview code, tapgesture stopped working.

        <StackLayout Padding="0" Margin="20,20,20,20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCleaningListCommand}">
                    <!--<ScrollView InputTransparent="True" VerticalScrollBarVisibility="Never" Orientation="Vertical">-->
                        <StackLayout BindableLayout.ItemsSource="{Binding CleaningList}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout Margin="0, 0, 0, 15">
                                        <Frame 
                                                HorizontalOptions="StartAndExpand" 
                                                VerticalOptions="StartAndExpand"
                                                Padding="10,20,0,10" 
                                                HasShadow="False"
                                                IsClippedToBounds="True" BackgroundColor="#ffffff" CornerRadius="15" >
                                            <views:CleaningListDataTemplate></views:CleaningListDataTemplate>
                                        </Frame>
                                    </StackLayout>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    <!--</ScrollView>-->
                </RefreshView>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding HideCalendarViewCommand}"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>

Also If I use collection view, inside refresh view then also Tap gesture is not working It is not working with collection view.

    <StackLayout Padding="0" Margin="20,20,20,20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCleaningListCommand}">
                    <CollectionView ItemsSource="{Binding CleaningList}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout Margin="0, 0, 0, 15">
                                    <Frame 
                                            HorizontalOptions="StartAndExpand" 
                                            VerticalOptions="StartAndExpand"
                                            Padding="10,20,0,10" 
                                            HasShadow="False"
                                            IsClippedToBounds="True" BackgroundColor="#ffffff" CornerRadius="15" >
                                        <views:CleaningListDataTemplate></views:CleaningListDataTemplate>
                                    </Frame>
                                </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </RefreshView>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding HideCalendarViewCommand}"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>

Every suggestion will be appreciated.

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    Both ScrollView and CollectionView could be scrolled , it must be a conflict between their scroll and StackLayout.GestureRecognizers .

    Try to move GestureRecognizers to the inner StackLayout .

    ScrollView

    <StackLayout Padding="0" Margin="20,20,20,20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCleaningListCommand}">
                <ScrollView InputTransparent="True" VerticalScrollBarVisibility="Never" Orientation="Vertical">
                    <StackLayout BindableLayout.ItemsSource="{Binding CleaningList}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <StackLayout Margin="0, 0, 0, 15">
                                    <Frame 
                                                    HorizontalOptions="StartAndExpand" 
                                                    VerticalOptions="StartAndExpand"
                                                    Padding="10,20,0,10" 
                                                    HasShadow="False"
                                                    IsClippedToBounds="True" BackgroundColor="#ffffff" CornerRadius="15" >
                                        <views:CleaningListDataTemplate></views:CleaningListDataTemplate>
                                    </Frame>
                                </StackLayout>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding HideCalendarViewCommand}"/>
                        </StackLayout.GestureRecognizers>
                    </StackLayout>
                </ScrollView>
            </RefreshView>
        </StackLayout>
    

    CollectionView

        <StackLayout Padding="0" Margin="20,20,20,20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCleaningListCommand}">
                <CollectionView ItemsSource="{Binding CleaningList}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="0, 0, 0, 15">
                                <Frame 
                                                HorizontalOptions="StartAndExpand" 
                                                VerticalOptions="StartAndExpand"
                                                Padding="10,20,0,10" 
                                                HasShadow="False"
                                                IsClippedToBounds="True" BackgroundColor="#ffffff" CornerRadius="15" >
                                    <views:CleaningListDataTemplate></views:CleaningListDataTemplate>
                                </Frame>
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding HideCalendarViewCommand}"/>
                                </StackLayout.GestureRecognizers>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </RefreshView>
    
        </StackLayout>
    

    HideCalendarViewCommand should be moved from modelView to model .

Sign In or Register to comment.