最近和朋友闲聊时提到 Windows 10 上新的必应新闻应用,我们都比较好奇它的新闻列表布局是怎么做的,故想探究一番。一开始还是按照以往思路,解开 WindowsApps 目录的权限,进入应用的安装目录,打算反编译,后来一想,现在应用都是 .net native 的,这招行不通了啊!后来灵机一动,想起来 Visual Studio 2015 的新功能:实时可视化树

启动实时可视化树

第一步:管理员权限启动 Visual Studio 2015,不要打开任何项目 。

第二步:调试(Debug) 菜单中找到并点击 附加到进程(Attach to Process)

第三步: 在附加到进程的窗口中选择必应新闻进程。

第四步:调试(Debug) -> 窗口(Windows) 菜单中找到并点击 实时可视化树(Live Visual Tree)

这时,逆天的新功能就出现了:

可以看到,整个应用界面中,只要是使用 XAML 构成的界面元素全部都展现在了实时可视化树上,每一个元素名后面的括号里的数量是该元素内所有子元素的数量。这样一来,控件的构成就一目了然了。接下来我们要做的,就是一层层展开视觉树的节点,找到目标控件 —— AutomationGrid ,这下就能了解必应新闻的列表是怎么做的了☺。

定位元素

如果你使用过 Internet Explorer/ Microsoft Edge 浏览器的 F12 开发人员工具,或者 Chrome 浏览器的“审查元素”功能,你可能会知道,它们允许你在点击 DOM 树上某个元素的时候,实时在目标页面上预览你的选择。实际上,在 Visual Studio 2015 的实时可视化树中,除了手动查找树中的元素,也可以做到像 F12 工具等一样的可视化定位方式!

你可能已经注意到了,在“实时可视化树” (Live Visual Tree) 面板顶部有一排按钮,正是我们期待的功能:

  • 第一个按钮:启用实时选择。开启该功能后,当鼠标在调试目标应用的界面上移动时,鼠标光标当前指向的元素会被红色虚线框标记起来。这时鼠标事件会被 Visual Studio 的 UI 调试器拦截,直接在调试目标应用的界面上点击一下,会直接在实时可视化树上找到对应元素。

  • 第二个按钮:在调试目标应用的界面上显示布局指示器。开启该功能后,在实时可视化树上点击一个元素,调试目标应用的界面上,该元素的上层会覆盖一个半透明层,并在元素四周绘制辅助线指示出该元素的布局。

查看并修改属性

在实时可视化树的任意元素上右键,点击显示属性,即可打开“实时属性管理器” (Live Property Explorer) 查看、修改元素的各项属性。基本上,Visibility, Content, Text, FontSize 等各种属性均可修改。在 "Computed Values" 一栏中还可以看到元素布局的高、宽、渲染尺寸等实际数值。

实时可视化树支持调试 WPF 和 Windows Store 应用的 XAML UI,不支持其它类型的应用,也不支持在 XAML 上通过 DirectX 绘制的界面内容。

由于 Visual Studio 的调试器可以附加到几乎任何程序上,而 Windows 10 中的系统设置、 Cortana 等应用的界面都是 XAML 构成的,于是我们可以随意将调试器附加到这些应用的进程上对其界面构成详细探查一番,甚至可以通过修改元素属性进行各种 play :) 甚至 Visual Studio 本身也可以被调教~