AutoCompleteBox SilverLight 3 Control

In this post I will show you how you can get started with the AutoCompleteBox control in the silverlight 3.0 . Here is the simple screen for my example code. Here I have added one text block control, one autoComleteBox and one button control. Below is the screen shot of the example code.

Here is my xaml code to add the autoComleteBox control . When you drag and drop the autoCompleteBox control from the toolbox then the default xaml will be written, rest of the properties has been set by me, like grid column and row, margin etc. And Also namespace is added in the user control tag.

// namespace will be added at top. in xaml
< UserControl xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" ... />

< input:AutoCompleteBox Height="23"   x:Name="acbAutoCompleteBox" Grid.Row="1" Grid.Column="2" Margin="3,2" VerticalAlignment="Center" IsTextCompletionEnabled="True"/ >

Here is the output of my example code. you can see that when user type it will show suggestion about user input, possible match in the item source.

Note that I have set the IsTextCompletionEnabled property to true in my xaml which will used to display first possible match found during the filtering process automatically in the text box.Ordinarily, the AutoCompleteBox filters out the list of bound items by comparing the start of each one with the text that’s been typed in so far. However, you can change this behavior by setting the FilterMode property. It takes one of the values from the AutoCompleteFilterMode enumeration.

Property
Description
None
No filtering will be performed, and all the items will appear in the list of suggestions. This is also the option you’ll use if you need to fetch the collection of items yourself–for example, if you need to query them from a database or request them from a web service.
StartsWith
All the items that start with the typed-in text will appear. This is the default.
StartsWithCaseSensitive
All the items that start with the typed-in text will appear provided the capitalization also matches.
Contains
All the items that contain the typed-in text will appear. For example, typing ember would match September, November, and December.
ContainsCaseSensitive
All the items that contain the typed-in text will appear provided the capitalization also matches.
Custom
You must perform the filtering by applying a delegate that does the work to the TextFilter or ItemFilter property. In fact, if you set TextFilter or ItemFilter the FilterMode property is automatically switched to Custom.

You can set any of the value from the above table to the FilterMode of the autoComplteBox control, But the default value for the FilterMode is StartsWith. So if you don't set the FilterMode for the autoCompleteBox then it has StartsWith as default mode.Hope you get some idea of how to use the autoCompleteBox. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!