WPF - Visual调试工具Snoop

原文:WPF
- Visual调试工具Snoop

  Snoop经过很长一段时间,最近更新到支持NET 3.5了,它是一个WPF运行时对Visual
UI调试的一个工具,最近我用过它调试修改过一个bug,在此介绍给大家。Snoop可以在Installer下载安装,它的代码也是公布的,可以在Download
Source
下载,感兴趣的也可以看看,我现在还没有看:)

运行Snoop

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

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

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

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

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

界面面板介绍


可视元素列表(Visual Tree View)

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

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

属性面板(Property Grid)

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

事件视图(RoutedEvents View)

          
 

预览窗口(Preview Area )

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

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

      

调试实例

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

问题:

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

解决:


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

    Code
      <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>

    Code
      <AvalonDock:ResizingPanel>
                                        <DockPanel Name="listRegion" AvalonDock:ResizingPanel.ResizeWidth="3*">
                                        </DockPanel>
                                        <DockPanel Name="detailRegion" AvalonDock:ResizingPanel.ResizeWidth="7*">
                                        </DockPanel>
                                    </AvalonDock:ResizingPanel> 


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


    Code
                //绑定IsVisible
                Binding bdIsVisible = new Binding("IsBusy");
                bdIsVisible.Source = DataProvider;
                bdIsVisible.Converter = new BooleanToVisibilityConverter();
                bdIsVisible.BindsDirectlyToSource = true;
                busy.SetBinding(BusyAnimation.VisibilityProperty, bdIsVisible);

欢迎转载,转载请注明:转载自周金根 [ http://zhoujg.cnblogs.com/
]

时间: 2024-10-12 09:58:30

WPF - Visual调试工具Snoop的相关文章

WPF Tutorial - Using A Visual Collection

While WPF and XAML make the common 90% of UI programming quite easy, sometimes it gets a little odd in those other 10%. For instance - the visual tree. Most of the time it works great, and you never need to do anything special with it. But what about

20 Interesting WPF Projects on CodePlex

20 Interesting WPF Projects on CodePlex (Some for Silverlight too) Pete Brown - 22 November 2010 In no particular order, here's a selection of interesting and recently maintained WPF projects I've found on CodePlex. This is by no means a complete lis

[WPF系列]从基础起步学习系列计划

引言 WPF技术已经算不什么新技术,一搜一大把关于WPF基础甚至高级的内容.之前工作中一直使用winform所以一直没有深入学习WPF,这次因项目中使用了WPF技术来实现比较酷的展示界面.我在这里只是把个人学习WPF的过程做些总结,同时也为想我这样的初学WPF的提供一点帮助.我争取做到由浅入深,系统全面.不足之处还请大家指教. 学习工具 俗话说:“工欲行其事,必先利其器”,在学习WPF时我们应该找几个工具提高我们的学习和开发效率. kaxaml 一个实时查看xaml代码和呈现的工具.可从这里下载

WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

原文:WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目开发中图片的各种使用问题,经过总结,把一些经验分享一下.内容包括: WPF常用图像数据源ImageSource的创建: 自定义缩略图控件ThumbnailImage,支持网络图片.大图片.图片异步加载

WPF 对控件进行截图且不丢失范围(转载)

原文:Taking WPF "Screenshots" I was recently working on a Surface project at Microsoft (that will be shown at BETT  ) and one of the requirements was to provide an external "administration console".  As part of that console I wanted to s

UWP 和 WPF 对比

原文:UWP 和 WPF 对比 本文告诉大家 UWP 和 WPF 的不同. 如果在遇到技术选择或者想和小伙伴吹的时候可以让他以为自己很厉害,那么请继续看. 如果在看这文章还不知道什么是 UWP 和 WPF 那么也没关系,下面会告诉大家. 实际上 Universal Windows Platform (UWP) 和 Windows Presentation Foundation (WPF) 是不相同的,虽然都可以做界面和桌面开发,但是 UWP 是一个新的 UI 框架,而且 UWP 是支持很多平台,

RESTful Web API Help Documentation using Swagger UI and Swashbuckle

Sign in home articles Chapters and Sections> Search Latest Articles Latest Tips/Tricks Top Articles Beginner Articles Technical Blogs Posting/Update Guidelines Article Help Forum Article Competition  Submit an article or tip  Post your Blog quick ans

【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio 2019 版本 16.4 和 16.5 Preview 1中,我们希望借此机会回顾一下全年的新变化.如果您错过了我们以前的版本,或者只是没有机会赶上,那么此博客文章将是您可以看到我们在整个2019年所做的每项重大改进的地方. XAML实时调试工具: XAML C# Edit & Continue 现

【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF &amp; UWP 的 XAML 开发工具新特性

原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio 2019 版本 16.4 和 16.5 Preview 1中,我们希望借此机会回顾一下全年的新变化.如果您错过了我们以前的版本,或者只是没有机会赶上,那么此博客文章将是您可以看到我们在整个2019年所做的每项重大改进的地方. XAML实时调试工具: XAML C# Edit & Continue 现