WPF UI分析工具Snoop

WPF的UI分析工具，方便调试WPF样式等，快速了解XAML代码的结构，同时可以对相应的属性进行修改或调整。它是一个WPF运行时对Visual UI调试的一个工具，解压就可以使用.

在WPF中我们可以使用Style来设置控件的某些属性值，并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件，比如说我们想将窗口中的所有按钮都保持某一种风格，那么我们可以设置一个Style，而不必分别设置每个按钮的风格。

WPF UI分析工具Snoop怎么用？

下载安装后，运行Snoop.exe后出现一个类似工具条的界面：

下拉框中显示的运行的WPF应用程序，如果还么有打开需要调试的程序，可以打开后再点击【刷新】按钮获取应用程序列表，选中应用程序后，点击Snoop图标()可以打开Snoop。

左边是可视化树列表，选中可视化元素后，右边中间显示该元素的属性，右边下面是元素的UI预览界面。

当选中元素后，目标应用程序的响应元素会高亮显示在一个红色边框内。

选中元素可以直接在列表中选择，也可以按住Ctrl-Shift后移动鼠标到目标应用程序的选择元素上。

界面面板介绍

可视元素列表（Visual Tree View）

当出现性能问题时可以查看一下子元素的数量，尽量使得子元素数量达到最小。

通过过滤文本框右边下拉控件可以查找错误的绑定。（在调试OpenExpressApp过程中，snoop会出现一些bug，而使得OEA程序关闭，原因不明）

属性面板（Property Grid）

我更新过属性值，但是好像没有反映到目标应用程序中去。

事件视图（RoutedEvents View）

预览窗口（Preview Area ）

选择元素的预览界面，这个由于性能原因默认是关闭的，不过我每次都是打开它，因为可以立刻看到效果：）

放大视图（Zoom View）/3D Zoom View

调试实例

在开发OpenExpressApp时，发现了一个比较UI上的bug，我就是借助Snoop进行调试解决的，以下是我遇到的问题。

解决UI BUG问题：

在模块中，点击Grid中间区域会出现一列长条

解决：

因为看上去有点像splitter控件，所以以为splitter位置出现问题，我把ListDetailForm.xaml列表和明细之间使用ResizingPanel代替Grid，也不是splitter了
  <AvalonDock:DocumentContent Title="内容">
                                <DockPanel>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="3*"/>
                                            <ColumnDefinition Width="7*"/>
                                        </Grid.ColumnDefinitions>
                                        <GridSplitter Width="5" ></GridSplitter>
                                        <DockPanel Name="listRegion">
                                         </DockPanel>
                                         <DockPanel Name="detailRegion" Grid.Column="1">
                                        </DockPanel>
                                     </Grid>
                                </DockPanel>
                             </AvalonDock:DocumentContent>
  <AvalonDock:ResizingPanel>
                                    <DockPanel Name="listRegion" AvalonDock:ResizingPanel.ResizeWidth="3*">
                                    </DockPanel>
                                    <DockPanel Name="detailRegion" AvalonDock:ResizingPanel.ResizeWidth="7*">
                                    </DockPanel>
                                </AvalonDock:ResizingPanel> 

发现问题依旧，这时就不知道是什么原因了，从样子看出来还会是什么东东。这时正好snoop发布了，就用了一把。打开snoop看到这个竖条原来是CSLA中的BusyAnimation。我在Grid中间放置了一个显示busy状态的控件，终于找到罪魁祸首了，原来是这个东东在捣乱。
找到原因后就很好解决了，把BusyAnimation的VisibilityProperty绑定一下就可以解决了
            //绑定IsVisible
            Binding bdIsVisible = new Binding("IsBusy");
            bdIsVisible.Source = DataProvider;
            bdIsVisible.Converter = new BooleanToVisibilityConverter();
            bdIsVisible.BindsDirectlyToSource = true;
            busy.SetBinding(BusyAnimation.VisibilityProperty, bdIsVisible);