search

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.23k stars 1.76k forks source link

View with Dynamic Margin Size get blinking because resizing in Android #23085

Open albilaga opened 5 months ago

albilaga commented 5 months ago

Description

When creating a page that have margin calculated on runtime (based on width or height of some element), in Android it will show some blinking. This is only happen in Android when using Navigation.PushAsync(page, animated: false). When animated is true, this is working fine

https://github.com/dotnet/maui/assets/2399099/40553afc-c759-49f4-a389-27e739eedcf4

Steps to Reproduce

  1. Open https://github.com/albilaga/MauiIssues/tree/main/MauiIssues.
  2. Run the project.
  3. Open DynamicMarginPage it will show the issue as above
  4. Open MarginPage. Now you won't see the issue.

Link to public reproduction project repository

https://github.com/albilaga/MauiIssues/tree/main/MauiIssues

Version with bug

8.0.60 SR6

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11 and up

Did you find any workaround?

https://github.com/dotnet/maui/issues/23085#issuecomment-2177897288

Relevant log output

No response

github-actions[bot] commented 5 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Closed similar issues:

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

drasticactions commented 5 months ago

I'm not sure if this is a bug:

https://github.com/albilaga/MauiIssues/blob/main/MauiIssues/DynamicMarginPage.xaml.cs#L24-L37

After the page loads, whenever OnSizeAllocated gets called, you're updating the margin. That happens after the view has loaded and is on screen, so in this case you see it "blink" for a split second. I would expect this: you're basically introducing a race condition in your UI. As far as I'm aware, OnSizeAllocated is not guaranteed to be invoked before the UI Elements itself is shown. So you're always going to be in some position of hacking something to get this approach to work.

IMO, I would find a different way to do what you're doing. Maybe using something like Visual State Managers. @PureWeen @mattleibow what do you think?

albilaga commented 5 months ago

@drasticactions I am not sure how Visual State Manager will be helpful on this as I need to have like horizontal margin 1% of the width of screen and height margin like 0.5% of the height?

Zhanglirong-Winnie commented 4 months ago

Verified this issue with Visual Studio 17.11.0 Preview 2.0 (8.0.60 & 8.0.40). Can repro on Android platform with sample project.

albilaga commented 4 months ago

I found the workaround for now. The workaround I found is set IsVisible to false for the first time. After we can get calculation of width and height of the screen then we do calculation and set the view IsVisible to true. But this will be great if in MAUI still behave the same like before