1. 程式人生 > >【WPF】自動完成/智慧提示的文字框(AutoCompleteBox)

【WPF】自動完成/智慧提示的文字框(AutoCompleteBox)

使用了外掛WPFToolKit。(直接在Nuget中搜即可)

這裡寫圖片描述

使用方法參考這篇文章:

但是光參考上面的文章做還是有些小問題的,下面是我用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。