AutoCompleteBox in Silverlight 3

In this article we will see how to load AutoCompleteBox with sample date in Blend 3 in our silverlight application.



In this article we will see how to load AutoCompleteBox with sample date in Blend 3 in our silverlight application.

Open Blend 3 and name your project. Here the project name is "AutoCompleteBoxinSL".

Let's start by creating a sample data for our application. For creating a sample data, click on the data tab and select "Define New Sample Data".


1.gif

Give some name to your data source name as shown below:


2.gif

The default structure of your source will look like this:


3.gif

After some changes, it will look like this:


4.gif

To enter some values in our fields click on the icon shown below:


5.gif

We will get the "Edit Sample Values" window which allows us to enter values to our predefined fields. The figure is shown below:


6-1.gif

Now we have created our sample data and ready to be consumed in our application.

Drag a AutoCompleteBox control to our work area. You can see the control if you aleady installed the "Silverlight Toolkit". If not, you can do it from here.

Now all you have to do is to drag the sample collection to our control.


7.gif

Our task is not finished yet. You will not be getting the desired result by running the application.

Simply drag the sample collection to your work area.


8.gif
This will create a ListBox with the data source name as created by us.

9.gif

Now set the ItemTemplate of our AutoCompleteBox as shown below:


10.gif

Now you can delete the autogenerated ListBox.

The code for our AutoCompleteBox will look like this.

<
input:AutoCompleteBox Margin="18,38,0,0" VerticalAlignment="Top" ItemsSource="{Binding Sample}" DataContext="{Binding}" ItemTemplate="{StaticResource SampleItemTemplate}" HorizontalAlignment="Left" Width="278" />

Now open the SampleDataSource.xaml.cs file and do the changes shown below

public
override string ToString()
{

    return
a1;
}

Also some changes are made in this file for the desired output.

Like for showing the area in this format we have made changes as shown below:

public
string a3
{
         
get
          {
                  
return "Area: " + this._a3 + " Sq. Km.";
          }
         
set
          {
                  
if (this._a3 != value)
                   {
                            
this._a3 = value;
                            
this.OnPropertyChanged("a3");
                   }
          }

}

The final product will look like below after some styling for our control:

11.gif

I am not going through the styles in this article. You can refer the source code attached with this article.

Note
: The figures shown in this example is only for demonstration purpose.