Monday, August 20, 2012

Better solution for 600+ elements in a scroll view in WP7

Better solution for 600+ elements in a scroll view in WP7

I have a scroll view that holds about 614 Grid Controls (it's used as a book index, with each grid points to certain place at the book), inside each grid about 4 textblocks showing information about that choice....

The content is static inside all the textblocks. The thing is, when loading all that content , the phone becomes quiet unresponsive for a while... it takes time to load that page and navigate to it from another pages.

I want another solution for all that items to be shown correctly and also each grid view of the 600 has it's own clicked event handler to be able to point it to the page in the book.

I read about some hard ways to do that, I was thinking maybe I can only load the index as a very "tall" image with the index written inside it and then detect where the user tapped and calculate the index page from that ? is that efficient? or maybe there's something else ?

Answers & Comments...

Answer: 1

What is happening is the scroll view is iterating through all 600 items to measure the height of each entry so that it knows how big to render the scrollbars.

It is better to use a ListBox in this case before WP7 will only render the visible items only. Even then, I've heard of performance issues when you hit 2000 rows.

If you are interested in how virtualization works, Samuel Jack has written one that scales well (albeit not for WP7), but he has detailed writeups on the decisions he made.

https://github.com/samueldjack/VirtualCollection/tree/master/VirtualCollection/VirtualCollection

See his write ups on:

  1. Data Virtualization and Stealth Paging

  2. Silverlights Virtual Collection

  3. A Virtualizing Wrap Panel

Answer by Chui Tey for Better solution for 600+ elements in a scroll view in WP7

Answer: 2

Assume two observable collections A and B. Bind your collection A to your UI. Every time fill you collection B. Everytime whne UI is refreshed clear A. Once the UI is loaded, via an event trigger start filling of items from B -> A, as it is an Observable Collection and if you are using INotifyPropertyChanged correctly the items will start appearing on the UI one by one. (Lazy Loading). You may alter this approach according your implementation. I myself am following this approach. Hope it helps for you too.

Answer by Milan Aggarwal for Better solution for 600+ elements in a scroll view in WP7




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog