Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AbsoluteLayout miss align on MacOS and iOS

See original GitHub issue

Description

I tried to use AbsoluteLayout to dynamically change visibility of buttons and it work as expected in Windows and Android, but missbehave on Mac OS and iOS (see attached video)

Steps to Reproduce

Create new .NET MAUI App
Create new ContentPage or use existing
Use below layout

<?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="MauiApp1.AbsolutePage"
             Title="AbsolutePage">
    
    <AbsoluteLayout>
        <StackLayout Orientation="Vertical" AbsoluteLayout.LayoutBounds="0.5, 1, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional">
            <StackLayout x:Name="PopupLayout" Orientation="Vertical" IsVisible="False" VerticalOptions="End">
                <Button ImageSource="{StaticResource fisUser}" Text="User and Password" BackgroundColor="{StaticResource Primary}"
                        TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
                        CornerRadius="25" BorderWidth="0" HeightRequest="50" Margin="0,10,0,0" Padding="15,0"
                        Command="{Binding TogglePopupLayoutCommand}"
                        />
                <Button ImageSource="{StaticResource fisKey}" Text="Api Key" BackgroundColor="{StaticResource Primary}"
                        TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
                        CornerRadius="25" BorderWidth="0" HeightRequest="50" Margin="0,10,0,0" Padding="15,0"
                        Command="{Binding TogglePopupLayoutCommand}"
                        />
            </StackLayout>
            <Button ImageSource="{StaticResource fisPlus}" Text="Add Account" BackgroundColor="{StaticResource Primary}" 
                    TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
                    CornerRadius="25" BorderWidth="0" HeightRequest="50" HorizontalOptions="Center" Margin="15" Padding="15,0,20,0"
                    Command="{Binding TogglePopupLayoutCommand}" />
        </StackLayout>
    </AbsoluteLayout>
</ContentPage>

Use below codes

namespace MauiApp1;

public partial class AbsolutePage : ContentPage
{
	public AbsolutePage()
	{
		InitializeComponent();

        BindingContext = this;
	}

    [ICommand]
    internal void TogglePopupLayout()
    {
        if (!PopupLayout.IsVisible)
        {
            PopupLayout.IsVisible = true;
            PopupLayout.MaximumHeightRequest = Height > 0 ? Height : 10000;
            var bounds = PopupLayout.Measure(Width, Height);

            PopupLayout.Opacity = 0;
            PopupLayout.MaximumHeightRequest = 0;

            var animation = new Animation();
            animation.Add(0, 1, new Animation(v => PopupLayout.Opacity = v, 0, 1));
            animation.Add(0, 1, new Animation(v => PopupLayout.MaximumHeightRequest = v, 0, bounds.Request.Height));

            animation.Commit(PopupLayout, nameof(PopupLayout), length: 500, easing: Easing.CubicOut);
        }
        else
        {
            var animation = new Animation();
            animation.Add(0, 1, new Animation(v => PopupLayout.Opacity = v, 1, 0));
            animation.Add(0, 1, new Animation(v => PopupLayout.MaximumHeightRequest = v, PopupLayout.Height, 0));

            animation.Commit(PopupLayout, nameof(PopupLayout), length: 500, easing: Easing.CubicOut,
                finished: (v, f) => PopupLayout.IsVisible = false);
        }
    }
}