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,

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.

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

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

2. Set the Binding, ValueMemberPath and FilterMode.

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

Set the DataContext

We need to set the DataContext of AutoCompleteBox in code behind

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.