dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.86k stars 1.68k forks source link

Android: Image Translations offset Image but not Background or Touchable area #21868

Open asi-evin opened 3 months ago

asi-evin commented 3 months ago

Description

When a Translation of X/Y is applied to an image in xaml, the image is translated, but the background and clickable area is not. This is causing wonky issues with Touch, as the orignal location accepts touch's, but not the new image location. This is only for Android; iOS and Windows seem to be fine.

Steps to Reproduce

  1. Create a brand new MAUI project
  2. Copy the following in the MainPage.xaml

    <Grid
    Padding="30,0"
    RowSpacing="25"
    RowDefinitions="*, Auto, Auto, Auto">
    
    <Image
        Grid.Row="0"
        Source="dotnet_bot.png"
        HeightRequest="100"
        WidthRequest="200"
        VerticalOptions="Start"
        HorizontalOptions="Center"
        Aspect="AspectFit"
        TranslationX="50"
        TranslationY="100"
        BackgroundColor="Lime"
    
        SemanticProperties.Description="dot net bot in a race car number eight">
    
        <Image.GestureRecognizers>
            <TapGestureRecognizer
                Tapped="OnCounterClicked" />
        </Image.GestureRecognizers>
    
    </Image>
    
    <Label
        Grid.Row="1"
        Text="Hello, World!"
        Style="{StaticResource Headline}"
        SemanticProperties.HeadingLevel="Level1" />
    
    <Label
        Grid.Row="2"
        Text="Welcome to &#10;.NET Multi-platform App UI"
        Style="{StaticResource SubHeadline}"
        SemanticProperties.HeadingLevel="Level2"
        SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
    
    <Button
        Grid.Row="3"
        x:Name="CounterBtn"
        Text="Click me" 
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="OnCounterClicked"
        HorizontalOptions="Fill" />
    </Grid>
  3. Run on Android.
  4. Tap on the image

Expected Results:

Actual Result:

Link to public reproduction project repository

None, simple enough to recreate from base project

Version with bug

8.0.20 SR4

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All

Did you find any workaround?

Not yet. I could try wrapping the image in a border/grid/contentview and then doing the translation, but would prefer not to add extra layouts if possible. Could also add extra rows/columns to grid to avoid using translations.

XamlTest commented 3 months ago

Verified on VS 17.10.0 Preview 4.0(8.0.20). Repro on Android 14.0-API34, not repro on Windows 11, iOS 17.2 and MacCatalyst with below Project: 21868.zip