Loading huge data in a Silverlight AutoCompleteBox

• Download sample - 191 KB

Table of contents

1. Introduction
2. Prerequisites
3. Modifying the AutoCompleteBox to load huge data
4. Conclusion

Introduction

AutoCompleteBox is a very useful control in Silverlight. It gives suggestions to the user based on input from the ItemsSource assigned to it. This control works fine when a limited number of items are added as ItemsSource; say a few thousands of entries. But if the items assigned to it grows after may be 20000+, the UI will hang and this would create a bad user experience.

For normal applications, huge data like this may not be expected but in a business application, this is a quite possible scenario. In one of my previous projects, I came across such a scenario. I resolved this by tweaking one of AutoCompleteBox’s properties (TextFilter) and it gave me a very good result. I would like to share this so that it will be useful to someone who has such a requirement in Silverlight.

Prerequisites

This sample application is developed in VS-2010 Express edition and Silverlight 4. Please download them from Microsoft website if you don’t have them installed. I created the sample application using the Silverlight Navigation project.

Modifying AutoCompleteBox to load huge data

See the screenshot of the sample application:

Here, the page has an AutoCompleteBox from the SDK and it is getting loaded with 20,000 strings.

sourceList = new List<string>();
for (int i = 0; i < 20000; i++)
{
    sourceList.Add("Item-" + i);
}
this.acbSample.ItemsSource = sourceList;

If the user tries to type a letter, the AutoCompleteBox will not load data and the page will hang. Eventually, data will get loaded after sometime. This delay will increase with more data. This is because the control tries to load the entire entries and then tries to match the data. We can improve the loading performance if we can limit the number of items getting loaded in the dropdown of AutoCompleteBox. Setting the MaxDropDownHeight property will not help here as this will only limit the height of the dropdown and still the control will try to load everything. So I created a custom AutoCompleteBox with an AutoCompleteBox in the usercontrol. This is present in the FastLoadingACB library in the attached solution.

As you can see, in FastLoadingACB.xaml.cs, only the required properties are exposed as Dependency Properties (DP). I have exposed the Width and ItemsSource properties of AutoCompleteBox in the new user control. AutoCompleteBox’s SelectionChangedEvent is also exposed in the user control. A new DP called MaxItemsInDropDown is added in the user control to limit the number of items getting loaded in the AutoCompleteBox dropdown. The magic of limiting the number of items is achieved by modifying the AutoCompleteFilterPredicate<string> TextFilter property of the AutoCompleteBox. This property’s documentation from the metadata is “Gets or sets the custom method that uses the user-entered text to filter items specified by the System.Windows.Controls.AutoCompleteBox.ItemsSource property in a text-based way for display in the drop-down”. In AutoCompleteBox’s Loaded event, a new predicate is given for TextFilter, as shown below:

private void acbFastLoading_Loaded(object sender, RoutedEventArgs e)
{
    this.acbFastLoading.TextFilter = (search, value) =>
        {
            if (value.Length > 0)
            {
                if ((this.counter < MaxItemsInDropDown) &&
                    (value.ToUpper().StartsWith(search.ToUpper()) || 
                     value.ToUpper().Contains(search.ToUpper())))
                {
                    this.counter++;
                    return true;
                }
                else
                    return false;
            }
            else
                return false;
        };
}

A private member counter is introduced which is set to 0 when AutoCompleteBox’s text changes as shown above. This will ensure that whenever the user types something, only the number of items mentioned in MaxItemsInDropDown will get populated in the dropdown. Now the new control is loaded with 200,000 strings; 10 times more than the previous case.

IList<string> sourceList = new List<string>();

for (int i = 0; i < 200000; i++)
{
    sourceList.Add("Item-" + i);
}

this.acbFastLoading.FastLoadingACBItemsSource = sourceList;

As you can see, the data gets filtered and loaded in the dropdown very quickly.

Conclusion

This approach is a simple way to improve the loading and filtering performance of an AutoCompleteBox. Any/all properties required by the consuming application should be exposed as a Dependency Property in the new user control created. This approach may not be required when the application loads small amounts of data but will be really useful if you are working with huge amounts data. Happy coding…