AutoCompleteBox in Silverlight 4.0

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


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

It works like below,

Auto1.gif

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.

Auto2.gif

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

Auto3.gif

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

    Auto4.gif
     
  2. Set the Binding, ValueMemberPath and FilterMode.

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

    Auto6.gif


Set the DataContext

We need to set the DataContext of AutoCompleteBox in code behind

Auto7.gif

For reference,

MainPage.Xaml

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <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>
</UserControl
>

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.