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 = 0,
                DisplayName = "五号线",
                HasChildren = true,
                Type = NodeType.Unit,
                ID = "0",
                Children = new ObservableCollection<TreeViewItemVM>() { 
                    new TreeViewItemVM() { DisplayName = "站台", Deepth = 1, HasChildren = true, ID = "1", Type = NodeType.Region,
                        Children = new ObservableCollection<TreeViewItemVM>(){
                            new TreeViewItemVM() { DisplayName = "Camera 01", Deepth = 2, HasChildren = false, ID = "3",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 02", Deepth = 2, HasChildren = false, ID = "4",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 03", Deepth = 2, HasChildren = false, ID = "5",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 04", Deepth = 2, HasChildren = false, ID = "6",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 05", Deepth = 2, HasChildren = false, ID = "7", Type = NodeType.Camera},
                        }},
                    new TreeViewItemVM() { DisplayName = "进出口", Deepth = 1, HasChildren = true, ID = "10", Type = NodeType.Region,
                        Children = new ObservableCollection<TreeViewItemVM>(){
                            new TreeViewItemVM() { DisplayName = "Camera 11", Deepth = 2, HasChildren = false, ID = "13",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 12", Deepth = 2, HasChildren = false, ID = "14",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 13", Deepth = 2, HasChildren = false, ID = "15",Type = NodeType.Camera },
                            new TreeViewItemVM() { DisplayName = "Camera 14", Deepth = 2, HasChildren = false, ID = "16", Type = NodeType.Camera},
                            new TreeViewItemVM() { DisplayName = "Camera 15", Deepth = 2, HasChildren = false, ID = "17", 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="450" Width="525">
    <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="200" HorizontalAlignment="Center" Height="40"
                 Margin="20" Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

        <TreeView
                  Grid.Row="1"
                  ItemsSource="{Binding View}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemContainerStyle ="{StaticResource style}"  ItemsSource="{Binding Children}">
                    <Grid Height="25" >
                        <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.运行结果：