Table of contents
- Introduction
- Prerequisites
- Modifying the AutoCompleteBox to load huge data
- 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…