Controls/Layout does not draw controls correctly in first-time view.

[mobycorp]

Description

I am writing a POC MAUI app and feel this behavior is a bug.

In my app, I have created a desktop shell which is basically copied from the Podcasts example code. My app has four pages with some text and frames. When I run the app and view a page for the first time, the controls are not drawn properly. Alignment is off. Margins are incorrect. The page looks like a mess. If I go to another page and return to the previous page, the layout is drawn correctly.

One thing I observed is that this behavior only exists if the layout is contained within a Frame. I was testing a MAUI control from Syncfusion and it drew correctly the first time through when the control was not wrapped inside a frame. When I added the frame around the control, it did NOT draw correctly. I first thought this may be an issue with the Syncfusion control itself, but then on another page, I had a frame that simply contained two labels. The text was all incorrectly drawn on the first visit to the page, but then drawn correctly on the second visit so I am taking Syncfusion off the hook. I am pretty certain it has something to do with the way the Frame performs its layout calculations. Also, when I resized the window, the layout is recalculated on the size event, and it draws correctly.

Here are some example screenshots:

First time in with frame

Return to page with frame

First time in with no frame

Steps to Reproduce

1. Create an app with two pages in the shell's flyout layout
2. Create a page with a frame
3. Add some simple controls such as a label inside the frame
4. Run the program and observe the layout - It should be incorrectly drawn
5. Switch to the other page and then return to the first page - it will be correctly drawn
6. The same behavior is exhibited when the first page is shown and you simply resize the window.

Version with bug

Preview 12 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

net6.0-windows10.0.19041, net6.0-andriod... I did not test with my iPhone, but my guess is the same behavior will be exhibited there...

Did you find any workaround?

No.

Relevant log output

N/A

[mobycorp]

I thought I should include two more screen shots. These show a simple page with some frames within a frame...

Before resize

After resize

There is no magic here - just some simple XAML...

[mobycorp]

@jsuarezruiz - This seems to have been fixed in preview 13 as my pages render correctly now. I could close this issue, but I wanted the MAUI team to see this...

[davidortinau]

Thanks Steve. It may be fixed for you, but we certainly have more work to do here. This is the first run screen of the WeatherTwentyOne app for Windows.

• The Flyout is not sized to the width provided
• The Border controls in the right widget panel are not drawing the background

Resizing the window does NOT fix it. I have to navigate away and back. Then I see:

Now I can see that the Border controls in the right panel are cut off on the right side. Frame worked, but Border is the problem here.

https://github.com/davidortinau/WeatherTwentyOne/blob/main/src/WeatherTwentyOne/Views/WidgetsPanel.xaml#L8-L41

[davidortinau]

The Border cropping issue seems to be related to sizing that doesn't account for the Collection GridItemsLayout HorizontalItemSpacing and VerticalItemSpacing. @hartez

[mobycorp]

Hi David,

When I ran the weather app last week, I did observe the flyout acting as you described. When the app is first displayed the flyout is wonky as your screenshot shows. Then, as I indicated in my write-up when the page is changed, the layout is invalidated and recalculated and the layout looks "correct". I say that in quotes because I know it looked nothing like the screenshots in Github. The details portion on the right-hand side of the display never looked like your screenshot. When I installed preview 13 yesterday, I saw that the invalid layout I was getting at the content inside a frame appeared to be fixed. I did try a workaround using a border, but it didn't work for me as I had hoped so I didn't pursue it further.

Is there anything I can try in my investigation to help? I'm excited to be this close to the action! Steve

On Thu, Feb 17, 2022 at 6:52 PM David Ortinau @.***> wrote:

The Border cropping issue seems to be related to sizing that doesn't account for the Collection GridItemsLayout HorizontalItemSpacing and VerticalItemSpacing. @hartez https://github.com/hartez

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/4672#issuecomment-1043782945, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOPRYYNAFMDLSV2TF5GBAO3U3WX5VANCNFSM5OMAUPGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[Fabi]

Any news regarding that?

[wenwen60]

Reproduce on windows using VS2022 17.2.0 Preview 2.0[32215.517.main], attach repro sample 4672.zip.

[MaxtorCoder]

Any news regarding this issue?

[samhouts]

On 6.0.400-preview.1.5782, the Flyout is sized properly, but I still see cropping on the Border (see https://github.com/dotnet/maui/issues/4672#issuecomment-1043782945).

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[mobynet1]

I reported this issue a year and a half ago and it is still an issue. Now, I am seeing this with the flyout menu. First time in, the flyout menu items are not spaced correctly and then when you tweak the width of the overall window, things are drawn correctly.

First time in:

Pull on an edge to resize the window:

As I said, I reported this a LOOONG time ago and nothing has been done. In fact, it looks like the cancer is spreading. How are we supposed to develop world-class applications using MAUI when they don't render correctly and basically look like crap.

[darkBuddha]

Why even use crap like this. LOL

[erikbloodshed]

Don't use this framework. Microsoft is getting all it's developer to focus on the cloud and its AI bullshits! This project is dead already. Thank you.

[Fabi]

Still broken yay