question

SreejithSree-2948 avatar image
0 Votes"
SreejithSree-2948 asked SreejithSree-2948 commented

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

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

JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

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

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

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 Votes 0 ·

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 Votes 0 ·

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 Votes 0 ·

Could you update it as your answer?

0 Votes 0 ·

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:

85882-1617892826089.jpeg




0 Votes 0 ·

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 Votes 0 ·
JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered SreejithSree-2948 commented

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

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

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

1 Vote 1 ·