Understanding AutoSuggestBox In UWP

by Santhakumar Munuswamy

  Posted on  31 July 2016



In this article we will discuss how to implement the AutoSuggestBox in UWP. We have discussed about the AppBar and CommandBar implementation in the my previous article. As you all know AutoSuggestBox is a default classes on the Windows.UI.Xaml.Controls package in Windows Runtime APIs.

Universal Windows Platform Series


AutoSuggestBox is a UI control and which is used to list of suggestion to select from the user input. We can able to customize the control and its enable to the search functionality in AutoSuggestBox. They are three important item such as Text Changed, Suggestion chosen, Query submitted in AutoSuggestBox.

  • Text Changed - When the user enters text, update the suggestion list.
  • Suggestion chosen - When the user chooses a suggestion in the suggestion list, update the text box.
  • Query submitted - When the user submits a query, show the query results.

How to implement AutoSuggestBox and run UWP App

We are going to discuss how to implement AutoSuggestBox with a sample apps on UWP and show the demo in multiple device. We will see the step by step guidelines for the UWP AutoSuggestBox app creation here

Step 1:

Open Visual Studio 2015. Go to file menu, point to new and then click new project. 

New Project window will open, you can select a installed template like “ Universal” under the 

Windows on Visual C# Template, and then select a Blank App (Universal Windows) and type 

Project Name UWPAutoSuggestBox. Choose the project location path and then click on the OK button.

Now, you can see the UWPAutoSuggestBox project structure as in the following screen shot.

Step 2:

As you all know, we have discussed project folder structure and files on my previous article at earlier. 

Step 3:

As you all know, we have toolbox available on visual studio in that which is available on 

AutoSuggestBox control in the below screen shots


Now, you can see the auto generated code as below

<AutoSuggestBox HorizontalAlignment="Left" VerticalAlignment="Top"/>


        <CommandBar ClosedDisplayMode="Minimal"  Background="#1FA2E1">          
        <CommandBar ClosedDisplayMode="Minimal" Background="#1FA2E1"></CommandBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        <StackPanel Grid.Column="0" Grid.Row="0">
          <AutoSuggestBox PlaceholderText="Search" Name="AutoSeggestBox" Padding="15 100 15 15" QueryIcon="Find" TextChanged="AutoSuggestBox_TextChanged" 
SuggestionChosen="AutoSuggestBox_SuggestionChosen" QuerySubmitted="AutoSeggestBox_QuerySubmitted"/> </StackPanel> </Grid> </Page>


using Windows.UI.Xaml.Controls;
using System.Collections.Generic;
using System;
using System.Linq;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPAutoSuggestBox
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
        public MainPage()
        List<string> _listSuggestion = null;
        private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
                    List<string> _nameList = new List<string>();        
                   _listSuggestion = _nameList.Where(x => x.StartsWith(sender.Text)).ToList();
                    sender.ItemsSource = _listSuggestion;               
        private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
            var selectedItem = args.SelectedItem.ToString();
            sender.Text = selectedItem;

        private void AutoSeggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
            if (args.ChosenSuggestion != null)
                AutoSeggestBox.Text = args.ChosenSuggestion.ToString();


Step 4: 

Now, if you can run the UWPAutoSuggestBox Apps with the different devices, you can see how an apps looks, 

as shown below: 

Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps

Select a Debug and Local Machine option to run the apps

Step 5:

Now, Lets start to run the existing universal windows app in HoloLens emulator. if you can run the UWP 

Hello World Apps with the HoloLens Emulators, you can see how an apps looks, as shown below: 

Select a Debug and HoloLens Emulator 10.0.11082.1039 option to run the apps

Source Code

you can download the source code to here


I hope you understood the AutoSuggestBox control and run it on multiple devices. I have covered all

the required things. If you find anything that I missed in this article, please let me know. 

Please share your valuable feedback or suggestions.


About the Author
Santhakumar Munuswamy is a seasoned Solution Architect and Most Valuable Professional in Cloud /AI solutions. He has been experienced around 14 years in Solution designing, Software Product Development, Technical Documentation, Project Management for Web and Cloud Applications. He has experience in the IT industry across different domains (Automotive, Telecommunications, Healthcare, Logistics & Warehouse Automation, etc.) with roles in Technical Architect, Genesys Consultant, Technical Lead, Team Lead, and Developer. He has experienced in mentorship and coaching high potential developers.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus

Month List

Community Badges