WPF UI分析工具Snoop怎么用?

按住Ctrl-Shift后移动鼠标到目标应用程序的选择元素上。

1. 获取指定应用程序的UI

打开snoop,选择“Drag and Drop this crosshairs over wpf window inorder to snoop it” 按钮, 拖动它到你要观察的wpf窗体上。

你会发现 十字准线 会标出窗体的名字及进程号。

2.Properties选项卡的用法

此页显示了左边选中的可视元素的属性。 通过Properties可以看到运行时的属性值( 比如Width,Height,以及此属性值如果Binding则其BindingPath)

大部分控件的属性是可更改的, 则我们可以在Properties中更改某些属性值, 来实时看到被观察窗体上的UI变化。 (比如,我们更改元素的Visibility,可以 实时看到元素的隐藏或显示;更改高宽来实时查看变化等等) 这样对于调试很方便,当我们通过snoop确定效果时,再在代码中更改。

3.Data Context选项卡的用法

此页显示了左边选中的可视元素的DataContext(数据上下文) , 通过此功能看到运行时我们Binding的值是否正确。

4.Events选项卡的用法

此页显示了被观察窗体所发生的路由事件。通过此功能我们可以查看用户操作时的Routed Event是否按照我们想象的方式正确运行。

点击Common Events下拉框, 可以选择想要监视的event类型。

5.Methods选项卡的用法

此页可以动态调用左边被选中元素所公开的函数方法, 或者元素的DataContext所公开的方法。 通过此方法我们可以调试一些方法调用后对于UI的影响。

6.右下角Preview区域的用法

snoop右下角可以对被观察窗体进行放大, 实时预览,以及截图保存。尤其是Preview功能,对应实时调试样式效果很有用。打开实时预览功能后, 我们可以在预览区域进行拖动,放大缩小等操作,能尽可能最大化的看到效果。

7.状态栏

snoop的状态栏显示了当前focus的元素, 对于我们调试wpf的焦点问题也很有用法,配合Events监视情况会更好。

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

软件截图1

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

软件截图2

)可以打开Snoop。

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

软件截图3

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

软件截图4

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

界面面板介绍

可视元素列表(Visual TreeView)

软件截图5

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

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

属性面板(Property Grid)

软件截图6

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

事件视图(RoutedEvents View)

软件截图7

预览窗口(Preview Area)

软件截图8

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

放大视图(Zoom View)/3D Zoom View

软件截图9

软件截图10

调试实例

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

解决UI BUG问题:

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

软件截图11

解决:

因为看上去有点像splitter控件,所以以为splitter位置出现问题,我把ListDetailForm.xaml列表和明细之间使用ResizingPanel代替Grid,也不是splitter了

<AvalonDock:DocumentContentTitle="内容">

<DockPanel>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinitionWidth="3*"/>

<ColumnDefinitionWidth="7*"/>

</Grid.ColumnDefinitions>

<GridSplitterWidth="5"></GridSplitter>

<DockPanelName="listRegion">

</DockPanel>

<DockPanelName="detailRegion"Grid.Column="1">

</DockPanel>

</Grid>

</DockPanel>

</AvalonDock:DocumentContent>

<AvalonDock:ResizingPanel>

<DockPanelName="listRegion"AvalonDock:ResizingPanel.ResizeWidth="3*">

</DockPanel>

<DockPanelName="detailRegion"AvalonDock:ResizingPanel.ResizeWidth="7*">

</DockPanel>

</AvalonDock:ResizingPanel>

发现问题依旧,这时就不知道是什么原因了,从样子看出来还会是什么东东。这时正好snoop发布了,就用了一把。打开snoop看到这个竖条原来是CSLA中的BusyAnimation。我在Grid中间放置了一个显示busy状态的控件,终于找到罪魁祸首了,原来是这个东东在捣乱。

找到原因后就很好解决了,把BusyAnimation的VisibilityProperty绑定一下就可以解决了

//绑定IsVisible

BindingbdIsVisible=newBinding("IsBusy");

bdIsVisible.Source=DataProvider;

bdIsVisible.Converter=newBooleanToVisibilityConverter();

bdIsVisible.BindsDirectlyToSource=true;

busy.SetBinding(BusyAnimation.VisibilityProperty,bdIsVisible);

本文由 hcb 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论