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

Question

question

SreejithSree-2948 asked Apr 8, '21 SreejithSree-2948 commented Apr 9, '21

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

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?

dotnet-xamarin

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2021-04-08T08:10:25.597Z

JarvanZhang-MSFT answered Apr 8, '21 JarvanZhang-MSFT commented Apr 9, '21

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.

· 6

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SreejithSree-2948 · Apr 08, 2021 at 09:21 AM

I have the same issue on all platforms. I have created a sample project for reference, could you please check.

Sample link: https://drive.google.com/file/d/1XqiE4dOEa7ilasZynlBYetShXy-0DfKR/view?usp=sharing

Open the forgot password page and click the back arrow, the issue is with that image.

0 ·

JarvanZhang-MSFT SreejithSree-2948 · Apr 08, 2021 at 09:58 AM

Because you display an image in the layout and set VerticalOptions to FillAndExpand. It'll work fine if removing the image. If you want to add backgroud image for the page, you could set BackgroundImageSource for the contentPage.

0 ·

JarvanZhang-MSFT · Apr 08, 2021 at 09:59 AM

Here is the complete code:

<ContentPage ...
    BackgroundImageSource="ic_new_background_xx.png">

    <StackLayout HorizontalOptions="FillAndExpand">
        <StackLayout
        Orientation="Horizontal"
        Margin="10,20,10,0"
        VerticalOptions="StartAndExpand"
        HorizontalOptions="FillAndExpand">

            <Image 
            Source="ic_back_arrow_xx.png">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="SigninPage"
                            NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
            <Image 
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="StartAndExpand"
                    Source="ic_app_logo_new_xx.png"/>
        </StackLayout>
        <ScrollView>
            ...
        </ScrollView>
    </StackLayout>
</ContentPage>

0 ·

SreejithSree-2948 JarvanZhang-MSFT · Apr 08, 2021 at 10:32 AM

Could you update it as your answer?

0 ·

SreejithSree-2948 JarvanZhang-MSFT · Apr 08, 2021 at 02:42 PM

Found an issue with this solution.

On the ios platform, the background image is not fully visible, only the yellow part is visible on the UI, the white part is not showing.

IOS Screenshot:

85845-simulator-screen-shot-iphone-8-plus-2021-04-08-at.png

Working fine on android and windows. Could you please check that?

Android part screenshot:

0 ·

simulator-screen-shot-iphone-8-plus-2021-04-08-at.png (22.6 KiB)

1617892826089.jpeg (23.9 KiB)

JarvanZhang-MSFT SreejithSree-2948 · Apr 09, 2021 at 06:15 AM

Hi, I tested the code on iOS and faced the result is the same as the screenshot shown. Someone faced the similar issue and has reported it to the product team on github. Here is the related link: https://github.com/xamarin/Xamarin.Forms/issues/11512

0 ·

Answer 2 · 2021-04-09T06:17:02.86Z

JarvanZhang-MSFT answered Apr 9, '21 SreejithSree-2948 commented Apr 9, '21

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>

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SreejithSree-2948 · Apr 09, 2021 at 07:53 AM

I removed scrollview also and it is working fine on all platforms.

1 ·

question