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
22.21k stars 1.75k forks source link

[iOS] X and Y constraints ignored when width, height, X and Y constraints are all specified on RelativeLayout child. #14277

Open greg84 opened 1 year ago

greg84 commented 1 year ago

Description

This works fine in Xamarin Forms. But in MAUI...

On a child in a RelativeLayout, if X, Y, Width and Height constraints are all specified, the X and Y constraints are ignored.

If the Width and Height constraints are removed, the X and Y constraints work again.

This works fine on Android, but is broken on iOS.

Steps to Reproduce

Create the following XAML file:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:compat="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
             x:Class="MauiApp1.MainPage">
    <compat:RelativeLayout>
            <Image x:Name="image" Source="dotnet_bot.png"/>

        <Ellipse
            compat:RelativeLayout.WidthConstraint="{compat:ConstraintExpression Type=RelativeToView, ElementName=image, Property=Width, Factor=0.2}"
            compat:RelativeLayout.HeightConstraint="{compat:ConstraintExpression Type=RelativeToView, ElementName=image, Property=Height, Factor=0.2}"
            compat:RelativeLayout.XConstraint="{compat:ConstraintExpression Type=RelativeToView, ElementName=image, Property=Width, Factor=0.5}"
            compat:RelativeLayout.YConstraint="{compat:ConstraintExpression Type=RelativeToView, ElementName=image, Property=Height, Factor=0.5}"
            StrokeThickness="2"
            Stroke="Red">
        </Ellipse>
    </compat:RelativeLayout>
</ContentPage>

This produces the following on iOS:

Expected: Red ellipse should be at the top of the image in the middle.

Actual: Red ellipse is in the top left corner of the image.

If you remove the Height and Width constraints from the ellipse and instead specify fixed values using HeightRequest and WidthRequest, the ellipse appears in the correct place.

Link to public reproduction project repository

See steps to reproduce

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

All

Did you find any workaround?

Even though it's possible to get the X and Y constraints working using fixed height/width values, this isn't really a workaround.

I want the size of the ellipse to be dependent on the image size. The image size will eventually be changed to fill the screen, so on larger screens the shapes need to get larger.

Relevant log output

n/a
ghost commented 1 year ago

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.