Datagrid’s very capable little brother.

Odi [Xceed] — Mon, 06 Dec 2010 16:54:00 GMT

Datagrids are very flexible controls. They often contain a lot of information and provide tools to visually organize this information and sift through it.

Before WPF/Silverlight, you could not create a data template for items in a listbox or other data controls. It was not feasible to attempt to present tabular data (e.g., name, age, description, photo) beautifully in a listbox item. Datagrids and listviews were therefore a handy solution.

Now that you can template the elements of a listbox to incorporate the key information you want to display, the lowly listbox has gained superhero data visualization powers.

That’s where Xceed comes in. As datagrid experts, we were naturally concerned with the trends we have been observing in the industry. Trends towards simpler interfaces, the multiplication of smaller screens, and touch interfaces. We saw not only that datagrids would have to adapt but that the listbox has gained in importance in a world where developers are simplifying the experience and hiding extra data until the end-user specifically requests to see it.

The listbox is a wonderful control not only for desktop experiences, but for Windows Phone 7 and mobile devices. We just have a tough time visualizing end users using a datagrid on a 4” screen. Columns and rows, and editing data within the cells of those columns and rows, don’t seem to play well there.

Some say that listboxes are the new datagrids. Here's one blog post that had given us some food for thought.

So we set out to improve the listbox. Today, we launched Xceed Ultimate ListBox for Silverlight.

It is the first control Xceed has made that mimics an existing API (the one for the standard Silverlight listbox) instead of providing an entirely new one. We wanted as little of a learning curve as possible. It is also the first control Xceed has ever launched at such a low price point ($89 per developer). We want the barrier to entry to be as low as possible as well.

Why a better listbox?

In the world of Silverlight clients, whether desktop ones or for mobile devices, a lot of the data loaded into listboxes comes over the air or wire. Listboxes aren’t just used to display 5-10 items from an array of objects in memory, they are also used to display hundreds or sometimes thousands of items from remote data sources.

But as the Silverlight listbox works today, it either has to load all of those remote items first, causing the end user to wait while that happens, or it will load only some of the data first, and load it on an as-needed basis. The latter technique is called data virtualization, or paging.

In practically all the implementations we’ve seen, listboxes implementing data virtualization always have usability problems. Some of them make the end user click a “load more” button and wait every time they want more data. Others load the data automatically when you reach the bottom, but still do so only just-in-time and make the end user wait. Most of them have scrollbar thumbs that jump around.

What if the listbox was built with the idea that end users should be able to have an effortless and snappy experience when data virtualization is being used, similar to when the entire data source has already been loaded into the listbox? That’s what Xceed has worked on. I want to call it “super data virtualization”, but on the web site it is simply called “advanced background record retrieval”. Here are the innovations we have put into our super data virtualization:

Automatic record retrieval. No “load more” buttons.
Background record retrieval. Listbox never freezes, always responds to end-user’s navigation commands.
Passive pre-fetching. More than what appears in the listbox gets retrieved, but not more than is needed.
Active pre-fetching. When the listbox UI is not scrolling, the listbox actively retrieves more records to fill its cache.
Fluid UI. Without smooth scrolling, the perceived response time to load more data is that of the complete round-trip of request/response to the server. With smooth scrolling animating for about 0.8s and items that fade in when they arrive, the perceived response time begins only after the animation has completed if items still have not arrived.
Discovery-less start up. To avoid scrollbar thumbs jumping around, or to support grouping, a data-virtualized listbox typically would need to know the total row count, number and size of groups, or other information about the data source. Not this listbox, allowing it to start up faster than any other can.
Optimized navigation. The listbox requests data from the data source using relative queries instead of absolute index-based queries. Such queries execute faster on the server so navigating through the listbox is snappier. We know of no other listbox that works this way.
Query grouping and throttling. During scrolling, queries to the server for more data rows are grouped together when possible. This works because queries are asynchronous and are typically obtaining data not currently in view. During heavy scrolling, queries that are no longer needed are canceled, thereby reducing the load on the server as well as the listbox’s own CPU use.

The goal is to provide lightning fast display of remote data in a listbox. See what we’ve accomplished with Netflix’s online catalog of 130,000+ movies thanks to the listbox connected via ODATA / WCF Data Services.

What else does Xceed Ultimate ListBox for Silverlight bring to the table?

Built-in search box, of course it works with the data virtualization.
Completely fluid UI throughout. Slick and fast smooth scrolling, insert/delete items, etc.
6 beautiful themes.
Deep built-in support for WCF Data Services / ODATA and WCF Ria Services.
Complete grouping support. Displays group headers between items in different groups.
Group headers are “sticky” just like with the iOS listbox. They are always visible.
Group navigation (prev/next) and WP7-like pop-up index to jump to specific groups.
Very little learning curve, simply replace your current listbox and turn on new features.

There’s more, see the complete feature list.

We hope you love this new control as much as we do and help us spread the word about it! Tweet it, Facebook it, blog it, show it to colleagues... it's all good!

Thanks,
Odi

Component Insider : data virtualization, listbox

Datagrid’s very capable little brother.