Share via

  • Article

How to: Change the Appearance and Behavior of the AutoCompleteBox Control

Microsoft Silverlight will reach end of support after October 2021. Learn more.

The AutoCompleteBox control is highly customizable in appearance and behavior. This topic shows you how to change the appearance and behavior of the AutoCompleteBox by setting its properties, handling events, and calling methods on the control. For information about how to perform advanced customization of the AutoCompleteBox's appearance and behavior by creating a new default template, see Control Customization and AutoCompleteBox Styles and Templates.

This topic contains the following sections:

  • Changing the appearance of the AutoCompleteBox

  • Changing how the AutoCompleteBox filters items

  • Populating the AutoCompleteBox Drop-Down Manually

Changing the appearance of the AutoCompleteBox

The AutoCompleteBox enables you to change its appearance by creating new styles.

To change the appearance of the text box part of the control

  • Create a style that targets the TextBox type and set the TextBoxStyle property to the style. The following XAML shows a style declared as a resource and set as the value for the TextBoxStyle property.

        <Style  x:Key="myTBStyle" TargetType="TextBox">
    <Setter Property="Background" Value="LightYellow" />
    <Setter Property="Foreground" Value="DarkSlateGray" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="BorderBrush" Value="DarkGray" />
</Style>


...


<sdk:AutoCompleteBox Width="150"  Height="30" x:Name="myACB" 
    TextBoxStyle="{StaticResource myTBStyle}" 
    ItemContainerStyle="{StaticResource myLBStyle}" />

To change the drop-down part of the control

  • Create a style that targets the ListBox type and set the ItemContainerStyle property to the style. The following XAML shows a style declared as a resource and set as the value for the ItemContainerStyle property.

    <Style  x:Key="myLBStyle" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Khaki" />
    <Setter Property="Foreground" Value="DarkSlateGray" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="FontStyle" Value="Italic" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="BorderBrush" Value="DarkGray" />
</Style>


...


<sdk:AutoCompleteBox Width="150"  Height="30" x:Name="myACB" 
    TextBoxStyle="{StaticResource myTBStyle}" 
    ItemContainerStyle="{StaticResource myLBStyle}" />

Changing how the AutoCompleteBox filters items

You can specify how the AutoCompleteBox filters items. For example, you can specify whether it looks for matches at the start of a word, in a word, or other choices. You may also need a custom text or object filter for the objects displayed in the AutoCompleteBox, but you are not able to change the object. In this case, you can create a custom text or object filter for the AutoCompleteBox by setting the TextFilter or ItemFilter properties to a method that matches the signature of the AutoCompleteFilterPredicate<T> delegate.

To change how the AutoCompleteBox filters items

  • Set the FilterMode property to a AutoCompleteFilterMode value.

    The following XAML shows how to set the FilterMode property to look for a string that contains another string and is case sensitive.

    <input:AutoCompleteBox FilterMode="ContainsCaseSensitive" 
   Height="40" Width="200" x:Name="ACB" />

To create a custom string filter

  • Set the TextFilter property to a method that matches the signature of the AutoCompleteFilterPredicate<T> delegate type that accepts a string. The method should perform the necessary string filtering for your AutoCompleteBox.

    The following example code shows associating the property with the delegate method, and the custom string filtering.

    Private employees As New List(Of Employee)()
Public Sub New()
    InitializeComponent()
    ' Add some items to the employee list. 
    employees.Add(New Employee("Sells", "Chris", "csells", 1234))
    employees.Add(New Employee("Cabatana", "Reina", "rcaba", 5678))
    employees.Add(New Employee("Sprenger", "Christof", "cspreng", 9123))
    employees.Add(New Employee("Brandel", "Jonas", "jbrandel", 4567))
    employees.Add(New Employee("Bye", "Dennis", "dbye", 8912))
    employees.Add(New Employee("Reid", "Miles", "mreid", 3456))

    ' Set the item source. 
    myACB.ItemsSource = employees


...


' Set the TextFilter property to the search method. 
myACB.TextFilter = AddressOf SearchEmployees


...


End Sub


...


Private Function SearchEmployees(ByVal search As String, ByVal value As String) As Boolean
    value = value.ToLower()
    ' Split the string a new line. 
    Dim words As String() = value.Split(System.Environment.NewLine.ToCharArray(), StringSplitOptions.RemoveEmptyEntries)

    Dim names As String() = words(0).Split(" "c)

    ' Look for a match in the first line; discarding the "employee:" entry. 
    For Each name As String In names
        If name <> "employee:" Then
            If name.StartsWith(search) Then
                Return True
            End If
        End If
    Next
    ' If no match, return false. 
    Return False
