Seaching TreeVIew WPF

项目中有一个树形结构的资源，需要支持搜索功能，搜索出来的结果还是需要按照树形结构展示，下面是简单实现的demo。

1.首先创建TreeViewItem的ViewModel，一般情况下，树形结构都包含DisplayName，Deepth，Parent，Children，Id， IndexCode，Visibility等属性，具体代码如下所示：

 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows;

 namespace TreeViewDemo
 {
     public class TreeViewItemVM : NotifyPropertyChangedBase
     {
         public TreeViewItemVM ()
         {
             Visible = Visibility.Visible;
         }

         private TreeViewItemVM parent;
         public TreeViewItemVM Parent
         {
             get
             {
                 return this.parent;
             }
             set
             {
                 if (this.parent != value)
                 {
                     this.parent = value;
                     this.OnPropertyChanged(() => this.Parent);
                 }
             }
         }

         private ObservableCollection<TreeViewItemVM> children;
         public ObservableCollection<TreeViewItemVM> Children
         {
             get
             {
                 return this.children;
             }
             set
             {
                 if (this.children != value)
                 {
                     this.children = value;
                     this.OnPropertyChanged(() => this.Children);
                 }
             }
         }

         private string id;
         public string ID
         {
             get
             {
                 return this.id;
             }
             set
             {
                 if (this.id != value)
                 {
                     this.id = value;
                     this.OnPropertyChanged(() => this.ID);
                 }
             }
         }

         private string indexCode;
         public string IndexCode
         {
             get { return indexCode; }
             set
             {
                 if (indexCode != value)
                 {
                     indexCode = value;
                     this.OnPropertyChanged(() => IndexCode);
                 }
             }
         }

         private string displayName;
         public string DisplayName
         {
             get
             {
                 return this.displayName;
             }
             set
             {
                 if (this.displayName != value)
                 {
                     this.displayName = value;
                     this.OnPropertyChanged(() => this.DisplayName);
                 }
             }
         }

         private int deepth;
         public int Deepth
         {
             get
             {
                 return this.deepth;
             }
             set
             {
                 if (this.deepth != value)
                 {
                     this.deepth = value;
                     this.OnPropertyChanged(() => this.Deepth);
                 }
             }
         }

         private bool hasChildren;
         public bool HasChildren
         {
             get
             {
                 return this.hasChildren;
             }
             set
             {
                 if (this.hasChildren != value)
                 {
                     this.hasChildren = value;
                     this.OnPropertyChanged(() => this.HasChildren);
                 }
             }
         }

         private NodeType type;
         public NodeType Type
         {
             get { return type; }
             set
             {
                 if (type != value)
                 {
                     type = value;
                     OnPropertyChanged(() => this.Type);
                 }
             }
         }

         private Visibility visible;
         public Visibility Visible
         {
             get { return visible; }
             set
             {
                 if (visible != value)
                 {
                     visible = value;
                     OnPropertyChanged(() => this.Visible);
                 }
             }
         }

         public bool NameContains(string filter)
         {
             if (string.IsNullOrWhiteSpace(filter))
             {
                 return true;
             }

             return DisplayName.ToLowerInvariant().Contains(filter.ToLowerInvariant());
         }
     }
 }

