基于WPF实现简单的下拉筛选控件

WPF 简单实现下拉筛选控件

框架使用.NET40；

Visual Studio 2022;

使用 ICollectionView[2] 实现筛选功能，还支持其他如下：

• 使集合具有当前记录管理
• 自定义排序
• 筛选和分组功能

实现代码

1）CheckedSearch.cs 代码如下：

• SearchText 用来记录输入的筛选内容
• Text 用来记录展示的所选内容^拼接
• ItemsSource 数据源
• ContainsFilter 筛选数据，如果从数据源中找到则返回True

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using WpfCustomControlLibrary1.Datas;

namespace WpfCustomControlLibrary1
{
    public class CheckedSearch : Control
    {
        private ICollectionView _filteredCollection;
        public ICollectionView FilteredCollection { get { return _filteredCollection; } }

        private string _searchText = string.Empty;
        public string SearchText
        {
            get { return _searchText; }
            set
            {
                if (_searchText != value)
                {
                    _searchText = value;
                    _filteredCollection.Refresh();
                }
            }
        }

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(CheckedSearch), new PropertyMetadata(string.Empty));


        public ObservableCollection ItemsSource
        {
            get { return (ObservableCollection)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register("ItemsSource", typeof(ObservableCollection), typeof(CheckedSearch), new PropertyMetadata(null, OnItemsSourceChanged));

        private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var choseSearch = (CheckedSearch)d;
            if (choseSearch == null) return;
            if (choseSearch._filteredCollection == null && choseSearch.ItemsSource.Count > 0)
            {
                foreach (var item in choseSearch.ItemsSource)
                {
                    item.PropertyChanged -= choseSearch.Item_PropertyChanged;
                    item.PropertyChanged += choseSearch.Item_PropertyChanged;
                }
                choseSearch._filteredCollection = CollectionViewSource.GetDefaultView(choseSearch.ItemsSource);
                choseSearch._filteredCollection.Filter = choseSearch.ContainsFilter;
            }
        }
        string GetItems()
        {
            var list = ItemsSource.Where(x=>x.IsChecked).Select(x=>x.Name).ToList();
            var visibleItems = string.Join("^",list);
            return visibleItems;
        }
        static CheckedSearch()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CheckedSearch), new FrameworkPropertyMetadata(typeof(CheckedSearch)));
        }

        private void Item_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "IsChecked")
                Text = GetItems();
            
        }

        private bool ContainsFilter(object item)
        {
            var model = item as CheckedSearchItem;
            if (model == null)
                return false;
            if (string.IsNullOrEmpty(SearchText))
                return true;
            if (model.Name.ToUpperInvariant().Contains(SearchText.ToUpperInvariant()))
                return true;
            return false;
        }
    }
}

2）CheckedSearchItem.cs 代码如下：

• IsChecked 记录是否选中
• Name 展示的名称

using System.ComponentModel;

namespace WpfCustomControlLibrary1.Datas
{
    public class CheckedSearchItem
    {
        public string Name { get; set; }

        private bool _isChecked;
        public bool IsChecked
        {
            get { return _isChecked; }
            set
            {
                _isChecked = value;
                OnPropertyChanged("IsChecked");
            }
        }
        
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

    }
}

3）CheckedSearch.xaml 代码如下：

4）CheckedSearchExample.xaml 示例代码如下：

5）CheckedSearchExample.xaml 数据源示例代码如下：

using System.Collections.ObjectModel;
using System.Windows;
using WpfCustomControlLibrary1.Datas;

namespace WpfApp1
{
    public partial class MainWindow
    {
        public ObservableCollection ItemsSource
        {
            get { return (ObservableCollection)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register("ItemsSource", typeof(ObservableCollection), typeof(MainWindow), new PropertyMetadata(null));


        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {

            ItemsSource = new ObservableCollection();
            var items = new ObservableCollection();
            items.Add(new CheckedSearchItem { Name = "Winform" });
            items.Add(new CheckedSearchItem { Name = "WPF" });
            items.Add(new CheckedSearchItem { Name = "WinUI 3" });
            items.Add(new CheckedSearchItem { Name = "MAUI" });
            items.Add(new CheckedSearchItem { Name = "Avalonia UI" });
            ItemsSource = items;
        }
    }
}

到此这篇关于基于WPF实现简单的下拉筛选控件的文章就介绍到这了,更多相关WPF下拉筛选控件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！