A good product requires good user interaction. Products that are using search boxes will be expected to have auto-completion/suggestion feature. In WPF platform, the default text box control does not have any built-in auto-completion/suggestion feature. There are many 3rd party libraries out there which provide auto-complete/suggestion text box control as a replacement to the default WPF text box control. Most of these libraries are available in the paid version and those which are available for free, are difficult to get integrated with your existing code. So, I have created a very simple AutoComplete/Suggestion control for WPF platform without using any external library.
You can easily integrate my control in your project.
Today, I shall be demonstrating the creation of a text box with auto-complete/suggestion feature along with its integration within your code in WPF platform.
Prerequisites
Following are the prerequisites before you proceed any further in this tutorial.
  1. Knowledge of Windows Presentation Form (WPF).
  2. Knowledge of C# Programming.
  3. Knowledge of C# LINQ.
You can download the complete source code of this tutorial from the below link. The sample code is being developed in Microsoft Visual Studio 2017 Professional.
Let's begin now.
Step 1
Create a new WPF application project and name it "WPFAutoCompleteTextBox".
Step 2
Create the "Views\UserControls\AutoCompleteTextBoxUserControl.xaml" file and replace the following code in it.
  1. <UserControl x:Class="WPFAutoCompleteTextBox.Views.UserControls.AutoCompleteTextBoxUserControl"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6. xmlns:local="clr-namespace:WPFAutoCompleteTextBox.Views.UserControls"
  7. mc:Ignorable="d"
  8. d:DesignHeight="480" d:DesignWidth="640">
  10. <Grid>
  11. <StackPanel Orientation="Vertical"
  12. VerticalAlignment="Center"
  13. HorizontalAlignment="Center">
  15. <!-- Text Box -->
  16. <Border x:Name="autoTextBoxBorder"
  17. Width="220"
  18. Height="50">
  20. <Border.Background>
  21. <ImageBrush ImageSource="/WPFAutoCompleteTextBox;component/Content/img/text-box_bg.png"/>
  22. </Border.Background>
  24. <TextBox x:Name="autoTextBox"
  25. Width="220"
  26. Height="50"
  27. FontSize="18"
  28. HorizontalAlignment="Center"
  29. VerticalAlignment="Center"
  30. BorderThickness="0"
  31. VerticalContentAlignment="Center"
  32. HorizontalContentAlignment="Center"
  33. Padding="0,0,0,0"
  34. Background="Transparent"
  35. Foreground="Black"
  36. TextChanged="AutoTextBox_TextChanged"/>
  37. </Border>
  39. <!-- Auto Suggestion box -->
  40. <Popup x:Name="autoListPopup"
  41. Visibility="Collapsed"
  42. Height="100"
  43. StaysOpen="False"
  44. Placement="Bottom">
  46. <ListBox x:Name="autoList"
  47. Visibility="Collapsed"
  48. Width="500"
  49. Height="100"
  50. SelectionChanged="AutoList_SelectionChanged" />
  51. </Popup>
  52. </StackPanel>
  53. </Grid>
  54. </UserControl>
