Xamarin Forms: TapGestureRecognizer is not working for the Image component?

Question

I'm using the back icon with the gesture to navigate to the previous page. Following are the code I'm using in the xaml and xaml.cs file.

In Xaml.cs:

public async void SigninPage(object sender, EventArgs args)
{
    await Navigation.PopModalAsync();
}

In Xaml:

<Image 
    Style="{StaticResource HeaderImageStyle}" 
    Source="ic_back_arrow_xx.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="SigninPage"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </Image.GestureRecognizers>
</Image>

In App.xaml:

<Style x:Key="HeaderImageStyle" TargetType="Image">
    <Setter Property="Margin" Value="3" />
    <Setter Property="WidthRequest">
        <OnIdiom
            x:TypeArguments="x:Double"
            Phone="25"
            Tablet="37"
            Desktop="25"/>
    </Setter>
    <Setter Property="HeightRequest">
        <OnIdiom
            x:TypeArguments="x:Double"
            Phone="25"
            Tablet="37"
            Desktop="25"/>
    </Setter>
</Style>

When clicking on the back arrow the corresponding event is not firing. My Xamarin.Forms version is 4.8.0.1821. Is there any such defect reported for this version?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

My Xamarin.Forms version is 4.8.0.1821. Is there any such defect reported for this version?

Hi, SreejithSree. What platform did you face the problem? There seems to be some issues with Xamarin.Forms 4.8 on iOS.

Here are the related links:
https://github.com/xamarin/Xamarin.Forms/issues/12685
https://github.com/xamarin/Xamarin.Forms/issues/13020
https://github.com/xamarin/Xamarin.Forms/issues/10623

These have been solved in Xamarin.Forms 5.0, please update the Xamarin.Forms to lastest stable version and test again. If it still doesn't work, please post more details about the code. It'll help to reproduce the issue to get the cause.

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

For this function, you could use AbsoluteLayout to wraps the view instead. Here is the related code, you could refer to: (please remember to remove the BackgroundImageSource setting of the page)

<ContentPage ...>

    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <Image Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Source="ic_new_background_xx.png"/>

        <StackLayout
                AbsoluteLayout.LayoutBounds="0,0,1,0.2" AbsoluteLayout.LayoutFlags="All" 
                Orientation="Horizontal"
                Margin="10,20,10,0"
                VerticalOptions="StartAndExpand"
                HorizontalOptions="FillAndExpand">

            <Image 
                Style="{StaticResource HeaderImageStyle}" 
                Source="ic_back_arrow_xx.png">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="SigninPage"
                            NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>

            <Image 
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="StartAndExpand"
                Style="{StaticResource LoginLogoStyle}"
                Source="ic_app_logo_new_xx.png"/>
        </StackLayout>

        <ScrollView AbsoluteLayout.LayoutBounds="0,0.2,1,0.6" AbsoluteLayout.LayoutFlags="All" >
            ...
        </ScrollView>
    </AbsoluteLayout>
</ContentPage>