End Function


...


Public Class Employee
    Private _LastName As String
    Public Property LastName() As String
        Get
            Return _LastName
        End Get
        Set(ByVal value As String)
            _LastName = value
        End Set
    End Property
    Private _FirstName As String
    Public Property FirstName() As String
        Get
            Return _FirstName
        End Get
        Set(ByVal value As String)
            _FirstName = value
        End Set
    End Property
    Private _EmailName As String
    Public Property EmailName() As String
        Get
            Return _EmailName
        End Get
        Set(ByVal value As String)
            _EmailName = value
        End Set
    End Property
    Private _ID As Integer
    Public Property ID() As Integer
        Get
            Return _ID
        End Get
        Set(ByVal value As Integer)
            _ID = value
        End Set
    End Property
    Public Sub New(ByVal empLastName As String, ByVal empFirstName As String, ByVal empEmail As String, ByVal empID As Integer)
        LastName = empLastName
        FirstName = empFirstName
        EmailName = empEmail
        ID = empID
    End Sub
    Public Overloads Overrides Function ToString() As String
        Return ((("Employee: " & FirstName & " ") + LastName + System.Environment.NewLine & "Email: ") + EmailName + System.Environment.NewLine & "ID: ") + ID.ToString()
    End Function
End Class

    List<Employee> employees = new List<Employee>();
public MainPage()
{
    InitializeComponent();
    // Add some items to the employee list.
    employees.Add(new Employee("Sells", "Chris", "csells", 1234));
    employees.Add(new Employee("Cabatana", "Reina", "rcaba", 5678));
    employees.Add(new Employee("Sprenger", "Christof", "cspreng", 9123));
    employees.Add(new Employee("Brandel", "Jonas", "jbrandel", 4567));
    employees.Add(new Employee("Bye", "Dennis", "dbye", 8912));
    employees.Add(new Employee("Reid", "Miles", "mreid", 3456));

    // Set the item source.
    myACB.ItemsSource = employees;


...


// Set the TextFilter property to the search method.
myACB.TextFilter += SearchEmployees;


...


}


...


bool SearchEmployees(string search, string value)
{
    value = value.ToLower();
    // Split the string a new line.
    string[] words = value.Split(System.Environment.NewLine.ToCharArray(),
        StringSplitOptions.RemoveEmptyEntries);

    string[] names = words[0].Split(' ');

    // Look for a match in the first line; discarding the "employee:" entry.
    foreach (string name in names)
    {
        if (name != "employee:")
            if (name.StartsWith(search))
                return true;
    }
    // If no match, return false.
    return false;
}


...


public class Employee
{
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string EmailName { get; set; }
    public int ID { get; set; }
    public Employee(string empLastName, string empFirstName, string empEmail, int empID)
    {
        LastName = empLastName;
        FirstName = empFirstName;
        EmailName = empEmail;
        ID = empID;
    }
    public override string ToString()
    {
        return "Employee: " + FirstName + " " + 
            LastName + System.Environment.NewLine + 
            "Email: " + EmailName + System.Environment.NewLine + "ID: " +
            ID.ToString();
    }
}

    <StackPanel x:Name="LayoutRoot" Background="LightGray">
     <TextBlock FontWeight="Bold" Text="AutoCompleteBox Custom Filter Example" Margin="5"/>
     <StackPanel  Orientation="Horizontal">
         <TextBlock Text="Employee:" Margin="5" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
         <sdk:AutoCompleteBox Height="75" Width="200" VerticalAlignment="Center" HorizontalAlignment="Right" 
         x:Name="myACB" FilterMode="Custom" ToolTipService.ToolTip="Enter employee name."/>
     </StackPanel>
     </StackPanel>

To create a custom object filter

  • Set the ItemFilter property to a method that matches the signature of the AutoCompleteFilterPredicate<T> delegate type that accepts a object. The method should perform the necessary object filtering for your AutoCompleteBox.

    The following code shows an example of setting the ItemFilter property and the custom object filtering.

    Private employees As New List(Of Employee)()
