Header Ads

WPF: Auto Complete/Suggestion Text Box Control

A Good product requires a good user interaction. Products that are using search boxes will be expected to have auto completion/suggestion feature. In WPF platform, 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 default WPF text box control. Most of these libraries are available in 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 Auto Complete/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 text box with auto complete/suggestion feature along with its integration within your code in WPF platform.


Prerequisites:

Following are some prerequisites before you proceed any further in this tutorial:
  1. Knowledge about Windows Presentation Form (WPF).
  2. Knowledge of C# Programming.
  3. Knowledge about C# LINQ.
You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2017 Professional.

Download Now!

Background

In order to create the WPF auto complete/suggestion text box control. I have used a composite of built-in controls i.e. StackPanel, TextBox control, Popup control and ListBox default controls. Following is the hierarchy that I have used in my user control to combine these default controls i.e.


Usage

In order to use my auto complete/suggestion text box control, you need to include my user control namespace into your target XAML file and following line of code i.e.



You also need to set your auto suggestion list in the target XAML.CS file i.e.



Let's begin now.

1) Create a new WPF application project and name it "WPFAutoCompleteTextBox".

2) Create "Views\UserControls\AutoCompleteTextBoxUserControl.xaml" file and replace following code in it i.e.

<UserControl x:Class="WPFAutoCompleteTextBox.Views.UserControls.AutoCompleteTextBoxUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFAutoCompleteTextBox.Views.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="480" d:DesignWidth="640">

    <Grid>
        <StackPanel Orientation="Vertical"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center">

            <!-- Text Box -->
            <Border x:Name="autoTextBoxBorder"
                        Width="220"
                        Height="50">

                <Border.Background>
                    <ImageBrush ImageSource="/WPFAutoCompleteTextBox;component/Content/img/text-box_bg.png"/>
                </Border.Background>

                <TextBox x:Name="autoTextBox"
                             Width="220" 
                             Height="50"
                             FontSize="18"  
                             HorizontalAlignment="Center" 
                             VerticalAlignment="Center" 
                             BorderThickness="0"
                             VerticalContentAlignment="Center"
                             HorizontalContentAlignment="Center"
                             Padding="0,0,0,0"
                             Background="Transparent"
                             Foreground="Black"
                             TextChanged="AutoTextBox_TextChanged"/>
            </Border>

            <!-- Auto Suggestion box -->
            <Popup x:Name="autoListPopup"
                   Visibility="Collapsed"                
                   Height="100"
                   StaysOpen="False"
                   Placement="Bottom">

                <ListBox x:Name="autoList"
                         Visibility="Collapsed"
                         Width="500"
                         Height="100"
                         SelectionChanged="AutoList_SelectionChanged" />
            </Popup>
        </StackPanel>
    </Grid>
</UserControl>

In the above code, I have created my auto complete/suggestion user control hierarchy from the built-in WPF control with default settings.

3) Now open, "Views\UserControls\AutoCompleteTextBoxUserControl.xaml.cs" file and replace following code in it i.e.

//-----------------------------------------------------------------------
// <copyright file="AutoCompleteTextBoxUserControl.xaml.cs" company="None">
//     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.
// </copyright>
// <author>Asma Khalid</author>
//-----------------------------------------------------------------------

