Post
Ask Question

Learn Universal Windows Programming Via Modern C++ (AutoSuggestBox Control)

Before reading this article, I highly recommend reading the previous parts of the series.

In this article, we are going to learn about AutoSuggestBox in Modern C++

AutosuggestBox

It’s like a text control that makes suggestions to users as they type. Based on the user input a suggestions list is displayed in the control.

Let see how to implement this control and some of the important events and properties.

This sample is going to use weekdays as a suggestion list

Prepare the collection 

IVector<IInspectable>

IVector interface is use to prepare the collection.

  1. IVector<IInspectable> autoCollection = single_threaded_vector<IInspectable>();  
  2.         autoCollection.Append(PropertyValue::CreateString(L"sunday"));  
  3.         autoCollection.Append(PropertyValue::CreateString(L"Monday"));  
  4.         autoCollection.Append(PropertyValue::CreateString(L"Tuesday"));  
  5.         autoCollection.Append(PropertyValue::CreateString(L"Wednesday"));  
  6.         autoCollection.Append(PropertyValue::CreateString(L"Thursday"));  
  7.         autoCollection.Append(PropertyValue::CreateString(L"Friday"));  
  8.         autoCollection.Append(PropertyValue::CreateString(L"saturday"));  

Assign the collection to the control

Itemsource is use to generate the items content of the itemscontrols(data) and assign the collection to this property, and collection shows as suggestions to the user

  1. AutoSuggestBox autoBox;  
  2. autoBox.ItemsSource(autoCollection);   
 

Text changed

Text changed event is get triggered , when the user enters text, based on the text, suggestion list get updated.
  1. void OnTextChanged(IInspectable const &sender, AutoSuggestBoxTextChangedEventArgs const args)  
  2. {   
  3.       AutoSuggestBox autoBox = sender.as<AutoSuggestBox>();
          auto userType = autoBox.Text();   
  4. }  

AutoSuggestionBoxTextChangeReason

This property is used to find the reason for the text changing,
  • UserInput: UserInput value is set when the user edited the text
  • SuggestionChosen: Items has selected in the chosen list
  • ProgrammaticChange: Text has changed via code. 
  1. void OnTextChanged(IInspectable const &sender, AutoSuggestBoxTextChangedEventArgs const args)  
  2.     {   
  3.         auto argsReason = args.Reason();  
  4.           
  5.         switch (argsReason)  
  6.         {  
  7.             case AutoSuggestionBoxTextChangeReason::ProgrammaticChange:  
  8.   
  9.                 break;  
  10.             case AutoSuggestionBoxTextChangeReason::SuggestionChosen:  
  11.                 break;  
  12.             case AutoSuggestionBoxTextChangeReason::UserInput:  
  13.                 break;  
  14.             default:  
  15.                 break;  
  16.         }  
  17.   
  18.         AutoSuggestBox autoBox = sender.as<AutoSuggestBox>();  
  19.         auto userType = autoBox.Text();  
  20.   
  21.           
  22.           
  23.     }  
 

Suggestion chosen

When the user chooses a suggestion in the suggestion list , chosen suggestion value updates the text box.

Suggestionchanged event gets triggered when the value is chosen from the suggestion list. The chosen value is read from selectedItem property in AutoSuggestBoxSuggestionChosenEventArgs class.
  1. void OnSuggestionChanged(IInspectable const &sender, AutoSuggestBoxSuggestionChosenEventArgs const args)  
  2.     {  
  3.         auto selectItem = args.SelectedItem().as<IPropertyValue>().GetString();  
  4.         AutoSuggestBox autoBox = sender.as<AutoSuggestBox>();  
  5.                   
  6.     }   
 

Query submitted

When the user submits a query by the enter key or submits via query button , this event gets triggered

The sumbitted query value is read from the querytext property in AutoSuggestBoxQuerySubmittedEventArgs class
  1. void OnQuerySubmitted(IInspectable const &sender, AutoSuggestBoxQuerySubmittedEventArgs const args)  
  2.     {  
  3.         auto value = args.QueryText();  
  4.     }  
 

QueryIcon

