In this article we will learn how to use AutoCompleteBox control in SilverLight 4
AutoComleteBox
AutoCompleteBox Represents a control that provides a text box for user input and a drop-down that contains possible matches based on the input in the text box.
Properties:
Figure 1.
ItemFilter - Gets or sets the custom method that uses the user-entered text to filter the items specified by the ItemsSource property for display in the drop-down.
ItemsSource - Gets or sets a collection that is used to generate the items for the drop-down portion of the AutoCompleteBox control.
ItemTemplate - Gets or sets the DataTemplate used to display each item in the drop-down portion of the control.
Margin - Gets or sets the outer margin of a FrameworkElement. (Inherited from FrameworkElement.)
MaxDropDownHeight - Gets or sets the maximum height of the drop-down portion of the AutoCompleteBox control.
MaxHeight - Gets or sets the maximum height constraint of a FrameworkElement. (Inherited from FrameworkElement.)
MaxWidth - Gets or sets the maximum width constraint of a FrameworkElement. (Inherited from FrameworkElement.)
For example:
Drag TWO Two TextBlock control and one AutoComplete control from the toolBox on the form. Form looks like this.
Figure 2.
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;
}
VB Code
Public Sub New()
InitializeComponent()
Dim nameList As List = New List() {"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
End Sub
Now save and run the application.
Figure 3.