View with Dynamic Margin Size get blinking because resizing in Android

[albilaga]

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

Looks like gif not showing the blinking issue correctly. Here is the recorded video

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]]

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:

• [regression/8.0.3] Flickering occurs due to padding while navigating pages. (#18875), similarity score: 0.76
• Wrong left margin in the navigation bar on Android (#18843), similarity score: 0.74

Closed similar issues:

• Border in ScrollView will flicker when scroll on Android (#9805), similarity score: 0.74
• [regression/8.0.0-rc.1.9171] Window "blinks" when resized (#17724), similarity score: 0.73
• [Android] Dynamically changing SwipeView margins is not updating the SwipeItems (#4121), similarity score: 0.73

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

[drasticactions]

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]

@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]

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]

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