This property is used to assign the icon to the control ( Icon is used for making the difference between normal textbox and autosuggestionbox )
  1. AutoSuggestBox autoBox;  
  2.         autoBox.QueryIcon(sysIcon);  
 Let's see the complete example to filter the data based on the user input  
  1. #include "pch.h"  
  2. #include "AutoSuggestBox.h"  
  3.   
  4. using namespace winrt;  
  5. using namespace Windows::ApplicationModel;  
  6. using namespace Windows::ApplicationModel::Activation;  
  7. using namespace Windows::Foundation;  
  8. using namespace Windows::UI;  
  9. using namespace Windows::UI::Xaml;  
  10. using namespace Windows::UI::Xaml::Controls;  
  11. using namespace Windows::UI::Xaml::Controls::Primitives;  
  12. using namespace Windows::UI::Xaml::Interop;  
  13. using namespace Windows::UI::Xaml::Media;  
  14. using namespace Windows::UI::Xaml::Navigation;  
  15. using namespace Windows::UI::Popups;  
  16. using namespace Windows::Storage;  
  17. using namespace Windows::Foundation;  
  18. using namespace Windows::Foundation::Collections;  
  19. using namespace std;  
  20.   
  21.   
  22. struct App :ApplicationT<App>  
  23. {  
  24. public:  
  25.   
  26.       
  27.     IVector<IInspectable> autoCollection = single_threaded_vector<IInspectable>();  
  28.       
  29.     App()  
  30.     {  
  31.   
  32.     }  
  33.   
  34.     virtual ~App() = default;  
  35.       
  36.     SymbolIcon CreateSymbolIcon(Symbol icon)  
  37.     {  
  38.         SymbolIcon sIcon;  
  39.         sIcon.Symbol(icon);  
  40.         return sIcon;  
  41.     }  
  42.   
  43.     void OnTextChanged(IInspectable const &sender, AutoSuggestBoxTextChangedEventArgs const args)  
  44.     {   
  45.         /*auto argsReason = args.Reason(); 
  46.          
  47.         switch (argsReason) 
  48.         { 
  49.             case AutoSuggestionBoxTextChangeReason::ProgrammaticChange: 
  50.  
  51.                 break; 
  52.             case AutoSuggestionBoxTextChangeReason::SuggestionChosen: 
  53.                 break; 
  54.             case AutoSuggestionBoxTextChangeReason::UserInput: 
  55.                 break; 
  56.             default: 
  57.                 break; 
  58.         } 
  59. */  
  60.         AutoSuggestBox autoBox = sender.as<AutoSuggestBox>();  
  61.         auto userType = autoBox.Text();  
  62.   
  63.         FindString(userType, autoBox);  
  64.           
  65.     }  
  66.   
  67.     void OnSuggestionChanged(IInspectable const &sender, AutoSuggestBoxSuggestionChosenEventArgs const args)  
  68.     {  
  69.         auto selectItem = args.SelectedItem().as<IPropertyValue>().GetString();  
  70.         AutoSuggestBox autoBox = sender.as<AutoSuggestBox>();  
  71.         FindString(selectItem,autoBox);       
  72.     }  
  73.   
  74.     void OnQuerySubmitted(IInspectable const &sender, AutoSuggestBoxQuerySubmittedEventArgs const args)  
  75.     {  
  76.         auto value = args.QueryText();  
  77.     }  
  78.   
  79.     void FindString(winrt::hstring userType, AutoSuggestBox &autoBox)  
  80.     {  
  81.         IVector<IInspectable> targetItems = single_threaded_vector<IInspectable>();  
  82.   
  83.         for (int i = 0; i < autoCollection.Size(); i++)  
  84.         {  
  85.             auto value = autoCollection.GetAt(i);  
  86.             IPropertyValue item = value.as<IPropertyValue>();  
  87.             if (std::wcsstr(item.GetString().c_str(), userType.c_str()))  
  88.             {  
  89.                 targetItems.Append(value);  
  90.             }  
  91.         }  
  92.         autoBox.ItemsSource(targetItems);  
  93.     }  
  94.   
  95.     TextBlock CreateTextBlock(hstring text)  
  96.     {  
  97.         TextBlock txtBlock;  
  98.         txtBlock.Text(text);  
  99.         txtBlock.FontFamily(FontFamily(L"Segoe UI Semibold"));  
  100.         txtBlock.TextAlignment(TextAlignment::Left);  
  101.         txtBlock.FontSize(35);  
  102.         txtBlock.Foreground(SolidColorBrush(Colors::Brown()));  
  103.         txtBlock.Margin(CreateThickness(10, 10, 0, 0));  
  104.         return txtBlock;  
  105.     }  
  106.   
  107.     Thickness CreateThickness(int left, int top, int right, int bottom)  
  108.     {  
  109.         Thickness thick;  
  110.         thick.Left = left;  
  111.         thick.Top = top;  
  112.         thick.Right = right;  
  113.         thick.Bottom = bottom;  
  114.         return thick;  
  115.     }  
  116.   
  117.     void OnLaunched(LaunchActivatedEventArgs const&)  
  118.     {  
  119.   
  120.         auto sysIcon = CreateSymbolIcon(Symbol::Find);  
  121.   
  122.         AutoSuggestBox autoBox;  
  123.         autoBox.QueryIcon(sysIcon);  
  124.   
  125.         autoBox.TextChanged({ this,&App::OnTextChanged });  
  126.         autoBox.SuggestionChosen({ this,&App::OnSuggestionChanged });  
  127.         autoBox.QuerySubmitted({ this,&App::OnQuerySubmitted });  
  128.   
  129.         autoBox.PlaceholderText(L"Hey am  AutoSuggestBox ctl");  
  130.   
  131.         autoCollection.Append(PropertyValue::CreateString(L"sunday"));  
  132.         autoCollection.Append(PropertyValue::CreateString(L"Monday"));  
  133.         autoCollection.Append(PropertyValue::CreateString(L"Tuesday"));  
  134.         autoCollection.Append(PropertyValue::CreateString(L"Wednesday"));  
  135.         autoCollection.Append(PropertyValue::CreateString(L"Thursday"));  
  136.         autoCollection.Append(PropertyValue::CreateString(L"Friday"));  
  137.         autoCollection.Append(PropertyValue::CreateString(L"saturday"));  
  138.   
  139.         autoBox.ItemsSource(autoCollection);  
  140.         autoBox.Margin(CreateThickness(10, 30, 0, 0));  
  141.           
  142.         StackPanel panel;  
  143.         auto textBlock = CreateTextBlock(L"AutoSuggestBox(Modern C++)");  
  144.         panel.Children().Append(textBlock);  
  145.   
  146.         StackPanel childPanel;  
  147.         childPanel.Children().Append(autoBox);  
  148.         panel.Children().Append(childPanel);  
  149.           
  150.         Window window = Window::Current();  
  151.         window.Content(panel);  
  152.         window.Activate();  
  153.   
  154.     }  
  155. };  
  156.   
  157.   
  158.   
  159.   
  160.   
  161. int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)  
  162. {  
  163.     Application::Start([](auto &&) {make<App>(); });  
  164.     return 0;  
  165. }  
FindString is a main function (user defined function) in the above program.
 
In the textchanged &  OnSuggestionChanged event read the text which is entered by the user , and pass the value to this function.

Here I am checking into the collection. User enters text value and finally temporary collection is assgined to the autosuggestion control. This list displays to the user as a suggestion list.
  1. void FindString(winrt::hstring userType, AutoSuggestBox &autoBox)  
  2. {  
  3.     IVector<IInspectable> targetItems = single_threaded_vector<IInspectable>();  
  4.   
  5.     for (int i = 0; i < autoCollection.Size(); i++)  
  6.     {  
  7.         auto value = autoCollection.GetAt(i);  
  8.         IPropertyValue item = value.as<IPropertyValue>();  
  9.         if (std::wcsstr(item.GetString().c_str(), userType.c_str()))  
  10.         {  
  11.             targetItems.Append(value);  
  12.         }  
  13.     }  
  14.     autoBox.ItemsSource(targetItems);  
  15. }  
output 
 
 
 
Conclusion

I hope you understood how to use Autosuggestionbox control.


Similar Articles