Understanding AutoSuggestBox In UWP

In this article, we will discuss how to implement the AutoSuggestBox in UWP. We have discussed about the AppBar and CommandBar implementation in my previous article. You all must be aware, AutoSuggestBox is a default class on Windows.UI.Xaml.Controls package in Windows Runtime APIs.

Universal Windows Platform Series can be understood from the links, given below:

• Understanding Universal Windows Platform With Hello World App
• Understanding AppBar And CommandBar In UWP

Background

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

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

How to implement AutoSuggestBox and run UWP App

We are going to discuss how to implement AutoSuggestBox with the sample apps on UWP and show the demo in multiple devices. 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 click new project. New Project Window will open, you can select an installed template like “ Universal” under the Windows on Visual C# Template and select a Blank App (Universal Windows). Type Project Name UWPAutoSuggestBox. Choose the project location path and click the OK button.

Now, you can see the UWPAutoSuggestBox project structure as shown in the screenshot, given below:

Step 2: As you all know, we have discussed project folder structure and the files in my previous article.

• Windows 10 - UWP Hello World Apps

Step 3: As you all know, we have a toolbox available in Visual Studio, which is available in AutoSuggestBox control in the screenshot, given below:



Now, you can see the auto generated code, as shown below:

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

Search.xaml

<Page
    x:Class="UWPAutoSuggestBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAutoSuggestBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <CommandBar ClosedDisplayMode="Minimal"  Background="#1FA2E1">

        </CommandBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <CommandBar ClosedDisplayMode="Minimal" Background="#1FA2E1"></CommandBar>
    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <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>

Search.xaml.cs

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()
        {
            this.InitializeComponent();
        }
        List<string> _listSuggestion = null;
        private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
            {
                    List<string> _nameList = new List<string>();
                    _nameList.Add("Santhakumar");
                    _nameList.Add("Vishanth");
                    _nameList.Add("Dinesh");
                    _nameList.Add("Srinivasan");
                    _nameList.Add("Nandhakumar");
                   _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 the 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 Debug and Local Machine option to run the apps.

 

Step 5

Now, let's start to run the existing Universal Windows app in HoloLens Emulator. If you run the UWP Hello World Apps with the HoloLens Emulators, you can see how the apps look, as shown below:

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

 

 

Source Code 

 

You can also download the source code here.

 

Note

You can also read this article in my blog here.

Conclusion

I hope you understood AutoSuggestBox control and how to run it on multiple devices. I have covered all the required things. If you find anything which I missed in this article, please let me know. Please share your valuable feedback or suggestions.