AutoCompleteBox in Silverlight 4.0

Target Audience: Beginners

AutoCompleteBox control is part of Silverlight 4.0 SDK. It allows us to have a Google style text box.

It works like below,

clip_image001[4]

AutoCompleteBox will look for suggestion in IEnumerable list.

Create a DataSource to find the suggestion

Very first let us create a Country Class. This class will serve as Entity class.

clip_image003

Create a function and this function will return list of country,

clip_image005

We will set above function as DataContext() of AutoCompleteBox.

Drag and Drop AutoCompleteBox on XAML

1. From the tool box select AutoCompleteBox and drop on the XAML page

clip_image006[4]

2. Set the Binding, ValueMemberPath and FilterMode.

clip_image008

3. Set the DataTemplate and bind the TextBlock where user will type the text.

clip_image009

Set the DataContext

We need to set the DataContext of AutoCompleteBox in code behind

clip_image010

For reference,

MainPage.Xaml

<Grid x:Name="LayoutRoot" Background="White">
 <sdk:AutoCompleteBox x:Name="atcTextBox" ItemsSource="{Binding}"
 ValueMemberPath="CountryName"
 FilterMode="Contains"
 IsTextCompletionEnabled="True"
 Height="30" Margin="62,22,54,248">
 <sdk:AutoCompleteBox.ItemTemplate>
 <DataTemplate>
 <TextBlock Text="{Binding CountryName}" />
 </DataTemplate>
 </sdk:AutoCompleteBox.ItemTemplate>

 </sdk:AutoCompleteBox>

</Grid>

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication4
{
 public partial class MainPage : UserControl
 {
 public MainPage()
 {
 InitializeComponent();
 atcTextBox.DataContext = GetCountry();

}

List<Country> GetCountry()
 {
 List<Country> lstCountry = new List<Country>();
 lstCountry.Add(new Country { CountryName = "India" });
 lstCountry.Add(new Country { CountryName = "USA" });
 lstCountry.Add(new Country { CountryName = "Australia" });
 lstCountry.Add(new Country { CountryName = "Germany" });
 lstCountry.Add(new Country { CountryName = "England" });
 lstCountry.Add(new Country { CountryName = "Brazil" });
 lstCountry.Add(new Country { CountryName = "China" });
 lstCountry.Add(new Country { CountryName = "Japan" });
 lstCountry.Add(new Country { CountryName = "Denmark" });
 lstCountry.Add(new Country { CountryName = "France" });
 lstCountry.Add(new Country { CountryName = "Germany" });
 return lstCountry;
 }
 }
}

We can set the source from WCF service, Database, cloud anywhere.

5 responses to “AutoCompleteBox in Silverlight 4.0”

  1. i am always helped alot by your blogs and post this was required urgently.
    can you help me if i have a datasorce in sql server.
    i mean i am creating a radgrid(using telerik controls) and data is displayed ,now i want to add an autocomplete box over one column Name and search the required typed name in the radgrid.

    same as google search box

  2. Dhananjay Kumar

    So you want me to write a blog post in that I would be binding autocomplete text box with data from SQL Server ?

  3. […] in Silverlight 4.0 with DataSource from SQL Server In my last article AutoCompleteBox in Silverlight 4.0 , Data Source for Autocomplete Box was an IEnumerable list. In this post we will work with a column […]

  4. thanks alot.
    i am done with the query after i read your new post.
    thanks once again

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com