Public Sub New()
    InitializeComponent()
    ' Add some items to the employee list. 
    employees.Add(New Employee("Sells", "Chris", "csells", 1234))
    employees.Add(New Employee("Cabatana", "Reina", "rcaba", 5678))
    employees.Add(New Employee("Sprenger", "Christof", "cspreng", 9123))
    employees.Add(New Employee("Brandel", "Jonas", "jbrandel", 4567))
    employees.Add(New Employee("Bye", "Dennis", "dbye", 8912))
    employees.Add(New Employee("Reid", "Miles", "mreid", 3456))

    ' Set the item source. 
    myACB.ItemsSource = employees


...


       ' Set the ItemFilter property to the search method. 
     myACB.ItemFilter = AddressOf SearchEmployees


...


End Sub


...


Private Function SearchEmployees(ByVal search As String, ByVal value As Object) As Boolean
    ' Cast the value to an Employee. 
    Dim emp As Employee = TryCast(value, Employee)
    If emp IsNot Nothing Then
        ' Look for a match in the first and last names. 
        If emp.LastName.ToLower().StartsWith(search) Then
            Return True

        ElseIf emp.FirstName.ToLower().StartsWith(search) Then
            Return True
        End If
    End If
    ' If no match, return false. 
    Return False
End Function


...


Public Class Employee
    Private _LastName As String
    Public Property LastName() As String
        Get
            Return _LastName
        End Get
        Set(ByVal value As String)
            _LastName = value
        End Set
    End Property
    Private _FirstName As String
    Public Property FirstName() As String
        Get
            Return _FirstName
        End Get
        Set(ByVal value As String)
            _FirstName = value
        End Set
    End Property
    Private _EmailName As String
    Public Property EmailName() As String
        Get
            Return _EmailName
        End Get
        Set(ByVal value As String)
            _EmailName = value
        End Set
    End Property
    Private _ID As Integer
    Public Property ID() As Integer
        Get
            Return _ID
        End Get
        Set(ByVal value As Integer)
            _ID = value
        End Set
    End Property
    Public Sub New(ByVal empLastName As String, ByVal empFirstName As String, ByVal empEmail As String, ByVal empID As Integer)
        LastName = empLastName
        FirstName = empFirstName
        EmailName = empEmail
        ID = empID
    End Sub
    Public Overloads Overrides Function ToString() As String
        Return ((("Employee: " & FirstName & " ") + LastName + System.Environment.NewLine & "Email: ") + EmailName + System.Environment.NewLine & "ID: ") + ID.ToString()
    End Function
End Class

    List<Employee> employees = new List<Employee>();
public MainPage()
{
    InitializeComponent();
    // Add some items to the employee list.
    employees.Add(new Employee("Sells", "Chris", "csells", 1234));
    employees.Add(new Employee("Cabatana", "Reina", "rcaba", 5678));
    employees.Add(new Employee("Sprenger", "Christof", "cspreng", 9123));
    employees.Add(new Employee("Brandel", "Jonas", "jbrandel", 4567));
    employees.Add(new Employee("Bye", "Dennis", "dbye", 8912));
    employees.Add(new Employee("Reid", "Miles", "mreid", 3456));

    // Set the item source.
    myACB.ItemsSource = employees;


...


// Set the ItemFilter property to the search method.
myACB.ItemFilter += SearchEmployees;


...


}


...


bool SearchEmployees(string search, object value)
{
    // Cast the value to an Employee.
    Employee emp = value as Employee;
    if (emp != null)
    {
        // Look for a match in the first and last names.
        if (emp.LastName.ToLower().StartsWith(search))
            return true;

        else if (emp.FirstName.ToLower().StartsWith(search))
            return true;
    }
    // If no match, return false.
    return false;
}


...


public class Employee
{
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string EmailName { get; set; }
    public int ID { get; set; }
    public Employee(string empLastName, string empFirstName, string empEmail, int empID)
    {
        LastName = empLastName;
        FirstName = empFirstName;
        EmailName = empEmail;
        ID = empID;
    }
    public override string ToString()
    {
        return "Employee: " + FirstName + " " + 
            LastName + System.Environment.NewLine + 
            "Email: " + EmailName + System.Environment.NewLine + "ID: " +
            ID.ToString();
    }
}

    <StackPanel x:Name="LayoutRoot" Background="LightGray">
     <TextBlock FontWeight="Bold" Text="AutoCompleteBox Custom Filter Example" Margin="5"/>
     <StackPanel  Orientation="Horizontal">
         <TextBlock Text="Employee:" Margin="5" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
         <sdk:AutoCompleteBox Height="75" Width="200" VerticalAlignment="Center" HorizontalAlignment="Right" 
         x:Name="myACB" FilterMode="Custom" ToolTipService.ToolTip="Enter employee name."/>
     </StackPanel>
     </StackPanel>

