Monday, April 26, 2010

Auto Complete Box Control in WPF

If you have work in silverlight 3.0 then you have see the auto complete box control is there to help the user to search from the possible list of value when user type in text box. When I have used that control I though of similar control in the WPF , I have search on net by using Google and found some simple auto complete text box control on net.But I have decided to create one for myself and then share it with people on my blog. So here is my first ever control which I want to share it with you. Below are the two image of the control. In the first image you can see simple text box control and a button control but in the second image you see the drop down with possible list of matched values.

Let us start with properties of the control , Below are the list of properties which are offered by the control. I have given some description for each of the property. First I have listed the dataSource property which is used to set the data source for the control. Then is the displayColumn Name which is used to display value of the column when you click on the dropDown list. DataSource and DisplayColumnName Properties are primary properties which user has to set otherwise control will not work.
DataSourceData source to display dropdown list.
DisplayColumnNameName of the column which is used to display in the text box when user select from the dropdown list.
DropdownHeightUsed to set the height of the Dropdown list
ReturnValueReturn value is a DataRow, whole row of the dataSource table.
MinimumSearchLengthMinimum search length is used to search in the list, e.g if set to 2 then search is perform and dropdown list will be open when the text box contain atleast 2 characters.

Then is the DropDownHeight which is used to set the height of the dropDownList. The ReturnValue is the dataRow , when user select from the dropDownlist then it will return whole row of the DataSource , so if you can get the whole selected record and you can get whatever you want from that row, mean primary key, display Column name etc.
The interesting part of the control is when you use the BindingColumn class to pass the parameter to the bindingColumn function of the autoCompleteBox class. The Class consist of four properties HeaderText, BindingColumnName, FilterOption and IsSearchable. HeaderText is used to display Text as header in grid and BindingColumnName is used to bind the column from the dataSource to the grid to display the value. The filder option Consist of 3 option StartWith, Contains and EndWith option, what ever you pass that column is search accordingly in the list and the IsSearable is used to sepecify whether the current column is search-able or not.
Hope you will like that control. if you have any suggestion then please share it with me, I have included the autoCompleteBox dll in that project. You can use it and if you need source code I will share it with you. You can download the source code from here
All and any comments / bugs / suggestions are welcomed!

No comments: