AutoCompleteBox Control in Silverlight using C#

AutoComleteBox

In this article we take a TextBox for user input. ComboBox that would allow them to scroll the entire list, as well as filter the list as the user typed in the TextBox. you see your word is being typed automatically based on the character you type. This control that provides this functionality is called an AutoCompleteBox.

AXML code:

<UserControl x:Class="SilverlightApplication14.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" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" Loaded="UserControl_Loaded">

 

    <Canvas Background="AntiqueWhite"

            Height="250"

            Width="250" >

        <TextBlock Canvas.Left="5"

                   Canvas.Top="10"

                   Text="Autocompltete Control"

                   Foreground="Blue"

                   FontFamily="Arial"

                   FontSize="16"

                   Width="130"

                   FontWeight="Bold">

        </TextBlock>

        <TextBlock x:Name="txtName"

                   Canvas.Left="5"

                   Canvas.Top="60"

                   Text="Enter the Name:"

                   Foreground="Black"

                   FontFamily="Arial"

                   FontSize="16"

                   Width="130">

        </TextBlock>

        <sdk:AutoCompleteBox x:Name="autoComplete"

                             Canvas.Top="60"

                             Height="20"

                             Width="100"

                             Canvas.Left="136" SelectionChanged="autoComplete_SelectionChanged" />

    </Canvas>

</UserControl>

Now double click on the form and add the following code.

C# code

public MainPage()

        {

            InitializeComponent();

            List<string> nameList = new List<string>

                   {

                "Rohatash", "Ravi", "Rahul","Rajesh", "Ram", "Raj kumar",

                       "raj", "Catherina Biel", "Christopher Ben",

                       "Dan Gupta", "Diptimaya Patra", "Dhananjay Kumar",

                       "Elizabeth Hurley", "Elisa Cuthbert", "Emma Bunton"

                   };

            autoComplete.ItemsSource = nameList;

        }

 

The below figure defines the AutoCompleteBox when we enter character in the TextBox related search character or string will be display.

 

sl1.gif