UWP: AutoSuggestBox

Article
1/17/2024

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.

Background

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.

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox.png

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

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox1.png

Step 2:

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

Windows 10 - UWP Hello World Apps

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

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox2.png

Now, you can see the auto generated code as 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 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

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox3.png

Select a Debug and Local Machine option to run the apps

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox4.png

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox5.png

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

http://www.san2debug.net/image.axd?picture=%2f2016%2f07%2fAutoSuggestBox6.png

Conclusion

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

Share via