The Tale of the List Control, the Async Call, and the Layout Cycle Error
The Tale of the List Control, the Async Call, and the Layout Cycle Error
Refreshing a list of items was causing the app to crash when it was repopulated. Instead of banging his head on the wall, Colin Bacon came up with a solution.
Join the DZone community and get the full member experience.
Join For FreeBugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.
This one had me banging my head against the wall for a long time, refreshing a list of items was causing the app to crash when it was repopulated.
Disclaimer: I see my solution as no more than a hack, but a necessary one.
Setting the Scene
I had an ObservableCollection of user actions that were populated when the user tapped on the item in another list. A bit like a master detail approach I guess. The items displayed would vary and the list could be cleared and repopulated. Further to that the items came from multiple async requests to an external service that could come back at different times in different orders. Hence the need for an ObservableCollection.
Populating the list the first time was not a problem, however repopulating that list would crash the app with this error:
Layout cycle detected. Layout could not complete.
My exact steps were:
- Populating the list with three separate
asyncrequests - Clearing the list of items
- Doing step 1 again
Understanding the Error
I won't claim to fully understand it, but from what I learnt (Googled), a layout cycle error is a UI error where the layout is unable to complete because there is an infinite loop. This can be caused by a control handling event changes such as size that just get stuck by continually firing. This stack overflow answer has some more detail.
Narrowing It Down
I was pretty sure it was the control I was using to display the items that was causing the problem. I was using ItemsControl. Changing to ListBox or ListView made no difference.
Finding the Cause
After a lot of hair pulling and general cursing this comment in a Xaramin forum gave me a clue to what was causing it. Async calls.
To retrieve user action three async calls were being made each updating the ObservableCollection with items. I took two of the calls out so the list was only being repopulated once, the error stopped.
If this is the cause of your problem and you can re-engineer your solution to a single or synchronous request I would recommend that. Unfortunately, I was able to do neither.
The Hack
I had seen several suggestions that setting the size of the control would help with this error, as the layout was fixed and could be calculated. I had given up on finding a solution that seemed sensible to me so decided to give this a go. I could not set a fixed height as the list could vary in size. Instead, I set a MinHeight value to the height of one row. And it worked! Giving it a starting point was enough to stop the layout cycle error occurring and I could get on with my life.
Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.
Like This Article? Read More From DZone
Published at DZone with permission of Colin Bacon , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}