TapGestureRecognizer in CollectionView

Question

I created a collectionview and inside this control a grid with a TapGestureRecognizer, but on iOS, the command isn't fired... It works fine on android. And the second problem is, that the button inside this grid, also not work.. (on android everything works fine. This is the control:

<CollectionView ItemsSource="{Binding Claims}"
                    SelectionMode="None"
                    SelectedItem="{Binding SelectedClaim}">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout ItemSpacing="5"
                               Orientation="Vertical"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame Padding="0"
                       InputTransparent="True"
                       Margin="0">
                    <Frame Margin="10,5"
                           Padding="5"
                           InputTransparent="True"
                           CornerRadius="10"
                           HeightRequest="160"
                           HasShadow="True"
                           BorderColor="Gray"
                           Visual="Default">

                        <Grid VerticalOptions="Center">
                            <d:Grid.BindingContext>
                                <models:Claim/>
                            </d:Grid.BindingContext>

                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:ClaimsOverViewViewModel}}, Path=ViewCardCommand}"
                                                      CommandParameter="{Binding}"/>
                            </Grid.GestureRecognizers>


                            <Grid.RowDefinitions>
                                <RowDefinition Height="75"/>
                                <RowDefinition Height="4"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <StackLayout Grid.Row="0"
                                         InputTransparent="True"
                                         Grid.Column="0"
                                         Grid.ColumnSpan="2">

                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:ClaimsOverViewViewModel}}, Path=ViewCardCommand}"
                                                          CommandParameter="{Binding}"/>
                                </StackLayout.GestureRecognizers>

                                <Label Text="Entwurf"
                                       TextColor="Red"
                                       FontSize="Medium"
                                       Margin="0,-20,0,0"
                                       IsVisible="{Binding IsNotValid}"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Start"/>

                                <Label Text="{Binding PolicyNumber}"
                                       FontAttributes="Bold"
                                       FontSize="Large"
                                       VerticalTextAlignment="Start"
                                       HorizontalTextAlignment="Start"/>

                                <Label Text="{Binding CustomerName}"
                                       FontSize="Small"
                                       VerticalTextAlignment="End"
                                       HorizontalTextAlignment="Start"/>

                            </StackLayout>

                            <BoxView Grid.Row="1"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="2"
                                     BackgroundColor="Gray"
                                     InputTransparent="True"
                                     HeightRequest="2"
                                     HorizontalOptions="Fill"/>

                            <Label Grid.Row="2"
                                   Grid.Column="0"
                                   Grid.ColumnSpan="2"
                                   Text="{Binding Date}"
                                   VerticalTextAlignment="Start"
                                   VerticalOptions="Fill"
                                   HorizontalOptions="Fill"/>

                            <StackLayout Grid.Column="1"
                                         InputTransparent="True">

                                <Button Text="Löschen"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:ClaimsOverViewViewModel}}, Path=DeleteCommand}"
                                        CommandParameter="{Binding}"
                                        BorderColor="Red"
                                        CornerRadius="10"
                                        VerticalOptions="Center"
                                        BorderWidth="3"
                                        BackgroundColor="White"
                                        WidthRequest="80"
                                        HeightRequest="30"
                                        Padding="0"
                                        Margin="0,-10,0,10"
                                        HorizontalOptions="End"/>

                                <Button Text="Senden"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:ClaimsOverViewViewModel}}, Path=SendClaimCommand}"
                                        CommandParameter="{Binding}"
                                        BorderColor="Green"
                                        CornerRadius="10"
                                        VerticalOptions="Center"
                                        BorderWidth="3"
                                        BackgroundColor="White"
                                        WidthRequest="80"
                                        HeightRequest="30"
                                        Padding="0"
                                        Margin="0"
                                        HorizontalOptions="End"/>
                            </StackLayout>

                        </Grid>
                    </Frame>

                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>

    </CollectionView>

I already tried the tap-recognizer on different places (stacklayout, grid, frame) and I also tried the IpnutTransparent-Property...

Answer 1

I found a solution. The problem is, that the elements inside a Grid or Stacklayout hides the GestureRecognizer of the Stacklayout/Grid. The solution for this issue is, to disable the GestureRecognizer of children-elements with the property "InputTransparent" like this:

<StackLayout Grid.Row="0"
                                         Grid.Column="0"
                                         Grid.ColumnSpan="2">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer NumberOfTapsRequired="2"
                                                              Command="{Binding Source={RelativeSource AncestorType={x:Type
                                    viewmodels:ClaimsOverViewViewModel}}, Path=ShowDetailsCommand}"
                                                              CommandParameter="{Binding}"
                                                              />
                                </StackLayout.GestureRecognizers>

                                <Label Text="Entwurf"
                                       TextColor="Red"
                                       FontSize="Medium"
                                       Margin="0,-20,0,0"
                                       IsVisible="{Binding IsNotValid}"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Start"
                                       InputTransparent="True"/>

                                <Label Text="{Binding PolicyNumber}"
                                       FontAttributes="Bold"
                                       FontSize="Large"
                                       VerticalTextAlignment="Start"
                                       HorizontalTextAlignment="Start"
                                       InputTransparent="True">
                                </Label>

                                <Label Text="{Binding CustomerName}"
                                       FontSize="Small"
                                       VerticalTextAlignment="End"
                                       HorizontalTextAlignment="Start"
                                       InputTransparent="True"/>

                            </StackLayout>