by Santhakumar Munuswamy
Posted on 31 July 2016
UWP
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.
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"/>
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
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
Conclusion
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.