Binding to HeightRequest not working properly

[usausa]

Description

In order to place the Control in a square, I have binding the HeightRequest to the Width of the Parent, but It did not work properly. Here is the source.

<?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"
             x:Class="ControlSquare.MainPage">

    <Grid BackgroundColor="Red">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <BoxView x:Name="BoxView"
                 Grid.Row="0"
                 Color="Blue"
                 HeightRequest="{Binding Source={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=Width}" />

        <Label Grid.Row="1"
               Text="{Binding Source={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=Width, StringFormat='{0}'}" />

        <Button Grid.Row="2"
                Text="Debug"
                Clicked="Button_OnClicked" />
    </Grid>

</ContentPage>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_OnClicked(object sender, EventArgs e)
    {
        Debug.WriteLine($"Height={BoxView.Height}, HeightRequest={BoxView.HeightRequest}");
    }
}

I checked with a debug run and the HeightRequest had a value set. Also, when the xaml is rewritten in hot reloading, the layout is done as expected, so it appears that the layout is not working correctly even though the property settings are done.

• Expected image

• Actual image

Steps to Reproduce

1. Create a File > New .NET MAUI App
2. Rewrite MainPage.xaml and MainPage.cs with the contents of Description

Link to public reproduction project repository

https://github.com/usausa/Issue-MAUI-ControlSquare

Version with bug

7.0.86

Last version that worked well

7.0.86

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android (all)

Did you find any workaround?

No response

Relevant log output

No response

[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.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Android 13.0-API33 .NET 8, not repro on Windows 11 and iOS 16.4 with below Project: ControlSquare.zip

[Mek7]

I have exactly the same problem here. Like in this issue, when changing the XAML, the layout fixes itself (until application is restarted), so probably some layout refresh is needed. An ugly workaround like this helped:

        this.Dispatcher.DispatchDelayed(
            TimeSpan.FromMilliseconds(500),
            () =>
            {
                this.MainRowDefinition.Height = GridLength.Auto; // this triggers layout update
            });

MainRowDefinition is the problematic row definiton in your XAML. Set it with * in XAML and then overwrite it in runtime like in the code above. Calling Dispatch overload without the TimeSpan parameter does not help. I also had to give my elements opacity 0 and return to opacity 1 in the dispatcher callback, otherwise a short layout jump was visible. Can this get more priority, please?

[Mek7]

My ugly fix works (see above) but then I added a Frame in a separate grid column, that spans all grid rows. This Frame contains a ScollView that contains a Label. All the elements should stretch to all height available, but sometimes (I don't know when), the ScrollView does not have its height updated to max height, but stays smaller. I think this github issue may have something to do with that and would like to remove the ugly fix. Can this issue get a higher priority, please? It makes MAUI look buggy...