We are using MAUI platform in .NET8 to build an application that shows tabular data of tasks assigned to folks for a duration of days. The page loads fine and shows the data in the grid for a smaller duration upto one week. But if a duration longer that a week is selected, this time the application crashes when the page is about to be loaded. It crashes with "Layout cycle detected. Layout could not complete." error.Exception details when the crash happens We are using CollectionView to show the tabular data inside Grid whose rows and columns represent different section of the view in the application. Does this error mean there is something wrong with the data (though I have double checked that it is not)? How can I debug this problem? I am attaching the screenshot of the exception. I can share the xaml if required. Please help as we are stuck with this issue for a while now.
I tried to find the MAUI binaries symbols but the exception seems to be bypassing them.I also checked stack-overflow posts about this error. There seems to be a bug reported about similar issue on the MAUI forums (https://github.com/microsoft/microsoft-ui-xaml/issues/6218) which is still open. I am not sure if our app is facing the same issue too because that issue refers to ListView, but we are using CollectionView.
I have created a repo (https://github.com/ProfLavneetSingh/LayoutCrash) with a sample code that does not crash but takes forever to load the grid.
We want to show a grid (like in Microsoft Teams Calendar view) for tracking tasks assigned to persons. It should be scrollable horizontally (to scroll through all days in the duration keeping the task box size constant) and vertically (to go through the list of people). We are using CollectionView.Span to set the collection columns to match the number of days in the duration. We are using CollectionView because the documentation says it should be used for tabular data. But it is not loading with a long delay in the sample (and crashing in the application code). What is the way out of this? How can we achieve the task grid view that loads efficiently?
First of all:
This has to go:
<ScrollView x:Name="ScrollView"
Grid.Column="0"
Orientation="Both">
Vertical collection view has to be restricted vertically.
You cannot stack ScrollView, StackLayout, Collection/ListView inside each other. At least not in the same orientation.
If you have a page with 500 height, inside of it - grid with collection view, that has 100000 items with 100 height, what happens is the following:
The Grid takes the height of 500. The Collection view takes height of 500, this 500 height is used to display 5 items. (well not 5, but close)
If you replace the Grid with ScrollView, instead of preparing those (theoretical) 5 items, all of the 100000 will have to be prepared to calculate the height of the collection view, then it will be put inside the scroll view.
(I do not have to explain how bad this is, right?)
You have to make use of the Scroll View of the collection view itself. Besides scrolling, it has loading system, that prepares items when and if needed.
As side note: This nested collection view that has removed scroll...