In the above code, I have created my auto-complete/suggestion user control hierarchy from the built-in WPF control with default settings.
Step 3
Now, open the "Views\UserControls\AutoCompleteTextBoxUserControl.xaml.cs" file and replace with the following code.
  1. //-----------------------------------------------------------------------
  2. // <copyright file="AutoCompleteTextBoxUserControl.xaml.cs" company="None">
  3. // Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.
  4. // </copyright>
  5. // <author>Asma Khalid</author>
  6. //-----------------------------------------------------------------------
  8. namespace WPFAutoCompleteTextBox.Views.UserControls
  9. {
  10. using System;
  11. using System.Collections.Generic;
  12. using System.Linq;
  13. using System.Text;
  14. using System.Threading.Tasks;
  15. using System.Windows;
  16. using System.Windows.Controls;
  17. using System.Windows.Data;
  18. using System.Windows.Documents;
  19. using System.Windows.Input;
  20. using System.Windows.Media;
  21. using System.Windows.Media.Imaging;
  22. using System.Windows.Navigation;
  23. using System.Windows.Shapes;
  25. /// <summary>
  26. /// Interaction logic for Autocomplete Text Box UserControl
  27. /// </summary>
  28. public partial class AutoCompleteTextBoxUserControl : UserControl
  29. {
  30. #region Private properties.
  32. /// <summary>
  33. /// Auto suggestion list property.
  34. /// </summary>
  35. private List<string> autoSuggestionList = new List<string>();
  37. #endregion
  39. #region Default Constructor
  41. /// <summary>
  42. /// Initializes a new instance of the <see cref="AutoCompleteTextBoxUserControl" /> class.
  43. /// </summary>
  44. public AutoCompleteTextBoxUserControl()
  45. {
  46. try
  47. {
  48. // Initialization.
  49. this.InitializeComponent();
  50. }
  51. catch (Exception ex)
  52. {
  53. // Info.
  54. MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
  55. Console.Write(ex);
  56. }
  57. }
  59. #endregion
  61. #region Protected / Public properties.
  63. /// <summary>
  64. /// Gets or sets Auto suggestion list property.
  65. /// </summary>
  66. public List<string> AutoSuggestionList
  67. {
  68. get { return this.autoSuggestionList; }
  69. set { this.autoSuggestionList = value; }
  70. }
  72. #endregion
  74. #region Open Auto Suggestion box method
  76. /// <summary>
  77. /// Open Auto Suggestion box method
  78. /// </summary>
  79. private void OpenAutoSuggestionBox()
  80. {
  81. try
  82. {
  83. // Enable.
  84. this.autoListPopup.Visibility = Visibility.Visible;
  85. this.autoListPopup.IsOpen = true;
  86. this.autoList.Visibility = Visibility.Visible;
  87. }
  88. catch (Exception ex)
  89. {
  90. // Info.
  91. MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
  92. Console.Write(ex);
  93. }
  94. }
  96. #endregion
  98. #region Close Auto Suggestion box method
  100. /// <summary>
  101. /// Close Auto Suggestion box method
  102. /// </summary>
  103. private void CloseAutoSuggestionBox()
  104. {
  105. try
  106. {
  107. // Enable.
  108. this.autoListPopup.Visibility = Visibility.Collapsed;
  109. this.autoListPopup.IsOpen = false;
  110. this.autoList.Visibility = Visibility.Collapsed;
  111. }
  112. catch (Exception ex)
  113. {
  114. // Info.
  115. MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
  116. Console.Write(ex);
  117. }
  118. }
  120. #endregion
  122. #region Auto Text Box text changed the method
  124. /// <summary>
  125. /// Auto Text Box text changed method.
  126. /// </summary>
  127. /// <param name="sender">Sender parameter</param>
  128. /// <param name="e">Event parameter</param>
  129. private void AutoTextBox_TextChanged(object sender, TextChangedEventArgs e)
  130. {
  131. try
  132. {
  133. // Verification.
  134. if (string.IsNullOrEmpty(this.autoTextBox.Text))
  135. {
  136. // Disable.
  137. this.CloseAutoSuggestionBox();
  139. // Info.
  140. return;
  141. }
  143. // Enable.
  144. this.OpenAutoSuggestionBox();
  146. // Settings.
  147. this.autoList.ItemsSource = this.AutoSuggestionList.Where(p => p.ToLower().Contains(this.autoTextBox.Text.ToLower())).ToList();
  148. }
  149. catch (Exception ex)
  150. {
  151. // Info.
  152. MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
  153. Console.Write(ex);
  154. }
  155. }
  157. #endregion
  159. #region Auto list selection changed method
  161. /// <summary>
  162. /// Auto list selection changed method.
  163. /// </summary>
  164. /// <param name="sender">Sender parameter</param>
  165. /// <param name="e">Event parameter</param>
  166. private void AutoList_SelectionChanged(object sender, SelectionChangedEventArgs e)
  167. {
  168. try
  169. {
  170. // Verification.
  171. if (this.autoList.SelectedIndex <= -1)
  172. {
  173. // Disable.
  174. this.CloseAutoSuggestionBox();
  176. // Info.
  177. return;
  178. }
  180. // Disable.
  181. this.CloseAutoSuggestionBox();
  183. // Settings.
  184. this.autoTextBox.Text = this.autoList.SelectedItem.ToString();
  185. this.autoList.SelectedIndex = -1;
  186. }
  187. catch (Exception ex)
  188. {
  189. // Info.
  190. MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
  191. Console.Write(ex);
  192. }
  193. }
  195. #endregion
  196. }
  197. }
In the above code, I have created a public property "AutoSuggestionList" to which you will provide your auto-suggestion list.
I have, then, created an "OpenAutoSuggestionBox(..)" method which will open the auto suggestion box as the end-user types in the text box.
Then, I have created a "CloseSuggestionBox(...)" method which will close the auto-suggestion box when the end-user selects the target suggested item from the auto-suggestion list.
Then, I have created "AutoTextBox_TextChanged(...)" method which will update the auto-suggestion list according to the text typed in the text box by the end-user.
Finally, I have created "AutoList_SelectionChanged(...)" method which will update the text box according to the selected suggested item from the auto-suggestion list by the end-user.
Step 4
In order to use my autocomplete/suggestion text box control, you need to include my user control namespace into your target XAML file and the following line of code.
You also need to set your auto-suggestion list in the target XAML.CS file.
Step 5
Now, execute the project and you will be able to see the following in action.

Conclusion

In this article, we learned to create an auto-complete/auto-suggestion text box control using the built-in UI controls in the WPF platform. Along with this, we learned how to integrate this auto-complete/suggestion text box user control into our own target WPF page.
Disclaimer
The background image used in this article has been taken from freepike.