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

2017-06-20 19:27:05来源:CSDN作者:qq_18995513人点击

使用了插件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。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台