【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。
【WPF】自动完成/智能提示的文本框(AutoCompleteBox)的更多相关文章
- Android实现智能提示的文本输入框AutoCompleteTextView
今天我们要讲一个十分简单的内容,就是一个安卓控件的使用,用法很简单,但是很常用的一个.这里我用两种不同的写法来处理.当然,无论用哪一种写法,效果都是一样的. 我们先来看效果图. 要实现这种效果十分简单 ...
- WPF编程:textbox控件文本框数据显示最后一行
WPF编程:textbox控件文本框数据显示最后一行 TextBox控件在接收大量数据的时候,滚动条一般在最上方,如何使滚动条随着数据的接收而向下滚动呢?比如有一个TextBox'控件txbRecvD ...
- JS案例 - 可自动伸缩高度的textarea文本框
文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...
- WPF TextBox 获得焦点后,文本框中的文字全选中
textbox.GotFocus 事件处理 Textbox.SelectAll() 是不行的, 这样处理会发生的情况是: 1) textbox1 当前没有焦点, 内容为 someText. 2) 鼠标 ...
- Jquery实现文本框输入提示
一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...
- Chrome表单文本框自动填充黄色背景色样式
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...
- chrome表单自动填充导致input文本框背景变成偏黄色问题解决
chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧, 这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有 ...
- JS基础 浏览器弹出的三种提示框(提示信息框、确认框、输入文本框)
浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...
- JQ三种提示框:提示信息框、确认框、输入文本框
浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...
随机推荐
- 转:【HTTP】常见错误码说明
一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 ...
- JavaScript-event参数传递详解
onmouseover="over(event)" onmouseout="out(event)" onclick="change(event)&qu ...
- python学习笔记012——pdb调试
1 描述 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能, 主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变量的值等 调 ...
- 局域网不同用户同时登录同一个网站,会出现session乱窜的问题
出现这种问题的情景再现: 1.有一部分人访问网站会出现session乱窜的问题. 2.这部分人是在同一个局域网中. 3.不同菜单看到的信息是不同人的,或者同一个菜单翻页时有的时候看到的是自己的数据,有 ...
- mysql-5.7 saving and restore buffer pool state 详解
一.mysql 重启要面临的问题: 由于重启后之前innodb buffer pool中缓存的数据就都没有了,如果这个时候业务SQL来临,mysql就只能是从磁盘中 读取数据到内存:可能要经过数个小时 ...
- linux centos7 常用命令【systemctl替换service】
虽然linux的命令很多都是相同的,但是新版的centos 7 上面与以前的有些命令还是有所不同,不过还好,有提示.所以就在百度上面搜索了以下,作为记载,以后方便查看: centos7 上面启动服务以 ...
- Eclipse color theme jsp javascript显示问题
Q: 在eclipse 中,设置为sublime格式时, 在编辑器中,jsp中嵌套的javascript底色非常难看. A:在如下位置进行设置,Window -> Preferences-> ...
- 在 ASP.NET Web API 中,使用 命名空间(namespace) 来作为路由的参数
这个问题来源于我想在 Web API 中使用相同的控制器名称(Controller)在不同的命名空间下,但是 Web API 的默认 路由(Route) 机制是会忽略命名空间的不同的,如果这样做,会看 ...
- <二>读<<大话设计模式>>之策略模式
又和大家见面了.可以坚持写出第二篇文章真不错,好好加油. <<大话设计模式>>解说策略模式是以商场收银软件程序开头的,那么问题来了.哪家商场收银软件强,开玩笑了. 读过上篇文章 ...
- 笔记本上安装centos7
1.下载centos的dvd镜像就够了.地址: 2.制作u盘镜像. 1)下载安装UltraIOS,(百度云->软件文件夹有,for me). 2)打开镜像,选择“启动”-->“写入硬盘镜像 ...