While developing our QSF application (available on the WP7 Marketplace under the name Telerik RadControls) one of our main goals was to combine our Metro design inspiration and the WP7 OS performance thus creating the ultimate Windows Phone user experience. I must admit that we faced some challenges way back then which greatly expanded our WP7 knowledge, and helped us introduce further performance and memory footprint optimizations in our latest Beta 1 release of our suite.
One of the heavily utilized controls in this application is the ListBox control available in the standard Windows Phone toolbox. While this control brings great value for the general scenario, we noticed some shortcomings in terms of performance when using rich and more complex templates for the items together with the UI virtualization mechanism of the VirtualizingStackPanel. We therefore decided to experiment a bit and see if we could come up with a better performing, UI virtualized control. After an extensive research and various experiments we generated some interesting ideas which we integrated in RadDataBoundListBox.
Before bringing the focus to the control however, I want to shed some light on what the UI virtualization is and how it works. Imagine a data list control bound to a list of data items. Visualizing the items includes creating visual containers, mapping them to the data and presenting them to the user. While this scenario is appropriate for small amounts of data items, it would be a memory and performance hog in scenarios with thousands of data items. That would mean creating as many visual containers as the count of data items in the source which would simply fail in the phone environment. Here comes the UI virtualization – a technique that introduces the concept of creating a small amount of visual containers and reusing them while the user scrolls. The animation below visualizes how the whole trickery works:
In our RadDataBoundListBox we have a smart UI virtualization approach that ensures both smooth UX while scrolling and efficient UI virtualization. This mechanism uses both the UI thread (to virtualize) and the Compositor thread (to scroll). In this way we make sure that the virtualization logic will not impact the scrolling UX. We have also introduced some innovative tricks in the UI virtualization mechanism itself which help offload the UI thread to the maximum thus leaving space for the user input – the concept of asynchronous balance. The asynchronous balance ensures that each pass of the UI virtualization routine will happen in steps whereby after each step the routine frees the UI thread thus leaving the scheduled dispatcher operations (like user input) to be executed.
Another goodie that we will ship in RadDataBoundListBox (that will be included in the Beta 2 release) is an efficient approach to handle data source updates (adding, replacing or removing items) while scrolling. In general, a data source update would trigger a logic that estimates whether the update affects the items currently displayed and refresh them if needed. Since data source updates might happen quite frequently and the refresh logic takes some time, we decided to optimize this procedure by delaying it. In other words, when the source collection changes, we do not do anything if the control is in scrolling state but simply schedule a refresh operation. Once the control stops scrolling a check for scheduled refresh operations is made and if there are any – they are executed. This approach ensures the same smooth UX while scrolling even during collection updates – a very typical scenario for a smart phone.
Since the theory is no fun without the practice, I suggest taking a look at our current Beta 1 release and experimenting with the control. You can also take a look at the examples code from our QSF where you can see how the control could be used. Feedback appreciated!
Stay tuned since there is a lot more to come and happy development from the Windows Phone team here at Telerik.