Over a million developers have joined DZone.

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.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

The tale of the list control, the async call and the layout cycle error

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:

  1. Populating the list with three separate async requests
  2. Clearing the list of items
  3. 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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
request ,stack ,infinite loop ,error ,ui ,web dev

Published at DZone with permission of Colin Bacon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}