【WPF】自动完成/智能提示的文本框（AutoCompleteBox）

原文: 【WPF】自动完成/智能提示的文本框（AutoCompleteBox）

使用了插件WPFToolKit。（直接在Nuget中搜即可）

使用方法参考这篇文章：

http://www.broculos.net/2014/04/wpf-autocompletebox-autocomplete-text.html

但是光参考上面的文章做还是有些小问题的，下面是我用WAF框架（MVVM）的一个小例子：

ShellWindow.xaml

<Window x:Class="WafApplication1.Presentation.Views.ShellWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:vm="clr-namespace:WafApplication1.Applications.ViewModels"
        xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
        mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="525" Height="350"
        d:DataContext="{d:DesignInstance vm:ShellViewModel}">

    <DockPanel>
        <Grid>
            <toolkit:AutoCompleteBox
                Width="100" Height="30"
                ItemsSource="{Binding BuildList}"
                ValueMemberBinding="{Binding Name}"
                FilterMode="Contains"
                PreviewKeyDown="autoCompleteBox_PreviewKeyDown"><!-- 在AutoCompleteBox中注册PreviewKeyDown，键盘回车键选中列表Item -->
                <toolkit:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <Label
                            Content="{Binding Name}"
                            Width="100" 
                            MouseLeftButtonUp="Label_MouseLeftButtonUp"/><!-- 在Item中注册MouseLeftButtonUp，鼠标左键点击选中列表Item -->
                    </DataTemplate>
                </toolkit:AutoCompleteBox.ItemTemplate>
            </toolkit:AutoCompleteBox>
        </Grid>
    </DockPanel>
</Window>

---

ShellWindow.xaml.cs 界面的后台代码。传递前台注册的鼠标左键事件和键盘Enter回车键事件。

private void Label_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Label label = sender as Label;
    Build bulid = label.DataContext as Build;
    houseTypeViewModel.Value.SelectBuildCommand.Execute(bulid);
}

private void autoCompleteBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Enter)
    {
        AutoCompleteBox acBox = sender as AutoCompleteBox;
        Build build = acBox.SelectedItem as Build;
        houseTypeViewModel.Value.SelectBuildCommand.Execute(build);
    }
}

---

ShellViewModel.cs

using System.ComponentModel.Composition;
using System.Waf.Applications;
using System.Windows.Input;
using WafApplication1.Applications.Views;
using System.Collections.ObjectModel;

namespace WafApplication1.Applications.ViewModels
{
    [Export]
    internal class ShellViewModel : ViewModel<IShellView>
    {
        // 自动完成的文本框
        private ObservableCollection<Build> buildList;
        public ObservableCollection<Build> BuildList
        {
            get { return buildList; }
            set { SetProperty(ref buildList, value); }
        }

        // 自动完成文本框，用鼠标左键、键盘Enter键选中一个Item
        private ICommand selectBuildCommand; 
        public ICommand SelectBuildCommand
        {
            get { return selectBuildCommand; }
            set { SetProperty(ref selectBuildCommand, value); }
        }


        [ImportingConstructor]
        public ShellViewModel(IShellView view)
            : base(view)
        {
            BuildList = new ObservableCollection<Build>();
        }

        public void Show()
        {
            ViewCore.Show();
        }

        private void Close()
        {
            ViewCore.Close();
        }

        public class Build
        {
            public string Name { get; set; }
            public int Id { get; set; }
        }

    }
}

---

using System;
using System.ComponentModel.Composition;
using System.Waf.Applications;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using WafApplication1.Applications.ViewModels;
using WafApplication1.Presentation.Views;

namespace WafApplication1.Applications.Controllers
{
    [Export]
    internal class ApplicationController
    {
        private readonly ShellViewModel shellViewModel;
        private ShellWindow shellView;
        private readonly DelegateCommand selectBuildCommand;

        [ImportingConstructor]
        public ApplicationController(ShellViewModel shellViewModel)
        {
            this.shellViewModel = shellViewModel;
            shellView = shellViewModel.View as ShellWindow;
            this.selectBuildCommand = new DelegateCommand(p => SelectBuildCommand((Builds)p));
        }

        public void Initialize()
        {
            shellViewModel.SelectBuildCommand = selectBuildCommand;

            // 填充数据
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "一胞广场", Id = 0 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "二胞广场", Id = 1 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "三胞广场", Id = 2 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "四胞广场", Id = 3 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "五胞广场", Id = 4 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "六胞广场", Id = 5 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "七胞广场", Id = 6 });
            shellViewModel.BuildList.Add(new ShellViewModel.Build() { Name = "八胞广场", Id = 7 });

        }

        public void Run()
        {
            shellViewModel.Show();
        }

        public void Shutdown()
        {
        }

        private void SelectBuildCommand(Builds bulid)
        {
            // do what you want...
        }
    }
}

---

测试效果：

---

一些小问题：

• 需要指定FilterMode为Contains包含，否则只能从头开始匹配，如输入“桂”和“园”都不能匹配到“碧桂园”，只有输入“碧”和“碧桂”才行，这显然不符合用户需求。
• 如果不使用ItemTemplate模板，则显示的会是对象的完整toString（名称空间 + 类名 + 属性名 + 属性值）
• 使用ValueMemberBinding=”{Binding Name}”或是ValueMemberPaht=”Name”都行，貌似。
• 关于选项的事件触发，我试过用给DataTemplate中的Label注册鼠标点击事件可以成功，但键盘Enter键键盘事件却无法触发！解决办法是给AutoCompleteBox控件添加PreviewKeyDown事件，而不是给Item添加事件！参考这 https://stackoverflow.com/questions/4996731/wpf-autocompletebox-and-the-enter-key
  
  • 在AutoCompleteBox中注册PreviewKeyDown，键盘回车键选中列表Item。
  • 在Item中注册MouseLeftButtonUp，鼠标左键点击选中列表Item。