Reference Links:

WPF-15: Use of AutoCompleteBox (Implement Dropdown List)
WPF: AutoCompleteBox, an autocomplete text box
If fail to load assembly occurs, rely on this answer

Preparation:

Download WpfToolKit.dll, System.Windows.Controls.Input.Toolkit.dll or install via NuGet search, download link is in the first blog.

Content:

Frontend

Implement auto-completion or smart selection function via wpftool framework.
Add in frontend:
xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
Implement AutoCompleteBox inside the window

1
2
3
4
5
6
7
8
9
10
11
<toolkit:AutoCompleteBox x:Name="searchTextBox" Grid.Row="1" ValueMemberPath="SerchString" Margin="10" FontSize="20" Height="50" IsTextCompletionEnabled="True" Foreground="Black">
                <toolkit:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="5,5" FontSize="26">
                            <Run Text="{Binding SerchString}" Foreground="Blue"/>
                            <Run Text="{Binding Name}" Foreground="Gray"/>
                        </TextBlock>
                    </DataTemplate>
                </toolkit:AutoCompleteBox.ItemTemplate>
                
            </toolkit:AutoCompleteBox>

Backend

Implement MVVM, implement INotifyPropertyChanged interface, and create events to bind content. Since it is implementation code, it is basically consistent with the content in the first blog, but the MessageBox in the blog caused a process error. I didn’t figure this out, but since it doesn’t affect the function implementation, I commented out the statement.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.searchTextBox.Populating += new PopulatingEventHandler(AutoCompleteBox_Populating);
            this.searchTextBox.SelectionChanged += new SelectionChangedEventHandler(SearchTextBox_selectionChanged);
            
        }
        void SearchTextBox_selectionChanged(object seder,SelectionChangedEventArgs e)
        {
            AutoCompleteModel model = this.searchTextBox.SelectedItem as AutoCompleteModel;
            //if (model != null)
            //{
            //    MessageBox.Show(model.Name);
            //}
        }
        private void AutoCompleteBox_Populating(object sender,PopulatingEventArgs e)
        {
            e.Cancel = true;
            List<AutoCompleteModel> data = new List<AutoCompleteModel>();
            for(int i = 0; i < 10; i++)
            {
                AutoCompleteModel model = new AutoCompleteModel();
                model.SerchString = "0"+ i.ToString();
                model.Name = "Test" + i;
                data.Add(model);
            }
            this.searchTextBox.ItemsSource = data;
            this.searchTextBox.FilterMode = AutoCompleteFilterMode.Contains;
            this.searchTextBox.PopulateComplete();
        }
        public class AutoCompleteModel : INotifyPropertyChanged
        {
            public void OnProperrtChanged(string proname)
            {
                if (this.PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs(proname));
            }
            public event PropertyChangedEventHandler PropertyChanged;

            private string searchString = string.Empty;
            private string name = string.Empty;

            public string SerchString
            {
                get { return searchString; }
                set
                {
                    searchString = value;
                    this.OnProperrtChanged("SearchString");
                }
            }

            public string Name
            {
                get { return name; }
                set
                {
                    name = value;
                    this.OnProperrtChanged("Name");
                }
            }
        }
    }