Xamarin.Forms iOS Frame TapGestureRecognizer 仅适用于边框的边框

Question

I have a TapGestureRecognizer on a Frame that works perfectly well on Android but only works on the border of the frame on iOS.

I have no idea why it does that, I tried to change it to a Grid GR for the Grid inside of the Frame but that doesn't change anything, the Frame still only gets clicked on the border.

I don't know if it's because there's a different layout than Android.

Here's my code

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="45"/>
        <RowDefinition x:Name="SecondRowDefinition"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ContentView Content="{Binding Map}"
                 Grid.RowSpan="3"
                 VerticalOptions="FillAndExpand" />

    <Frame x:Name="SearchFrame"
           BackgroundColor="#0c0c0c"
           HasShadow="False">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        <Image Source="icon_search_red_24" 
               VerticalOptions="Center" 
               HeightRequest="20" />
        <Label TextColor="White"
               FontSize="Small"
               Text="Search place by name"
               HorizontalTextAlignment="Start"
               Grid.Column="1" />
        </Grid>
        <Frame.GestureRecognizers>
            <TapGestureRecognizer
                NumberOfTapsRequired="1"
                Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MapViewModel}}, Path=SearchBarTapped}"
                Tapped="Search_Tapped">
            </TapGestureRecognizer>
        </Frame.GestureRecognizers>
    </Frame>

Code behind

public partial class MapPage : ContentPage
{
    private readonly MapViewModel _mapViewModel;

    public MapPage()
    {
        InitializeComponent();
        if (Device.RuntimePlatform == Device.iOS)
        {
            SecondRowDefinition.Height = 100;
            SearchFrame.HorizontalOptions = LayoutOptions.Fill;
            SearchFrame.Margin = new Thickness(15, 40, 15, -40);
            SearchFrame.Padding = new Thickness(10, 15, 96, 10);
            SearchFrame.CornerRadius = 25;
            CategoriesList.Margin = new Thickness(15, 5, 0, -10);
        }
        else
        {
            SecondRowDefinition.Height = 40;
            SearchFrame.HorizontalOptions = LayoutOptions.Start;
            SearchFrame.Margin = new Thickness(15, 11, 65, -6);
            SearchFrame.Padding = new Thickness(10, 10, 96, 10);
            SearchFrame.CornerRadius = 20;
            CategoriesList.Margin = new Thickness(15, 8, 0, 0);
        }
        BindingContext = _mapViewModel = new MapViewModel();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        _mapViewModel.OnAppearing();
    }

    private void Search_Tapped(object sender, EventArgs e)
    {
        if (Device.RuntimePlatform == Device.Android)
        {
            Vibration.Vibrate(TimeSpan.FromMilliseconds(10));
        }
    }
}

Answer 1

I failed to reproduce this problem. To see whether there was some inherent issue with Tap on iOS, I simplified your code.

(replace all "TestBugs" in code below, with your project's namespace)

TapFramePage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestBugs.TapFramePage">
    <ContentPage.Content>
        <StackLayout>
            <Frame x:Name="SearchFrame"
               BackgroundColor="#0c0c0c"
               HasShadow="False">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label TextColor="White"
                   Text="Search place by name"
                   HorizontalTextAlignment="Start"
                   Grid.Column="1" />
                </Grid>
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer
                    NumberOfTapsRequired="1"
                    Tapped="Search_Tapped">
                    </TapGestureRecognizer>
                </Frame.GestureRecognizers>
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

TapFramePage.xaml.cs:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestBugs
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TapFramePage : ContentPage
    {
        public TapFramePage()
        {
            InitializeComponent();
        }

        protected void Search_Tapped(object sender, EventArgs args)
        {
            // Do something here.
        }
    }
}

App.xaml.cs:

...
public App()
{
    InitializeComponent();
    MainPage = new TapFramePage();
}
...

Tested this on both Android and iOS. On both platforms, tapping on the label (or on the space to the left or right of it), hits a breakpoint I set on SearchTapped .

Please try this version, and see if it works for you on iOS. Knowing whether this does or does not work for you will narrow down the problem.