Table of contents
- Modifying the AutoCompleteBox to load huge data
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.
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
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
AutoCompleteBox in the new user control.
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
in a text-based way for display in the drop-down”. In
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) &&
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.
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…