首页 > 代码库 > WPF中的Visual Tree和Logical Tree与路由事件
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 onm ouseLeftButtonDown(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提供了更好的支持，事件仍然会参与一些路由事件的特定机制，如事件触发器、类处理机制等。