AutoSuggestBox In UWP

AutoSuggestBox provides a list suggestions based on what user type. Suggestions works when text has been changed by the user and take care of  providing relevant suggestions for the control to display.

Three type of actions mostly use in AutoSuggestBox,

• Text Changed: Fires when user enters text, it updates the suggestion list.
• Suggestion Chosen: When choose suggestion in suggested list, update the text box.
• Query Submitted: When submits a query, it shows the query result.

Getting Stated:

Here are the steps to get started with Windows Universal App:

• Start Visual Studio 2015
• Create a new project
• Click Visual C# and Windows, then select Universal
• Click on Blank App (Universal Windows)
• Provide the name and location of project
• Click OK

First drag and drop AutoSuggestBox control on page from toolbox.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <AutoSuggestBox HorizontalAlignment="Left" x:Name="txtAutoSuggestBox" TextChanged="AutoSuggestBox_TextChanged" QuerySubmitted="AutoSuggestBox_QuerySubmitted" SuggestionChosen="AutoSuggestBox_SuggestionChosen" QueryIcon="Find" PlaceholderText="Search" VerticalAlignment="Top" Width="294" />

</Grid>

public sealed partial class MainPage: Page

{
    public MainPage()
    {

        suggestions = new ObservableCollection < string > ();

        this.InitializeComponent();

    }

    private ObservableCollection < String > suggestions;

    private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)

    {

        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)

        {

            suggestions.Clear();

            suggestions.Add(sender.Text + "1");

            suggestions.Add(sender.Text + "2");

            suggestions.Add(sender.Text + "3");

            suggestions.Add(sender.Text + "4");

            suggestions.Add(sender.Text + "5");

            suggestions.Add(sender.Text + "6");

            suggestions.Add(sender.Text + "7");

            suggestions.Add(sender.Text + "8");

            suggestions.Add(sender.Text + "9");

            sender.ItemsSource = suggestions;

        }

    }

    private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)

    {

        if (args.ChosenSuggestion != null)

            txtAutoSuggestBox.Text = args.ChosenSuggestion.ToString();

        else

            txtAutoSuggestBox.Text = sender.Text;

    }

    private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)

    {

        txtAutoSuggestBox.Text = "Choosen";

    }

}

Output:

Enter a number in text box then suggestions also displaying.

 

 

 

Conclusion:

For more information, download attached source code of this sample. If any question, then please leave a comment in C# corner comment section.

Read more articles on Universal Windows Apps:

• UWP Data Binding Using Microsoft Blend Without Writing Code
• Visual States In Universal Windows Platform