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.
5 responses to “AutoCompleteBox in Silverlight 4.0”
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
So you want me to write a blog post in that I would be binding autocomplete text box with data from SQL Server ?
[…] 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 […]
thanks alot.
i am done with the query after i read your new post.
thanks once again
[…] AutoCompleteBox in Silverlight 4.0 […]