基于WPF實現(xiàn)簡單的下拉篩選控件

更新時間：2023年04月07日 14:01:43 作者：WPF開發(fā)者

這篇文章主要為大家詳細介紹了如何基于WPF實現(xiàn)簡單的下拉篩選控件，文中的示例代碼講解詳細，對我們學習或工作有一定幫助，感興趣的小伙伴可以了解一下

WPF 簡單實現(xiàn)下拉篩選控件

框架使用.NET40；

Visual Studio 2022;

使用 ICollectionView[2] 實現(xiàn)篩選功能，還支持其他如下：

使集合具有當前記錄管理
自定義排序
篩選和分組功能

實現(xiàn)代碼

1）CheckedSearch.cs 代碼如下：

SearchText 用來記錄輸入的篩選內(nèi)容
Text 用來記錄展示的所選內(nèi)容^拼接
ItemsSource 數(shù)據(jù)源
ContainsFilter 篩選數(shù)據(jù)，如果從數(shù)據(jù)源中找到則返回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<CheckedSearchItem>?ItemsSource
????????{
????????????get?{?return?(ObservableCollection<CheckedSearchItem>)GetValue(ItemsSourceProperty);?}
????????????set?{?SetValue(ItemsSourceProperty,?value);?}
????????}

????????public?static?readonly?DependencyProperty?ItemsSourceProperty?=
????????????DependencyProperty.Register("ItemsSource",?typeof(ObservableCollection<CheckedSearchItem>),?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 代碼如下：

<Style?TargetType="{x:Type?local:CheckedSearch}">
????????<Setter?Property="Height"?Value="40"/>
????????<Setter?Property="Width"?Value="200"/>
????????<Setter?Property="BorderBrush"?Value="DodgerBlue"/>
????????<Setter?Property="Background"?Value="White"/>
????????<Setter?Property="BorderThickness"?Value="1"/>
????????<Setter?Property="Template">
????????????<Setter.Value>
????????????????<ControlTemplate?TargetType="{x:Type?local:CheckedSearch}">
????????????????????<Border?Background="{TemplateBinding?Background}"
????????????????????????????BorderBrush="{TemplateBinding?BorderBrush}"
????????????????????????????BorderThickness="{TemplateBinding?BorderThickness}"
????????????????????????????x:Name="PART_Border">
????????????????????????<Grid>
????????????????????????????<Grid.ColumnDefinitions>
????????????????????????????????<ColumnDefinition/>
????????????????????????????????<ColumnDefinition?Width="Auto"/>
????????????????????????????</Grid.ColumnDefinitions>
????????????????????????????<TextBlock?Text="{Binding?Text,RelativeSource={RelativeSource?TemplatedParent},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
???????????????????????????????????????Foreground="Black"
???????????????????????????????????????VerticalAlignment="Center"
???????????????????????????????????????Margin="2,0"/>
????????????????????????????<ToggleButton?x:Name="PART_ToggleButton"?
???????????Focusable="False"
??????????????????????????????????????Width="30"
??????????????????????????????????????Style="{x:Null}"
??????????????????????????????????????Grid.Column="1"
???????????ClickMode="Release">
????????????????????????????????<Path?Stretch="Fill"?
??????????????????????????????????????Height="6"?Width="10"??
??????????????????????????????????????HorizontalAlignment="Center"?
??????????????????????????????????????VerticalAlignment="Center"?
??????????????????Data="M998?352c0?-8?-4?-17?-10?-23l-50?-50c-6?-6?-14?-10?-23?-10c-8?0?-17?4?-23?10l-393?393l-393?-393c-6?-6?-15?-10?-23?-10s-17?4?-23?10l-50?50c-6?6?-10?15?-10?23s4?17?10?23l466?466c6?6?15?10?23?10s17?-4?23?-10l466?-466c6?-6?10?-15?10?-23z"?
??????????????????????????????????????Fill="Black">
????????????????????????????????</Path>
????????????????????????????</ToggleButton>

????????????????????????????<Popup?IsOpen="{Binding?ElementName=PART_ToggleButton,Path=IsChecked}"
???????????????????????????????????x:Name="PART_Popup"
???????????????????????????????????VerticalOffset="2"
???????????????????????????????????AllowsTransparency="True"
????????PlacementTarget="{Binding?ElementName=PART_Border}"
????????Placement="Bottom"?StaysOpen="False">
????????????????????????????????<Border?Width="{TemplateBinding?Width}"
????????????????????????????????????????Padding="2,4"
????????????????????????????????????????Background="{TemplateBinding?Background}"
????????????????????????????BorderBrush="{TemplateBinding?BorderBrush}"
????????????????????????????BorderThickness="{TemplateBinding?BorderThickness}">
????????????????????????????????????<StackPanel>
????????????????????????????????????????<TextBox?Text="{Binding?SearchText,RelativeSource={RelativeSource?TemplatedParent},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
?????????????????????????????????????????????????Height="40"?VerticalContentAlignment="Center"
?????????????????????????????????????????????????Margin="0,0,0,2"/>
????????????????????????????????????????<ListBox?ItemsSource="{TemplateBinding?ItemsSource}">
????????????????????????????????????????????<ListBox.ItemTemplate>
????????????????????????????????????????????????<DataTemplate>
????????????????????????????????????????????????????<CheckBox?Content="{Binding?Name}"?
??????????????????????????????????????????????????????????????IsChecked="{Binding?IsChecked}"/>
????????????????????????????????????????????????</DataTemplate>
????????????????????????????????????????????</ListBox.ItemTemplate>
????????????????????????????????????????</ListBox>
????????????????????????????????????</StackPanel>
????????????????????????????????</Border>
????????????????????????????????
????????????????????????????</Popup>
????????????????????????</Grid>
????????????????????</Border>
????????????????</ControlTemplate>
????????????</Setter.Value>
????????</Setter>
????</Style>

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

<wd:Window?x:Class="WpfApp1.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:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
????????xmlns:custom="clr-namespace:WpfCustomControlLibrary1;assembly=WpfCustomControlLibrary1"
????????xmlns:local="clr-namespace:WpfApp1"
????????mc:Ignorable="d"?
????????Title="WPFDevelopers?-?搜索多選控件"?Height="450"?Width="800">
???<Window.Resources>
????????<ResourceDictionary>
????????????<ResourceDictionary.MergedDictionaries>
????????????????<ResourceDictionary?Source="pack://application:,,,/WpfApp1;component/CheckedSearch.xaml"/>
????????????</ResourceDictionary.MergedDictionaries>
????????</ResourceDictionary>
????</Window.Resources>
??<!--公眾號：WPF開發(fā)者-->
????<Grid>
????????<custom:CheckedSearch?
????????????ItemsSource="{Binding?ItemsSource,RelativeSource={RelativeSource?AncestorType=Window}}"
????????????VerticalAlignment="Top"?Margin="0,10"/>
????</Grid>
</wd:Window>

5）CheckedSearchExample.xaml 數(shù)據(jù)源示例代碼如下：

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

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

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


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

????????private?void?MainWindow_Loaded(object?sender,?RoutedEventArgs?e)
????????{

????????????ItemsSource?=?new?ObservableCollection<CheckedSearchItem>();
????????????var?items?=?new?ObservableCollection<CheckedSearchItem>();
????????????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實現(xiàn)簡單的下拉篩選控件的文章就介紹到這了,更多相關WPF下拉篩選控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

C#實現(xiàn)JWT無狀態(tài)驗證的實戰(zhàn)應用解析
這篇文章主要介紹了C#實現(xiàn)JWT無狀態(tài)驗證的實戰(zhàn)應用解析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
C#實現(xiàn)將選中復選框的信息返回給用戶的方法
這篇文章主要介紹了C#實現(xiàn)將選中復選框的信息返回給用戶的方法,涉及C#針對復選框操作的相關技巧,需要的朋友可以參考下
2015-06-06
ASP.Net動態(tài)讀取Excel文件最簡方法
本篇文章給大家分享了ASP.Net動態(tài)讀取Excel文件最簡方法，對此有需要的讀者們參考學習下。
2018-05-05
C#將異步改成同步方法示例
這篇文章主要為大家介紹了C#將異步改成同步方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2024-01-01
C#中WPF ListView綁定數(shù)據(jù)的實例詳解
這篇文章主要介紹了C#中WPF ListView綁定數(shù)據(jù)的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
2017-10-10
C#中利用斷點操作調(diào)試程序的步驟詳解
所謂斷點調(diào)試就是檢測執(zhí)行路徑和數(shù)據(jù)是否正確，中斷游戲運行在線調(diào)試，下面這篇文章主要給大家介紹了關于C#中利用斷點操作調(diào)試程序的相關資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2017-12-12
詳解C#應用程序如何實現(xiàn)多屏顯示
這篇文章主要為大家詳細介紹了C#如何實現(xiàn)把主屏運行程序中多個窗體移動到各個擴展屏幕位置顯示,感興趣的小伙伴可以跟隨小編一起學習一下
2024-05-05
C#無限欄目分級程序代碼分享好東西
C#無限欄目分級程序代碼分享好東西...
2006-12-12
Unity實現(xiàn)本地文本多語言化
這篇文章主要為大家詳細介紹了Unity實現(xiàn)本地文本多語言化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
C#識別出圖片里的數(shù)字和字母
本文給大家分享的是C#識別出圖片里的數(shù)字和字母的代碼，主要是識別以前公司的軟件注冊碼截圖里的數(shù)字和字母，功能很簡單，也存在很大的局限性，這里僅僅是分享，小伙伴們參考下。
2015-03-03