Populating the AutoCompleteBox Drop-Down Manually

You may want to populate the AutoCompleteBox with the result of an asynchronous call to a Web service, or other data source, and therefore populate the drop-down manually. You can easily override the default filtering behavior of the AutoCompleteBox to do this.

To populate the AutoCompleteBox drop-down manually

  1. Optionally, set the MinimumPopulateDelay to 100 or more to delay the populate operation. This decreases the number of calls to populate the AutoCompleteBox as the user types.

  2. Optionally set the MinimumPrefixLength to a value greater than 1 to decrease the number of calls to the populate operation.

  3. Handle the Populating event and cancel it by setting the PopulatingEventArgs.Cancel property to true. This notifies the control that you will populate it manually.

  4. Call the method that will perform the filtering operation. If you are calling a Web service, this will involve a callback method. In this method, when the filter operation is complete, call PopulateComplete. This notifies the control that you are finished populating the control.

    The following code shows how to set MinimumPopulateDelay an MinimumPrefixLength properties handle the Populating event, and call PopulateComplete when the operation is finished. The code calls a Web service asynchronously and uses the returned XML to populate the AutoCompleteBox.

       <StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
    <TextBlock Text="News Topic:" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
    <sdk:AutoCompleteBox VerticalAlignment="Center" HorizontalAlignment="Right" Height="30" 
        Width="100" MinimumPopulateDelay="200" MinimumPrefixLength="3" x:Name="myACB" Populating="AutoCompleteBox_Populating" />
</StackPanel>

        ' Handle the Populating event, but cancel it. Make the call to the web service. 
    Private Sub AutoCompleteBox_Populating(ByVal sender As Object, ByVal e As PopulatingEventArgs)
        e.Cancel = True
        CallToWebService()
    End Sub

    ' Call the topic service at the live search site. 
    Private wc As WebClient
    Private Sub CallToWebService()
        wc = New WebClient()
        wc.DownloadStringAsync(New Uri("http://api.search.live.net/qson.aspx?query=" & _
            myACB.SearchText & "&sources=news"))
        AddHandler wc.DownloadStringCompleted, AddressOf wc_DownloadStringCompleted
    End Sub

    Private Sub wc_DownloadStringCompleted(ByVal sender As Object, _
            ByVal e As DownloadStringCompletedEventArgs)
        If e.[Error] IsNot Nothing Then
            Exit Sub
        End If

        Dim data As New List(Of String)()
        Try
            Dim jso As JsonObject = TryCast(DirectCast(JsonObject.Parse(e.Result),  _
                JsonObject)("SearchSuggestion"), JsonObject)
            Dim originalSearchString As String = jso("Query")
            If originalSearchString = myACB.SearchText Then
                For Each suggestion As JsonObject In DirectCast(jso("Section"), JsonArray)
                    data.Add(suggestion.Values.First())
                Next

                ' Diplay the AutoCompleteBox drop down with any suggestions 
                myACB.ItemsSource = data
                myACB.PopulateComplete()
            End If
        Catch
        End Try
    End Sub
End Class

        // Handle the Populating event, but cancel it. Make the call to the web service.
    private void AutoCompleteBox_Populating(object sender, PopulatingEventArgs e)
    {
        e.Cancel = true;
        CallToWebService();
    }

    // Call the topic service at the live search site.
    WebClient wc;
    private void CallToWebService()
    {
        wc = new WebClient();
        wc.DownloadStringAsync(new Uri
            ("http://api.search.live.net/qson.aspx?query=" + myACB.SearchText +
            "&sources=news"));
        wc.DownloadStringCompleted +=
            new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
    }

    void wc_DownloadStringCompleted(object sender,
        DownloadStringCompletedEventArgs e)
    {
        if (e.Error != null)
        {
            return;
        }

        List<string> data = new List<string>();
        try
        {
            JsonObject jso = ((JsonObject)JsonObject.Parse(e.Result))
                ["SearchSuggestion"] as JsonObject;
            string originalSearchString = jso["Query"];
            if (originalSearchString == myACB.SearchText)
            {
                foreach (JsonObject suggestion in (JsonArray)jso["Section"])
                {
                    data.Add(suggestion.Values.First());
                }

                // Diplay the AutoCompleteBox drop down with any suggestions
                myACB.ItemsSource = data;
                myACB.PopulateComplete();
            }
        }
        catch { }
    }
}