WPF AutoComplete TextBox

• Download source code - 126.4 KB

Introduction

This is about the auto completed search text box. This loads the IEnumerable values and the user shall do containing search. When the user types the letter/word, it displays all the contained values in the drop down. The search is case insensitive.

How It Differs from Editable WPF ComboBox?

1. This is light search textbox
2. This displays values in dropdown list only when user starts searching values
3. This supports the containing search

The AutoCompleteTextBox and Test Project Description

1. Class Diagram for AutoCompleteTextBox

   

   AutoCompleteTextBox properties description:

   • EnumSource – Source value to the AutoCompleteTextBox. This should be IEnumerable of any object type
   • SelectedText – The selected text/description from the source
   • SelectedItem – The select object from the source
   • DisplayText – The text to display in the AutoCompleteTextBox dropdown list
   • HiglightedText – The highlighted text to display in the AutoCompleteTextBox by default
2. TestVM Class Diagram

   

3. The sample view model TestVM which actually holds the values. Create the IEnumerable property in view mode of type TestNameValue and of type object.
4. Text property in View model binds to SelectedText property in AutoCompleteTextBox.
5. Property in View model binds to EnumSource property in AutoCompleteTextBox.
6. Property in View model binds to SelectedItem property in AutoCompleteTextBox.

Use in Code

How to Consume the Binary?

Add the AutoCompleteTextBox.dll in the test project and write the sample view model as below.

Code Snippet TestNameValue

    public class TestNameValue
    {
        public TestNameValue()
        {
        }
        public TestNameValue(string name, object value)
        {
            this.Name = name;
            this.Value = value;
        }
        public string Name
        {
            get;
            set;
        }
        public object Value
        {
            get;
            set;
        }
        public override string ToString()
        {
            return Name;
        }
    }

    Code snipped Properties in TestVM

        private List<TestNameValue> _values;
        public List<TestNameValue> Values
        {
            get
            {
                return _values;
            }
            set
            {
                _values = value;
                OnPropertyChanged("Values");
            }
        }

        private List<object> _valuesstr;
        public List<object> Valuesstr
        {
            get
            {
                return _valuesstr;
            }
            set
            {
                _valuesstr = value;
                OnPropertyChanged("Valuesstr");
            }
        }

        private string _seltext;
        public string Text
        {
            get
            {
                return _seltext;
            }
            set
            {
                _seltext = value;
                OnPropertyChanged("Text");
            }
        }

        private object _selItem;
        public object SelectedItm
        {
            get
            {
                return _selItem;
            }
            set
            {
                _selItem = value;
                OnPropertyChanged("SelectedItm");
            }
        }

How to Use in XAML?

Add the reference xmlns:ac="clr-namespace:WPfControls;assembly=AutoCompleteTextBox" in XAML.

<ac:AutoCompleteTextBox Width="250" Margin="5" 
                                     EnumSource="{Binding Valuesstr}"
                                     SelectedItem="{Binding SelectedItm,Mode= TwoWay}"
                                     SelectedText="{Binding Text,Mode= TwoWay}"
                                     DisplayText="Name"
                                     HiglightedText="Search"/>
<ac:AutoCompleteTextBox Width="250" Margin="5"  Grid.Row="1"
                                     EnumSource="{Binding Values}"
                                     SelectedItem="{Binding SelectedItm,Mode= TwoWay}"
                                     SelectedText="{Binding Text,Mode= TwoWay}"
                                     DisplayText="Name"
                                     HiglightedText="Search"/>

History

• 4^th April, 2016: Initial release