namespace WPFAutoCompleteTextBox.Views.UserControls
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;

    /// <summary>
    /// Interaction logic for Autocomplete Text Box UserControl
    /// </summary>
    public partial class AutoCompleteTextBoxUserControl : UserControl
    {
        #region Private properties.

        /// <summary>
        /// Auto suggestion list property.
        /// </summary>
        private List<string> autoSuggestionList = new List<string>();

        #endregion

        #region Default Constructor

        /// <summary>
        /// Initializes a new instance of the <see cref="AutoCompleteTextBoxUserControl" /> class.
        /// </summary>
        public AutoCompleteTextBoxUserControl()
        {
            try
            {
                // Initialization.
                this.InitializeComponent();
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion

        #region Protected / Public properties.

        /// <summary>
        /// Gets or sets Auto suggestion list property.
        /// </summary>
        public List<string> AutoSuggestionList
        {
            get { return this.autoSuggestionList; }
            set { this.autoSuggestionList = value; }
        }

        #endregion

        #region Open Auto Suggestion box method

        /// <summary>
        ///  Open Auto Suggestion box method
        /// </summary>
        private void OpenAutoSuggestionBox()
        {
            try
            {
                // Enable.
                this.autoListPopup.Visibility = Visibility.Visible;
                this.autoListPopup.IsOpen = true;
                this.autoList.Visibility = Visibility.Visible;
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion

        #region Close Auto Suggestion box method

        /// <summary>
        ///  Close Auto Suggestion box method
        /// </summary>
        private void CloseAutoSuggestionBox()
        {
            try
            {
                // Enable.
                this.autoListPopup.Visibility = Visibility.Collapsed;
                this.autoListPopup.IsOpen = false;
                this.autoList.Visibility = Visibility.Collapsed;
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion

        #region Auto Text Box text changed method

        /// <summary>
        ///  Auto Text Box text changed method.
        /// </summary>
        /// <param name="sender">Sender parameter</param>
        /// <param name="e">Event parameter</param>
        private void AutoTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            try
            {
                // Verification.
                if (string.IsNullOrEmpty(this.autoTextBox.Text))
                {
                    // Disable.
                    this.CloseAutoSuggestionBox();

                    // Info.
                    return;
                }

                // Enable.
                this.OpenAutoSuggestionBox();

                // Settings.
                this.autoList.ItemsSource = this.AutoSuggestionList.Where(p => p.ToLower().Contains(this.autoTextBox.Text.ToLower())).ToList();
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion

        #region Auto list selection changed method

        /// <summary>
        ///  Auto list selection changed method.
        /// </summary>
        /// <param name="sender">Sender parameter</param>
        /// <param name="e">Event parameter</param>
        private void AutoList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            try
            {
                // Verification.
                if (this.autoList.SelectedIndex <= -1)
                {
                    // Disable.
                    this.CloseAutoSuggestionBox();

                    // Info.
                    return;
                }

                // Disable.
                this.CloseAutoSuggestionBox();

                // Settings.
                this.autoTextBox.Text = this.autoList.SelectedItem.ToString();
                this.autoList.SelectedIndex = -1;
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion
    }
}

In the above code, I have created a public property "AutoSuggestionList" to which you will provide your auto suggestion list. I have then created "OpenAutoSuggestionBox(..)" method, which will open the auto suggestion box as the end-user types in the text box. Then, I have created "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.

4) Now, create a new "Views\Pages\HomePage.xaml" file and replace the following code in it i.e.

<Page x:Class="WPFAutoCompleteTextBox.Views.Pages.HomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WPFAutoCompleteTextBox.Views.Pages"
      xmlns:uc ="clr-namespace:WPFAutoCompleteTextBox.Views.UserControls"
      mc:Ignorable="d" 
      d:DesignHeight="480" d:DesignWidth="640"
      Title="Home Page">

    <Grid>
        <DockPanel>
            <Border Grid.Row="1"
                        Width=" 400"
                        Height="300" 
                        BorderThickness="1" 
                        BorderBrush="Black" 
                        CornerRadius="20" 
                        Opacity="1">
                
                <Border.Background>
                    <ImageBrush ImageSource="/WPFAutoCompleteTextBox;component/Content/img/bg_2.png">
                        <ImageBrush.RelativeTransform>
                            <TransformGroup>
                                <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                <RotateTransform CenterY="0.5" CenterX="0.5"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </ImageBrush.RelativeTransform>
                    </ImageBrush>
                </Border.Background>

                <StackPanel Orientation="Vertical" 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Width=" 400"
                                Height="300" >

                    <TextBlock Text="Enter Your Country Name"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center" 
                                   Margin="0,110,0,0" 
                                   FontWeight="Bold" 
                                   FontSize="18" 
                                   Foreground="Black" />

                    <!-- Auto suggestion -->
                    <uc:AutoCompleteTextBoxUserControl x:Name="autoSuggestionUseControl" />
                </StackPanel>
            </Border>
        </DockPanel>
    </Grid>
</Page>

In the above code, I have created a simple page which will contain my auto complete/suggestion text box for user to provide input and select target information accordingly. I am using country list as my auto suggestion list.

5) Open "Views\Pages\HomePage.xaml.cs" file and replace the following code in it i.e.

//-----------------------------------------------------------------------
// <copyright file="HomePage.xaml.cs" company="None">
//     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.
// </copyright>
// <author>Asma Khalid</author>
//-----------------------------------------------------------------------

namespace WPFAutoCompleteTextBox.Views.Pages
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    using WPFAutoCompleteTextBox.Model.BusinessLogic;

    /// <summary>
    /// Interaction logic for Home Page
    /// </summary>
    public partial class HomePage : Page
    {
        #region Default Constructor

        /// <summary>
        /// Initializes a new instance of the <see cref="HomePage" /> class.
        /// </summary>
        public HomePage()
        {
            try
            {
                // Initialization.
                this.InitializeComponent();

                // Loaded.
                this.Loaded += this.HomePage_Loaded;
            }
            catch (Exception ex)
            {
                // Info.
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion

        #region Page Loaded event method.

        /// <summary>
        /// Page Loaded event method
        /// </summary>
        /// <param name="sender">Sender parameter</param>
        /// <param name="e">Event parameter</param>
        private void HomePage_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                // Auto suggestion list.
                this.autoSuggestionUseControl.AutoSuggestionList = HomeBusinessLogic.LoadCountryList();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                Console.Write(ex);
            }
        }

        #endregion
    }
}

In the above code, I have created "HomePage_Loaded(...)" method in which I am loading my auto suggestion list into my auto suggestion text box user control.

6) Now, execute the project and you will be able to see the following in action i.e.


Conclusion

In this article, you will learn to create auto complete/suggestion text box control using built-in UI controls in WPF platform. You will also learn to integrate this auto complete/suggestion text box user control into your own target WPF page.

Disclaimer

The background image use in this article has been taken from freepike.

16 comments:

  1. Thank you for taking the time to publish this information very useful! Chevy truck glass

    ReplyDelete
  2. You copied the code from c-sharpcorner and you event put watermarks lol

    ReplyDelete
    Replies
    1. I have the proprietary Of the code on C-Sharpcorner, it is mine. Put a little effort in researching your facts before falsely blaming someone's hard work.

      Delete
  3. I was reading some of your content on this website and I conceive this internet site is really informative ! Keep on putting up. spy phone

    ReplyDelete
  4. That could be at the same time the best send in that in reality preferred examining. It's actually not every single day that many of us support the chance to figure out the very first thing. soap sleeve packaging

    ReplyDelete
  5. This blog is very informative. Packing can be a long hectic process but it can be made easier by following the tips that you have mentioned above. Thanks for sharing such important and useful information. Keep it up.
    visit mentioned website for printing services.
    custom gift packaging
    Packaging boxes wholesale
    Custom candy packaging
    cake boxes wholesale

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. These are for the most part looking like a star, bullseye, or small break. Despite the fact that it might seem harmless, over the long haul, a stone chip will without a doubt spread to shape a break.mobile windshield replacement

    ReplyDelete

  8. Thanks for sharing an good informative blog with more details.I like the helpful info you provide in your articles. I have saved it for my future reference. Keep it up the good work.
    Sundaram Home Finance Limited
    Home Loans
    Plot Loans
    Home Improvement Loans
    Home Extension Loans
    Top Up Loans
    Take Over Loan
    Mortgage Loan

    ReplyDelete
  9. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. traffic control company

    ReplyDelete