question-mark
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

  1. Create new .NET MAUI App
  2. Create new ContentPage or use existing
  3. 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>
  1. 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);
        }
    }
}

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 15, Mac OS X 12.3.1

Did you find any workaround?

No workaround

Relevant log output

No response

https://user-images.githubusercontent.com/7422012/167987162-9737b958-232c-4324-80c2-f90843bd7c92.mp4

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
arkadymcommented, Aug 15, 2022

Just tested with latest SR4 (486) - it works fine.

0reactions
hartezcommented, Jun 25, 2022

@arkadym #8136 should address the problems you’re seeing with IsVisible on Android.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[iOS / macOS] scrollview/collectionview don't render behind ...
Here you see that the images continue to be drawn bellow the tabs. Maybe I'm missing something to change the drawable area, but...
Read more >
macOS right alignment of labels with Swift UI
macOS right alignment of labels with Swift UI ... Is there an elegant way to produce macOS conforming label/text field alignment with SwiftUI?...
Read more >
Mapsui xamarin forms. Really like whats been done here ...
These MauiCompat libraries align to latest release of Xamarin. Mapsui is a . ... Forms (including Android, iOS, MacOS, UWP and WPF) Xamarin....
Read more >
How To Use Alignment Guides In Mac Pages - YouTube
https://macmost.com/e-2735 There are three kinds of alignment guides in Pages. Learn how to use them to quickly align objects in word ...
Read more >
MR.Gestures - Touch gestures in MAUI and Xamarin.Forms ...
[iOS] rotate and pinch gestures with more than two fingers ... [macOS] ContentPage is now supported (ScrollView is still missing the PR I...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found