2.创建TreeViewViewModel，其中定义了用于过滤的属性Filter，以及过滤函数，并在构造函数中初始化一些测试数据，具体代码如下：

 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows.Data;

 namespace TreeViewDemo
 {
     public class TreeViewViewModel : NotifyPropertyChangedBase
     {
         public static TreeViewViewModel Instance = new TreeViewViewModel();

         private TreeViewViewModel()
         {
             Filter = string.Empty;

             Root = new TreeViewItemVM()
             {
                 Deepth = ,
                 DisplayName = "五号线",
                 HasChildren = true,
                 Type = NodeType.Unit,
                 ID = "",
                 Children = new ObservableCollection<TreeViewItemVM>() {
                     new TreeViewItemVM() { DisplayName = "站台", Deepth = , HasChildren = true, ID = "", Type = NodeType.Region,
                         Children = new ObservableCollection<TreeViewItemVM>(){
                             new TreeViewItemVM() { DisplayName = "Camera 01", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 02", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 03", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 04", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 05", Deepth = , HasChildren = false, ID = "", Type = NodeType.Camera},
                         }},
                     new TreeViewItemVM() { DisplayName = "进出口", Deepth = , HasChildren = true, ID = "", Type = NodeType.Region,
                         Children = new ObservableCollection<TreeViewItemVM>(){
                             new TreeViewItemVM() { DisplayName = "Camera 11", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 12", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 13", Deepth = , HasChildren = false, ID = "",Type = NodeType.Camera },
                             new TreeViewItemVM() { DisplayName = "Camera 14", Deepth = , HasChildren = false, ID = "", Type = NodeType.Camera},
                             new TreeViewItemVM() { DisplayName = "Camera 15", Deepth = , HasChildren = false, ID = "", Type = NodeType.Camera},
                         }},
                 }
             };

             InitTreeView();
         }

         private ObservableCollection<TreeViewItemVM> selectedCameras = new ObservableCollection<TreeViewItemVM>();

         private TreeViewItemVM root;
         public TreeViewItemVM Root
         {
             get
             {
                 return this.root;
             }
             set
             {
                 if (this.root != value)
                 {
                     this.root = value;
                     this.OnPropertyChanged(() => this.Root);
                 }
             }
         }

         /// <summary>
         /// 过滤字段
         /// </summary>
         private string filter;
         public string Filter
         {
             get
             {
                 return this.filter;
             }
             set
             {
                 if (this.filter != value)
                 {

                     this.filter = value;
                     this.OnPropertyChanged(() => this.Filter);

                     this.Refresh();
                 }
             }
         }

         /// <summary>
         /// View
         /// </summary>
         protected ICollectionView view;
         public ICollectionView View
         {
             get
             {
                 return this.view;
             }
             set
             {
                 if (this.view != value)
                 {
                     this.view = value;
                     this.OnPropertyChanged(() => this.View);
                 }
             }
         }

         /// <summary>
         /// 刷新View
         /// </summary>
         public void Refresh()
         {
             if (this.View != null)
             {
                 this.View.Refresh();
             }
         }

         private bool DoFilter(Object obj)
         {
             TreeViewItemVM item = obj as TreeViewItemVM;
             if (item == null)
             {
                 return true;
             }

             bool result = false;
             foreach (var node in item.Children)
             {
                 result = TreeItemDoFilter(node) || result;
             }

             return result || item.NameContains(this.Filter);
         }

         private bool TreeItemDoFilter(TreeViewItemVM vm)
         {
             if (vm == null)
             {
                 return true;
             }

             bool result = false;
             if (vm.Type == NodeType.Region || vm.Type == NodeType.Unit)
             {
                 foreach (var item in vm.Children)
                 {
                     result = TreeItemDoFilter(item) || result;
                 }
             }

             if (result || vm.NameContains(this.Filter))
             {
                 result = true;
                 vm.Visible = System.Windows.Visibility.Visible;
             }
             else
             {
                 vm.Visible = System.Windows.Visibility.Collapsed;
             }

             return result;
         }

         public void InitTreeView()
         {
             this.View = CollectionViewSource.GetDefaultView(this.Root.Children);
             this.View.Filter = this.DoFilter;
             this.Refresh();
         }
     }
 }

3.在界面添加一个TreeView，并添加一个简单的Style，将ViewModel中必要数据进行绑定：

 <Window x:Class="TreeViewDemo.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="" Width="">
     <Window.Resources>
         <Style x:Key="style" TargetType="{x:Type TreeViewItem}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type TreeViewItem}">
                         <Grid Visibility="{Binding Visible}" Background="{Binding Background}">
                             <ContentPresenter ContentSource="Header"/>
                         </Grid>

                         <ControlTemplate.Triggers>
                             <Trigger Property="IsSelected" Value="true">
                                 <Setter Property="Background" Value="Green"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </Window.Resources>
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>

         <TextBox x:Name="searchTxt" Width="" HorizontalAlignment="Center" Height=""
                  Margin="" Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

         <TreeView
                   Grid.Row=""
                   ItemsSource="{Binding View}">
             <TreeView.ItemTemplate>
                 <HierarchicalDataTemplate ItemContainerStyle ="{StaticResource style}"  ItemsSource="{Binding Children}">
                     <Grid Height="" >
                         <TextBlock
                             x:Name="txt"
                             VerticalAlignment="Center"
                             Text="{Binding DisplayName}"
                             TextTrimming="CharacterEllipsis"
                             ToolTip="{Binding DisplayName}" />
                     </Grid>
                 </HierarchicalDataTemplate>
             </TreeView.ItemTemplate>
         </TreeView>
     </Grid>
 </Window>

4.在给界面绑定具体的数据

 using System.Windows;

 namespace TreeViewDemo
 {
     /// <summary>
     /// MainWindow.xaml 的交互逻辑
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             this.Loaded += MainWindow_Loaded;
         }

         void MainWindow_Loaded(object sender, RoutedEventArgs e)
         {
             this.DataContext = TreeViewViewModel.Instance;
         }
     }
 }

5.运行结果：