Silverlight AutoCompleteBox Control in VB.NET

In this article we will learn how to use AutoCompleteBox control in SilverLight 4.
  • 2398

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:

au1.gif 

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.

au2.gif

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.

au3.gif 

Figure 3.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.