iOS: Image layout problem - can spill out into surrounding UI

[RobTF]

Description

I attempted to create a UI which contained an element that has a button either side, with an image in the center.

I tried two different ways of doing this,

Using a grid;

        <Grid ColumnDefinitions="Auto,*,Auto" Margin="10">
            <Button
                Clicked="LeftClicked"
                VerticalOptions="Center"
                Margin="15,0,0,0"
                Text="One" />
            <Image
                BackgroundColor="Green"
                Grid.Column="1"
                HeightRequest="76"
                HorizontalOptions="Center"
                Source="logo_dark.png" />
            <Button
                Clicked="RightClicked"
                Margin="0,0,15,0"
                VerticalOptions="Center"
                Grid.Column="2"
                Text="Two" />
        </Grid>

Using an AbsoluteLayout;

            <AbsoluteLayout>
                <Button
                    AbsoluteLayout.LayoutBounds="0,0.5,-1,-1"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    Clicked="LeftClicked"
                    Margin="15,0,0,0"
                    Text="One" />
                <Image
                    BackgroundColor="Green"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                    HeightRequest="76"
                    Source="logo_dark.png" />
                <Button
                    Clicked="RightClicked"
                    Margin="0,0,15,0"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    AbsoluteLayout.LayoutBounds="1,0.5,-1,-1"
                    Text="Two" />
            </AbsoluteLayout>

Both of these work on Android;

Both fail to render correctly on iOS - note how the image goes full width and overlaps the left button due to element order/Z-index

Steps to Reproduce

1. Build and run example project on iOS
2. Observe issue

Link to public reproduction project repository

https://github.com/RobTF/mauiplay/tree/master/ImageGridIssue

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

For the grid version, removing HorizontalLayout="Center" constrains the image to the correct area of the grid.

For the absolute layout version, adding WidthRequest can solve the issue, but the width must be manually calculated ahead of time, based on the height vs. aspect ratio of the image.

Relevant log output

None.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[Ahmadpashaquarterpi]

Hi @RobTF ,
Is there any workaround for this issue?
I used the following but I don't think its any good for app

`<Frame x:Name="ButtonContainer" Grid.Column="0" CornerRadius="0" Padding="0" Margin="0" BackgroundColor="Transparent" BorderColor="Transparent">
                <ImageButton
                    HeightRequest="{Binding Source={x:Reference ButtonContainer}, Path=Height}"
                    WidthRequest="{Binding Source={x:Reference ButtonContainer}, Path=Width}"
                    Source="{DynamicResource CreateIcon}" BackgroundColor="Transparent"
                    HorizontalOptions="Start" VerticalOptions="Center"
                    Command="{Binding NavigateToCreateNew}"/>
            </Frame>`

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on iOS 16.4 with below Project:
ImageGridIssue.zip

[jknaudt21]

Possibly related to: #16120