项目中有一个树形结构的资源，需要支持搜索功能，搜索出来的结果还是需要按照树形结构展示，下面是简单实现的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.运行结果：
