900字范文 > WPF 自定义列表筛选自定义TreeView模板自定义ListBox模板

WPF 自定义列表筛选自定义TreeView模板自定义ListBox模板

时间：2022-05-28 03:15:06

有很多项目，都有数据筛选的操作。下面提供一个案例，给大家做参考。

左侧是数据源，搜索框加TreeView控件，右侧是ListBox控件。在左侧数据列点击添加数据，然后点击确定，得到所筛选的数据。

下面直接看代码吧，比较好理解~

筛选控件做成用户控件，当然也可以直接放在主界面，如果不复用的话。数据源都是固定的，实际用的话，新建个ViewModel将数据源绑定就行了。

1、筛选控件界面：

View Code

2、后台：

public partial class SelectControl : UserControl{private List<TreeViewModel> ItemSoure { get; set; }public SelectControl(){InitializeComponent();ItemSoure = new List<TreeViewModel>() { new TreeViewModel(){Name = "前端设计",TreeViewItems = new List<TreeViewModel>(){new TreeViewModel(){Name = "Html/Css/Js"},new TreeViewModel(){Name = "WPF"},new TreeViewModel(){Name = "Winform"},new TreeViewModel(){Name = "Webform"},new TreeViewModel(){Name = "U3D"},}},new TreeViewModel(){Name = "后台语言",TreeViewItems = new List<TreeViewModel>(){new TreeViewModel(){Name = "C#"},new TreeViewModel(){Name = ""},new TreeViewModel(){Name = "Java"},new TreeViewModel(){Name = "PHP"},new TreeViewModel(){Name = "C"},new TreeViewModel(){Name = "Python"},new TreeViewModel(){Name = "C++"},new TreeViewModel(){Name = "Ruby"},}},new TreeViewModel(){Name = "数据库",TreeViewItems = new List<TreeViewModel>(){new TreeViewModel(){Name = "SqlServer"},new TreeViewModel(){Name = "MySql"},new TreeViewModel(){Name = "Oracle"},new TreeViewModel(){Name = "SqlLite"},new TreeViewModel(){Name = "MongoDB"},new TreeViewModel(){Name = "PLSql"},}}};MyTreeView.ItemsSource = ItemSoure;RightListBox.ItemsSource = null;RightListBox.ItemsSource = new List<TreeViewModel>();}/// <summary>/// 选择/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void BtnAdd_OnClick(object sender, RoutedEventArgs e){Button button = sender as Button;var viewModel = button.DataContext as TreeViewModel;if (!viewModel.IsChecked){viewModel.IsChecked = true;var selectList = RightListBox.ItemsSource as List<TreeViewModel>;selectList.Add(viewModel);RightListBox.ItemsSource = null;RightListBox.ItemsSource = selectList;}}/// <summary>/// 移除/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void BtnRemove_OnClick(object sender, RoutedEventArgs e){Button button = sender as Button;var viewModel = button.DataContext as TreeViewModel;viewModel.IsChecked = false;var selectList = RightListBox.ItemsSource as List<TreeViewModel>;selectList.Remove(viewModel);RightListBox.ItemsSource = null;RightListBox.ItemsSource = selectList;}/// <summary>/// 搜索/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void BtnSearch_OnOnSearch(object sender, SearchEventArgs e){string serachText=e.SearchText;var items=new List<TreeViewModel>();if (string.IsNullOrWhiteSpace(serachText)){MyTreeView.ItemsSource = ItemSoure;return;}foreach (var item in ItemSoure){var childrenItems=item.TreeViewItems.Where(o => o.Name.Contains(serachText)).ToList();if (childrenItems.Count>0){var parentItem=new TreeViewModel(){Name = item.Name};parentItem.TreeViewItems = childrenItems;items.Add(parentItem);}}MyTreeView.ItemsSource = items;}}public class TreeViewModel : INotifyPropertyChanged{public string Name { get; set; }private bool _isChecked = false;public bool IsChecked{get { return _isChecked; }set{_isChecked = value;if (this.PropertyChanged != null){this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("IsChecked"));}}}public List<TreeViewModel> TreeViewItems { get; set; }public event PropertyChangedEventHandler PropertyChanged;[NotifyPropertyChangedInvocator]protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null){PropertyChangedEventHandler handler = PropertyChanged;if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));}}

View Code

GitHub下载此案例Demo:/Kybs0/DataSelectControlDemo

TreeViewItem添加MouseOver/Hover效果：

当有HierarchicalDataTemplate时，下级Item的MouseOver状态Trigger设置，可以通过里面的元素直接设置。

</Trigger>

因为TreeViewItem的MouseOver关联的是整个TreeViewItem和其下级的状态。。

作者：唐宋元明清2188 出处：/kybs0/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。