Personnalised Autocomplete Textbox Windows 8 Metro App

Question

I have a field in my application which is meant to contain a transaction number. This textbox field must provide suggestions to what the transaction number could be depending on user entry

For example let's say I have the transaction numbers "12345" "12346" and "53213"

If the user types "123" in the textbox I want the textbox to show "12345" and "12346". If the user taps on "12346" the value of the texbox will become "12346"

It seems the autocompletebox doesn't exist anymore in the windows 8 metro apps and the IsTextPredictionEnabled property is only for common words

My problem is as follows : I can't seem to find anything similar to a listbox's ItemSource property.

How do I give values to the textbox so that it knows what to autocomplete with ?

Answer 1

I ended up changing my mind and instead of having an autocomplete textbox I went with a regular textbox linked to a listbox. If items are found the listbox is rendered visible, if not, collapsed.

This code will take the string values coming from a web service (values could come from anywhere else) and go through a validation process to see if they are ok to be shown in the autocomplete listbox

This is my XAML code :

<StackPanel Orientation="Vertical" Grid.Column="1">
    <TextBox x:Name="txtNumeroBon"
             Width="{Binding ElementName=PanelBon, Path=ActualWidth}"
             Style="{StaticResource TextBoxStyles}"
             Margin="8,0,8,0"
             TextChanged="txtNumeroBon_TextChanged"/>

    <ListBox x:Name="lstNumeroBon"
             Visibility="Collapsed"
             Margin="8,0,8,0"
             Height="150"
             SelectionChanged="lstNumeroBon_SelectionChanged"/>
</StackPanel>

This is my onTextChanged method :

    Private Async Function txtNumeroBon_TextChanged(sender As Object, e As TextChangedEventArgs) As Task
        Dim lstSearch As List(Of String) = New List(Of String)
        lstNumeroBon.Visibility = Windows.UI.Xaml.Visibility.Collapsed

        //Only start searching if there are more than 3 characters
        If txtNumeroBon.Text.Length > 2 Then
            //Get the values for the autocomplete into a list
            Dim lstResult = (From p In Await DataService.InstPatronController.GetInstPatron).ToList()
            For i = 0 To lstResult.Count - 1
                // If the item being searched is bigger than the textbox value
                If lstResult(i).Type.ToString.Length > txtNumeroBon.Text.Length Then
                    //Compare items in lstResult to the textbox value and add if they fit
                    If lstResult(i).Type.Substring(0, txtNumeroBon.Text.Length).ToLower() = txtNumeroBon.Text.ToLower() Then
                        lstSearch.Add(lstResult(i).Type.ToString())
                    End If
                End If
            Next
            //If 1 or more items fit the search
            If lstSearch.Count > 0 Then
                lstNumeroBon.ItemsSource = lstSearch
                lstNumeroBon.Visibility = Windows.UI.Xaml.Visibility.Visible
            End If
        End If
    End Function

And this is my listboxSelectionChanged method :

Private Sub lstNumeroBon_SelectionChanged(sender As Object, e As SelectionChangedEventArgs)
    // Verify index to avoid Argument out of range exception
    If lstNumeroBon.SelectedIndex < lstNumeroBon.Items.Count - 1 And lstNumeroBon.SelectedIndex > -1 Then
        txtNumeroBon.Text = lstNumeroBon.Items(lstNumeroBon.SelectedIndex).ToString()
        lstNumeroBon.Visibility = Windows.UI.Xaml.Visibility.Collapsed
    End If
End Sub

A GotFocus and LostFocus method can also be implemented to show and hide the listbox