AutoCompleteTextBox in DotNetProjects.Wpf.Toolkit
DotNetProjects.Wpf.Toolkit 套件提供了AutoCompleteTextBox，它是一個可以在 WPF 程式裡面使用的控制項。除了像TextBox一樣，提供使用者輸入文字外，在使用者輸入文字的同時，能根據使用者的輸入及時提供符合自訂條件的建議字串清單，加快使用者的輸入速度。
要使用AutoCompleteTextBox，使用者必須先提供候選的清單以及過濾的方法。
實作過程
- 新開始名為TestAutoCompleteTextBox的WPF Application方案
- 在TestAutoCompleteTextBox專案中用Nuget Manager 加入DotNetProjects.Wpf.Toolkit
- 在TestAutoCompleteTextBox專案中加入類別檔案MainWindowViewModel.cs用來當作MainWindow.xaml的視模(ViewModel)
- 在MainWindowViewModel類別實作
- INotifyPropertyChanged介面
- 可當作繫結來源屬性的Name，類型為
string
- 可當作繫結來源屬性的Names屬性,類型為
List<string> ，用Names來當作候選清單
- 可當作繫結來源的Filter屬性，Filter是個過濾器，利用使用者的輸入內容，從候選清單Names中挑出子清單供使用者挑選。
- 在 MainWindow.xaml 中：
- Window的屬性增加
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Input.Toolkit"
- Window的Resources裡面增加資源
<local:MainWindowViewModel x:Key="viewmodel" />
- 設定Window裡的DataContex為資源裡的
viewmodel
- Window裡增加AutoCompleteTextBox的案例。將其屬性Text以雙向繫結的方式與視模端的來源屬性Name。將其屬性ItemFilter與視模端的來源屬性Filter繫結。將其屬性ItemSource與視模端的來源屬性Names繫結。將MinimumPrefixLength屬性設定為"1"，代表使用者只要打1個字元，AutoCompleteTextBox就開始提供合格清單。
程式碼
MainWindowViewModel.cs
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows.Controls;
namespace TestAutoCompleteTextBox
{
public class MainWindowViewModel:INotifyPropertyChanged
{
public MainWindowViewModel()
{
Names = new List<string>
{
"WPF","WCF","DotNet","Data Entity Framework"
};
}
public List<string> Names { get; private set; }
public event PropertyChangedEventHandler PropertyChanged;
private string _Name;
public string Name {
get
{
return _Name;
}
set
{
if (value != _Name)
{
_Name = value;
OnPropertyChanged("Name");
}
}
}
private void OnPropertyChanged(string PropertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
}
public AutoCompleteFilterPredicate<object> Filter
{
get
{
return (searchText, obj) => filter(searchText, obj);
}
}
public bool filter(string editString, object obj)
{
string s = obj as string;
return s.ToLower().Contains(editString.ToLower());
}
}
}
MainWindow.xaml
<Window x:Class="TestAutoCompleteTextBox.MainWindow"
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:local="clr-namespace:TestAutoCompleteTextBox"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Input.Toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:MainWindowViewModel x:Key="viewmodel" />
</Window.Resources>
<StackPanel DataContext="{StaticResource viewmodel}">
<TextBlock Text="{Binding Name}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Input:" />
<Controls:AutoCompleteBox Width="200"
Text="{Binding Name, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
ItemFilter="{Binding Filter}"
ItemsSource="{Binding Names}"
MinimumPrefixLength="1" />
</StackPanel>
</StackPanel>
</Window>
註：假如細節的清單由物件所構成，則AutoCompleteTextBox可利用ItemTemplate屬性與ValueMemberPath屬性來完成任務。其中，ItemTemplate用來表現清單裡的物件，ValueMemberPath用來將所選物件之ValueMemberPath對應屬性值複製到AutoCompleteTextBox的Text屬性。
Share this
