WPF AutoCompleteBox动态排序

时间:2013-03-23 04:50:08

标签: wpf autocomplete wpf-controls observablecollection wpftoolkit

我正在使用WPF AutoCompleteBox并且我工作得很好,但我想做的一件事就是在每个字母输入主TextBox后立即对建议列表进行排序。有谁知道如何做到这一点?我尝试使用带有DefaultView逻辑的ICollectionView属性并添加SortDescriptions但它似乎没有分阶段建议列表。为了确保我的集合视图排序正常工作,我在同一窗口上放置了一个普通的ListBox控件和一个AutoCompleteBox控件,并将两个控件绑定到具有相同集合视图的同一个observable集合,而普通的ListBox控件显示使用SortDescriptions正确排序的项目,但AutoCompleteBox列表没有排序的项目。它按照它们被添加到集合中的顺序存在。

思考?建议?有没有人这样做过?

2 个答案:

答案 0 :(得分:2)

我不知道@ user1089031是如何做到的,但这里有适合任何人感兴趣的样本(更新到@ adabyron的评论!):

<强> ViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Windows.Data;

namespace WpfApplication12
{
    public class Item
    {
        public string Name { get; set; }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ViewModel: INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged = delegate {};

        private readonly ObservableCollection<Item> source;
        private readonly ICollectionView items;
        private string searchText;

        public ViewModel()
        {
            source = new ObservableCollection<Item>
                         {
                             new Item {Name = "111111111 Test abb - (1)"},
                             new Item {Name = "22222 Test - (2)"},
                             new Item {Name = "333 Test - (3)"},
                             new Item {Name = "44444 Test abc - (4)"},
                             new Item {Name = "555555 Test cde - (5)"},
                             new Item {Name = "66 Test - bbcd (6)"},
                             new Item {Name = "7 Test - cd (7)"},
                             new Item {Name = "Test - ab (8)"},
                         };

            items = new ListCollectionView(source);
        }

        public ICollectionView Items
        {
            get { return items; }
        }

        public IEnumerable<Item> ItemsSorted
        {
            get 
            {
                return string.IsNullOrEmpty(SearchText)
                        ? source
                        : (IEnumerable<Item>)source
                            .OrderBy(item => item.Name.IndexOf(SearchText,
                                StringComparison.InvariantCultureIgnoreCase));
            }
        }

        public Item Selected { get; set; }

        public string SearchText
        {
            get { return searchText; }
            set
            {
                searchText = value;
                PropertyChanged(this,
                            new PropertyChangedEventArgs("SearchText"));
                PropertyChanged(this,
                            new PropertyChangedEventArgs("ItemsSorted"));
            }
        }
    }
}

<强> MainWindow.xaml

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
        xmlns:wpfApplication2="clr-namespace:WpfApplication12"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        Title="MainWindow" Height="200" Width="500"
        DataContext="{DynamicResource viewModel}">

    <Window.Resources>

        <wpfApplication2:ViewModel x:Key="viewModel" />

        <DataTemplate DataType="{x:Type wpfApplication2:Item}">
            <TextBlock Text="{Binding Name}" FontFamily="Courier New" />
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <controls:AutoCompleteBox
            ItemsSource="{Binding ItemsSorted}"
            FilterMode="ContainsOrdinal"
            SelectedItem="{Binding Selected, Mode=TwoWay}"
            MinimumPrefixLength="0" 
            VerticalAlignment="Top" Margin="5">

            <i:Interaction.Behaviors>
                <wpfApplication2:SearchTextBindBehavior
                            BoundSearchText="{Binding SearchText,
                                                      Mode=OneWayToSource}" />
            </i:Interaction.Behaviors>

        </controls:AutoCompleteBox>

        <ListBox Grid.Column="1"
                 ItemsSource="{Binding Items}" Margin="5" />

    </Grid>
</Window>

您可能会注意到我向AutoCompleteBox控件添加了一个自定义行为:

<i:Interaction.Behaviors>
    <wpfApplication2:SearchTextBindBehavior
            BoundSearchText="{Binding SearchText,
                                      Mode=OneWayToSource}" />
</i:Interaction.Behaviors>

这是因为AutoCompleteBox自己的SearchText属性是只读的。所以这是这种行为的代码:

SearchTextBindBehavior.cs 已更新

using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;

namespace WpfApplication12
{
    public class SearchTextBindBehavior : Behavior<AutoCompleteBox>
    {
        public static readonly DependencyProperty BoundSearchTextProperty =
                            DependencyProperty.Register("BoundSearchText",
                            typeof(string), typeof(SearchTextBindBehavior));

        public string BoundSearchText
        {
            get { return (string)GetValue(BoundSearchTextProperty); }
            set { SetValue(BoundSearchTextProperty, value); }
        }

        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.TextChanged += OnTextChanged;
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.TextChanged -= OnTextChanged;
        }

        private void OnTextChanged(object sender, RoutedEventArgs args)
        {
            if(AssociatedObject.Text.Length == 0)
            {
                BoundSearchText = string.Empty;
                return;
            }

            if(AssociatedObject.SearchText ==
                AssociatedObject.Text.Substring(0,
                                           AssociatedObject.Text.Length - 1))
            {
                BoundSearchText = AssociatedObject.Text;
            }
        }
    }
}

