WPF内部结构树以及一个探查控件

WPF对初学者来说一个比较复杂的概念是它用两个树来组织其元素的。了解一些WPF的同学一般都知道它们分别是逻辑树（Logical Tree）和视觉树（Visual Tree）。而这两者的关系，以及一个界面中元素究竟如何与另一个元素在这两棵树上联系起来却相当复杂，很难一言两语涵盖其规则。而树和WPF中的元素类的特性有关系，也对应了XAML构成，所以非常重要，是比较深入理解WPF的关键。网上有不少文章就是专门讨论这个问题的。

比如以下是一些关于这个问题的比较经典的文章：

http://www.codeproject.com/Articles/21495/Understanding-the-Visual-Tree-and-Logical-Tree-in

http://blogs.msdn.com/b/mikehillberg/archive/2008/05/23/of-logical-and-visual-trees-in-wpf.aspx

其实，我学和用WPF至今，也没有把这些内容完全弄明白，甚至很大部分都不是很明白。但是WPF的一个好处是其基本使用可以不用涉及这些。但当要开发比较高级的界面程序，用到比较多的WPF控件及其嵌套和事件响应，尤其是要启用大量关系复杂的WPF Templates和Styles以发挥出WPF的真正能量的时候，对树的深入理解，以及对各控件属性的了解就显得必不可少。

为此在对基本原理有些了解以后，我制作了一个小小的WPF用户控件（User Control），当这个控件和一个WPF容器绑定的时候，其内含的树形视图（TreeView）将会显示出被绑定容器中的元素在这两个关系树上的位置和相互关系。

这个显示树的根节点就是这个容器。这里的问题是如何显示两棵树？答案很简单，由于根节点只有一个，只要将每个节点的两组孩子（也包括同时是视觉和逻辑的孩子）都放在其下，用颜色来标识即可。

当用户点击一个目标控件时，树形视图中的中对应的节点会被高亮选中。有趣的是，由于Visual Studio的IDE对WPF开发支持，如果这个控件和目标容器同时放到设计窗体下，只要在XAML中将该控件和目标容器绑定，无需代码（C# Code Behind），无需执行，只要通过Build，控件树形视图就能显示目标容器的内容，如图1所示，其中蓝色表示作为逻辑树孩子，黄色表示作为视觉树孩子，浅绿色表示同时作为两者。可见树和XAML有很高的相关性（XAML实际上是省略了一些树的节点的版本）。

图1 设计期控件对容器内元素的展示

这个控件采用MVVM设计模式实现，View端就是其内含的树形控件，Model端就是被绑定的目标元素（节点），ViewModel是连接两者的控制翻译体。几乎所有逻辑全在ViewModel中。

有趣的是，我在开始做之前就估计这个东西做起来比较简单，而事实上它比我想象的还容易。只要对两个树、WPF以及MVVM有所了解就不难实现。而不难实现的主要原因也还是这个实例恰好利用了MVVM模式的特点和强大之处。

以下简要说明一下代码（看完代码这个设计思路也就清楚了），

先看这个控件的XAML。很简单就是包含了一个树形控件，连属性什么的也不需要设置，就命了个名称，在Code Behind中有一处要引用。

<UserControl x:Class="WpfTreeViewer.WpfTreeViewerControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlforma