WPF中的Visual Tree和Logical Tree与路由事件

1.Visual Tree和Logical Tree
Logical Tree：逻辑树，WPF中用户界面有一个对象树构建而成，这棵树叫做逻辑树，元素的声明分层结构形成了所谓的逻辑树！！
Visual Tree：可视树（也叫视觉树），可视树是对逻辑树的扩展，可视树将逻辑树的节点打散，分放到核心棵树组件中，它表述了一些详细的可视化实现，而不是把每个元素当做一个”黑盒“。
我们以一个简单的程序来观察下逻辑树与可视树:

<Window x:Class="WpfApplication28.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>
</Window>

窗口中只有一个Button，如何查看这个程序的逻辑树和可视树呢？我们可以轻松用一个工具查看到：
WPF中查看视觉树和逻辑树的工具： WPF Inspector：下载地址：http://wpfinspector.codeplex.com/
安装完成后直接双击打开WPF Inspector：



软件提示目前没有任何正在运行的WPF应用程序。现在我们启动刚才的wpf程序：



发现了名为mainWindow的应用程序，点击Attach：





左侧为可视树,右侧为逻辑树
可以看出：LogicalTree的叶子节点是构成用户界面的控件，逻辑树的结构即为Xaml中控件元素的声明层次结构，最顶级的为Application，最内层为我们创建的Button按钮。

而可视树则包含了更多直接通过Xaml看不到内容，控件中的细微结构也算上了，以Button为例，通过观察可知在Button的内部包含ButtonChrome，用于为Button创建特定于主题的外观。ButtonChrome内包含用于存放单个子控件的ContentPressenter，而Contentpressenter存放了一个TextBlock用于显示Button上的文字信息。
此外，WPF Inspector还可以查看WPF应用程序内的属性、数据绑定、资源、样式、触发器等信息。如图：



利用工具对可视树的查看可以加深对控件内部构造的理解。

2.路由事件
路由事件：一种可以在元素树中向上或向下传播，并沿着传播路径被事件处理程序处理。路由事件主要根据可视树进行路由，路由事件支持三种路由策略：冒泡、隧道、直接，因其沿着可视树进行传播，所以其与Winform中的不同在于，事件的发送者与事件的响应者不一定有直接关系。

2.1.冒泡(Bubble)路由事件：沿着可视树向上传递的路由事件

如果在MainWindow的Grid中添加一个Border，Border中添加一个TextBlock，分别为这些控件注册MouseLeftButtonDown事件，点击TextBlock：

<Window x:Class="WpfApplication32.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="Grid1" Background="CornflowerBlue" MouseLeftButtonDown="OnMouseLeftButtonDown">
<Border x:Name="Border1" Height="100" Width="200" Background="BurlyWood" MouseLeftButtonDown="OnMouseLeftButtonDown">
<TextBlock x:Name="TexlBlock1" Text="TextBlock" Background="Chartreuse"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" MouseLeftButtonDown="OnMouseLeftButtonDown"/>
</Border>
</Grid>
</Window>

后台代码：

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var fra = sender as FrameworkElement;
MessageBox.Show(fra.Name);
}
}

首先被触发的是TextBlock的MouseLeftButtonDown事件，然后是Border，最后是Grid。
如果某个控件不支持所要路由的事件，可以用附加事件来完成，例如StackPanel不包含Click事件，则可以添加如下代码：

<StackPanel Button.Click="ButtonBase_OnClick">
<Button Content="Button1"></Button>
<Button Content="Button2"></Button>
<Button Content="Button3"></Button>
<Button Content="Button4"></Button>
<CheckBox Content="Button5"></CheckBox>
</StackPanel>

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var btn = e.Source as Button;
if (btn == null) return;
MessageBox.Show(btn.Content.ToString());
}

当点击StackPanel中任意Button，该事件均可向上传递到StackPanel中，这样就不必为StackPanel中所有的Button都注册一个点击事件了。

2.2.隧道(Tunnel)路由事件：沿着可视树向下传递的路由事件

隧道事件均以Preview开头

<StackPanel PreviewMouseLeftButtonDown="UIElement_OnPreviewMouseLeftButtonDown">
<Button Content="Button1"></Button>
<Button Content="Button2"></Button>
<Button Content="Button3"></Button>
<Button Content="Button4"></Button>
<CheckBox Content="Button5"></CheckBox>
</StackPanel>

在任意Button处按下鼠标左键：
sender:StackPanel
e.Source:Button
e.OriginalSource:TextBlock

注：

一般情况下，WPF提供的输入事件都是以隧道/冒泡对实现的,隧道事件总是在冒泡事件之前被触发；

如果想中断路由事件，只需在中断处添加e.Handled = true;

如果隧道事件被标记为已处理，则冒泡事件将不会再发生；（两种路由事件的RoutedEventArges是同一个）。

2.3.直接(Direct)路由事件：只有事件源才有机会响应的路由事件

事件仅在源元素上触发的路由事件，类似于普通事件的处理方式。不同之处在于因其仍然是一个路由事件，对WPF提供了更好的支持，事件仍然会参与一些路由事件的特定机制，如事件触发器、类处理机制等。