返回首页

{A}介绍
在这篇文章中,我将分享我的经验,在创建一个WPF中的AutoSuggest /自动完成控制如下MVVM模式。为什么我们需要一个自动提示控制?
的网页浏览器的发展动态强调的第一时间,用户不只是需要浏览的自动提示控制的功能,真正的好处,他们需要帮助,他们需要在建议列表的形式输入的一部分后,即时反馈一个单词或词组。另一方面,所提出的数据量从没有从应用程序繁琐的帮助列表选择简单的任务。最后,缩短发现和选择时间是很难使用自动提示控件不可替代的下拉式触摸屏接口。背景
我目前正在参与一个WPF桌面应用程序的开发,管理合同。
为了提高用户的体验和加快的形式进入,我决定使用通过键盘输入的文本的文本框的形式控制。虽然有些控件需要从列表中选择和最自然的方式来实现,而无需使用一个ComboBox选择是使用自动提示/自动完成控制。
我试图找到一个盒子用户控制的准备了,但不幸的是,几乎所有的控制,我发现他们实施基于微软的ComboBox,只是增加了简单的过滤项目的实施。没有发现我一直在寻找后,我开始谈论Orlin彼得罗夫,谁是我的好朋友,是一个非常优秀的软件开发建设的AutoSuggest /自动完成控制的最佳途径。这是如何,我们决定一起工作,他以领先的建筑角色和我做实施。这是如何诞生KOControls。
我提供的代码包含了一个包,截至记者发稿,包括通用WPF公用事业,实施自动提示/自动完成WPF控件和示例项目示范如何使用它的KOControls库。"守则"的执行情况和使用用户需求
我们开始创造一个高层次的要求清单,我们的控制应符合:控制必须MVVM的标准,应该是完全没有用户界面功能的ViewModel它应该能够挂钩到任何文本框允许的AutoSuggest /自动完成功能控制应该有一个选项,允许提交"自由文本??和"自由文本??确认后,将转换成一个有效的价值它应该有一个建议的窗口中注入命令的方式(这是非常有用的,当你想允许用户编辑或创建新的建议,从建议的控制范围内)它应该与复制/粘贴提出建议的控制应该是WPF的DataGrid或ListView应控制在ViewModel的属性控制的功能。 (注意,控制工作,只有当它的DataContext是一个特别的ViewModel类型)它应该有一个选项,插入滤波算法。这将允许第三方用户实现从WebService或从数据库中提取的建议值,克服拼写错误和自动校正等,应提供默认实现的滤波算法做聪明过滤算法。控制应该支持步行向上和向下箭头键建议,应不失TextBox的焦​​点它应该支持下面的选项代码>取消代码>选择行为??????空间可作为选择命令或exit命令。如果把它作为一个选择命令的作用,它应该只选择一个项目,如果它是在最后一个项目的建议名单,如果选择允许"自由文本?值是关闭的。选项​​卡可能作为??代码>选择????代码>取消??命令。失去焦点,也被认为在这个意义上的标签。输入,可作为??代码>选择??或??代码>取消??命令。可能充当箭头键??代码>选择??命令。它应该支持调用滤波算法之前毫秒的延迟。这是非常有用的,如果滤波算法是沉重和你不希望调用它每次用户类型的字符,但希望用户暂停和慢下来,你调用的算法之前。控制应该有一个选项,允许或不允许空值。此外,默认情况下,一个空值??代码>空??值,但用户可能会提供不同的空值。应该有一个突出用户停止输入后点完成文本的自动完成功能。
有以下行动AutoSuggestControl的屏幕截图:
{A2的}项目结构
{A3的}KO.Controls.Core??常见的非UI的公用事业和核心类和接口KO.Controls.GUI.Core?常见的UI公用事业ICommand的实现,转换器和实用的扩展方法一样吗?KO.Controls.GUI??theKO.Controls库的用户界面和ViewModels用户控制。目前,它具有自动提示用户控制的执行情况。KO.Controls.AutoSuggestTest??测试项目演示使用,并帮助我们测试AutoSuggestControls??功能(会有其他基于电流控制)。KO.Controls.Samples.Core??其中包含假人的测试数据,并与其他试验项目是共享的公共图书馆。KOControls.GUI.Tests- Anbsp;不错的项目。 类的结构和实现概述
在我开始之前,我想给信贷Orlin彼得罗夫的建设这个很好的解决方案是非常宝贵的指导和投入。
讨论其中存在的。NET控件后,我们应扩大/重用符合我们的宗旨,我们决定使用WPF的TextBox的选择(ListView中的DataGrid,等)和弹出的控制,因为他们给了最大的灵活性。在的AutoSuggestControl是一个用户控件,你在一个弹出控制。的AutoSuggestControl包含一个选择控制,钩到任何文本框,倾听用户的输入,操纵选择控制的项目,并带动AutoSuggestViewModel。
下面是鉴于了AutoSuggestControl的默认模板:

<ResourceDictionary

	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"

	xmlns:GUI="clr-namespace:KOControls.GUI"

	xmlns:Core="clr-namespace:KOControls.GUI.Core;assembly=KOControls.GUI.Core">



	<!--AutoSuggestControl_Default_SuggestionsTemplate-->

	<ControlTemplate x:Key="AutoSuggestControl_Default_SuggestionsTemplate">

		<DataGrid x:Name="PART_Selector" 

		ItemsSource="{Binding Suggestions}" SelectionMode="Single">

		</DataGrid>

	</ControlTemplate>



	<!--AutoSuggestControl_Default_CommandsTemplate-->

	<ControlTemplate x:Key="AutoSuggestControl_Default_CommandsTemplate">

		<ItemsControl IsTabStop="False" ItemsSource="{Binding}">



			<ItemsControl.ItemTemplate>

				<DataTemplate>

					<Button Height="25"

						Command="{Binding}"

						Content="{Binding Header}">

					</Button>

				</DataTemplate>

			</ItemsControl.ItemTemplate>

			<ItemsControl.ItemsPanel>

				<ItemsPanelTemplate>

					<StackPanel x:Name="buttonMenuPanel" 

					Orientation="Horizontal" 

					VerticalAlignment="Top">

					</StackPanel>

				</ItemsPanelTemplate>

			</ItemsControl.ItemsPanel>

		</ItemsControl>

	</ControlTemplate>



	<!--AutoSuggestControl_DefaultTemplate-->

	<ControlTemplate x:Key="AutoSuggestControl_DefaultTemplate" 

			TargetType="{x:Type GUI:AutoSuggestControl}">

		<Border

			Background="{TemplateBinding Background}"

			BorderBrush="{TemplateBinding BorderBrush}"

			BorderThickness="{TemplateBinding BorderThickness}"

			>

			<Grid>

				<Grid.RowDefinitions>

					<RowDefinition Height="*"></RowDefinition>

					<RowDefinition Height="Auto"></RowDefinition>

				</Grid.RowDefinitions>



				<Control x:Name="_suggestionsContentPresenter" 

					Grid.Row="0"

					Template="{TemplateBinding 

						SuggestionsTemplate}"

					DataContext="{Binding Suggestions}"/>



				<Control x:Name="_commandsContentPresenter" 

					Grid.Row="1"

					Template="{TemplateBinding CommandsTemplate}"

					DataContext="{Binding Commands}"/>

			</Grid>

		</Border>

	</ControlTemplate>

</ResourceDictionary>

视图由一个两行的网格。里面的第一行,有建议??演示模板,其中有一个默认实现一个DataGrid绑定在ViewModel的建议集合。第二行的命令意味着??模板,其中有一个默认的实现列出作为按钮的命令。自定义命令允许用户添加"新的吗?? "编辑??"的细节??任何由AutoSuggestControl给予的建议的功能。
AutoSuggestControl.cs的类包含的逻辑驱动器和保持的ViewModel,弹出,TextBox和选择(DataGrid或ListView中),它提出的建议,在同步。在AutoSuggestControl只与AutoSuggestViewModel工作,你不能给它任何其他的DataContext。
的AutoSuggestViewModel包含了所有的业务逻辑寻找建议,以及该用户已注入所有的选项和命令。建议的实际结果是通过插入一个类,它实现的的简单ISelector接口所示:
该过滤器是在TextBox中输入的文本,并作IEnumerable发现的建议。我们提供的默认实现的ISelector接口与城市的集合,并返回匹配过滤器的文本为基础的城市。
还有其他两个重要的AutoSuggestViewModel依赖项属性的建议和SuggestionPreview属性。建议属性表示当前选择的建议。 SuggestionPreview物业代表建议用户选择(有重点),但尚未选定。如何使用您的应用程序的控制
对于使用AutoSuggestControl的全面了解,我建议你检查{A4纸}最新的源代码。
我刚才所说的三种情况下,下面是很容易实现使用AutoSuggestControl:你有一个城市的名单,和你想的简单和快速的方式,选择一个城市的第一个城市的几个字母输入的用户提供。你有一个城市的名单,和你想用户提供简单,快捷的方式选择一个城市,通过输入前几个字母。如果城市不存在在你的清单,你想补充,它会自动弹出一个输入窗口,允许用户在列表中添加城市。你有一个城市的名单,和你想用户提供简单,快捷的方式选择一个城市,通过输入前几个字母。如果城市在您的列表中不存在,你想调用"添加新的城市吗??窗口,可以添加新的城市。如果你想修改任何现有的城市,你想快速调用"编辑市??窗口所在的城市可以编辑。
我将详细讨论如何实现第一案。模型
创建一个类调用的代码>城市已代码>名称和代码>国家如下的属性?????????
创建一个类的所谓国家,其中有一个name属性如下:{体C3}
创建的AutoSuggestConsumerViewModel其中有一个城市的收集和AutoSuggestViewModel以下属性:{的C4}
下面的XAML片段,其中包含一个UserControl创建为一个观点:
替代Item对象类型的市以上。
请下载并采取看看包提供的测试应用。
您可能会发现最新一:{A4} []

的问候,
科斯

回答

评论会员:游客 时间:2012/02/07
poporopo:嗨,你可以换另一个可以设置你的观点的DataContext的ViewModelAutoSuggestView模型。事情是这样的:公共类MyViewViewModel{ ......{公共AutoSuggestViewModelCityCityAutoSuggest获得;私人集;}公共AutoSuggestViewModelCountryCountryAutoSuggest{获取;私人集;}公共WhateverAutoSuggestAutoSuggestViewModelWhatever{获取;私人集;}}所以你将设置MyViewViewModel的是的DataContext视图和CityAutoSuggest的将被绑定到自动提示控制,另一个自动提示控制等CountryAutoSuggest如果您下载最新的源代码,从谷歌代码,如果你看它是如何做的例子,说明如何在DataGrid中使用自动提示你将看到我的意思这是否回答你的问题吗?科斯:|Wooters:看起来很有希望
Kostadin Mitev
评论会员:游客 时间:2012/02/07
看起来很有希望......这是最好的那里是不是{S2的}谢谢你的票。我希望,人们发现它很有用。我们也正在逐步改善。希望我们将能够做到在今年年底由另一版本