注意:要完成所有工作,您需要添加Expression Blend 4 SDK中对 System.Windows.Interactivity.dll 的引用。这就是Behavior<T>及其朋友生活的地方。

如果您已经安装了Expression Blend,那么您已经拥有了所有SDK,并且无需下载任何内容。以防万一 - 在我的机器上,组件位于此处:

C:\ Program Files \ Microsoft SDKs \ Expression \ Blend.NETFramework \ v4.0 \ Libraries \ System.Windows.Interactivity.dll

最后,如果你有充分的理由不添加对这个流行的官方库的引用,可以通过简单的旧附加属性以“旧方式”重新实现这种自定义行为。

希望有所帮助。

答案 1 :(得分:1)

这就是我最终的结果,略微改编了Sevenate的回答,所以如果你想投票,那就去做他的职位。

我使用了一个子类(由于其他原因我已经将AutoCompleteBox子类化了),这允许我创建一个包装依赖项属性来获取只读SearchText(=用户通过键盘输入的内容)到ViewModel - 而不是混合行为,这也是一种非常有效的方式。

问题的关键在于你应该只对SearchText的更改应用动态排序,而不是Text(= AutoCompleteBox中显示的内容,如果在下拉)。 Sevenate提升readonly ItemsSource(ItemsSorted)的PropertyChanged事件的方法是一种很好的,干净的方式来应用排序。

视图模型:

public class Item
{
    public string Name { get; set; }

    public override string ToString()
    {
        return Name;
    }
}

public class AutoCompleteBoxDynamicSortingVM : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private readonly ObservableCollection<Item> source;

    public AutoCompleteBoxDynamicSortingVM()
    {
        source = new ObservableCollection<Item>
                     {
                         new Item {Name = "111111111 Test abb - (1)"},
                         new Item {Name = "22222 Test - (2)"},
                         new Item {Name = "333 Test - (3)"},
                         new Item {Name = "44444 Test abc - (4)"},
                         new Item {Name = "555555 Test cde - (5)"},
                         new Item {Name = "66 Test - bbcd (6)"},
                         new Item {Name = "7 Test - cd (7)"},
                         new Item {Name = "Test - ab (8)"},
                     };
    }

    public IEnumerable<Item> ItemsSorted
    {
        get
        {
            return string.IsNullOrEmpty(Text) ? (IEnumerable<Item>)source :
                    source.OrderBy(item => item.Name.IndexOf(Text, StringComparison.OrdinalIgnoreCase));
        }
    }

    public Item Selected { get; set; }

    // Text that is shown in AutoCompleteBox
    private string text;
    public string Text
    {
        get { return text; }
        set { text = value; OnPropertyChanged("Text"); }
    }

    // Text that was entered by user (cannot be changed from viewmodel)
    private string searchText;
    public string SearchText
    {
        get { return searchText; }
        set
        {
            searchText = value;
            OnPropertyChanged("SearchText");
            OnPropertyChanged("ItemsSorted");
        }
    }

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

AutoCompleteBox的子类:

public class MyAutoCompleteBox : AutoCompleteBox
{
    /// <summary>
    /// Bindable property that encapsulates the readonly property SearchText.
    /// When the viewmodel tries to set SearchText by way of EnteredText, it will fail without an exception.
    /// </summary>
    public string EnteredText
    {
        get { return (string)GetValue(EnteredTextProperty); }
        set { SetValue(EnteredTextProperty, value); } 
    }
    public static readonly DependencyProperty EnteredTextProperty = DependencyProperty.Register("EnteredText", typeof(string), typeof(MyAutoCompleteBox), new PropertyMetadata(null));


    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
    {
        // synchronize SearchText and EnteredText (only one-way)
        if (e.Property == AutoCompleteBox.SearchTextProperty && this.EnteredText != this.SearchText)
            EnteredText = SearchText;

        base.OnPropertyChanged(e);
    }
}

的Xaml:

<UserControl x:Class="WpfApplication1.Controls.AutoCompleteBoxDynamicSorting"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:myctrls="clr-namespace:WpfApplication1.Controls"
        xmlns:models="clr-namespace:WpfApplication1.ViewModels"
        Height="350" Width="525"
        DataContext="{DynamicResource viewModel}">

    <UserControl.Resources>

        <models:AutoCompleteBoxDynamicSortingVM x:Key="viewModel" />

        <DataTemplate DataType="{x:Type models:Item}">
            <TextBlock Text="{Binding Path=Name}" />
        </DataTemplate>

    </UserControl.Resources>

    <Grid>
        <myctrls:MyAutoCompleteBox
            ItemsSource="{Binding ItemsSorted}"
            Text="{Binding Text, Mode=TwoWay}"
            EnteredText="{Binding SearchText, Mode=OneWayToSource}"
            FilterMode="ContainsOrdinal"
            VerticalAlignment="Top" Margin="5" />
    </Grid>
</UserControl>