检查 .NET MAUI 应用的可视化树

.NET Multi-platform App UI (.NET MAUI) 实时可视化树是一项 Visual Studio 功能，可提供正在运行的 .NET MAUI 应用中 UI 元素的树状视图。

当 .NET MAUI 应用以调试配置运行并附加了调试器时，可以通过从 Visual Studio 菜单栏中选择“调试 > Windows > 实时可视化树”来打开“实时可视化树”窗口：

Screenshot of the Live Visual Tree window in Visual Studio.

如果已启用热重载，“实时可视化树”窗口将显示应用 UI 元素的层次结构，无论应用 UI 是使用 XAML 还是 C# 构建的。但是，必须禁用“仅限我的 XAML”才能显示使用 C# 构建的 UI 元素的层次结构。

仅限我的 XAML

默认情况下，会使用名为“仅限我的 XAML”的功能简化 UI 元素的视图。单击“仅显示我的 XAML”按钮可禁用该功能，并显示可视化树中的所有 UI 元素：

Screenshot of all UI elements in the Live Visual Tree window.

从 Visual Studio 菜单栏中选择“调试 > 选项 > XAML 热重载”，即可永久禁用“仅限我的 XAML”。接下来，在“选项”对话框中，确保禁用“在实时可视化树中启用仅限我的 XAML”：

Screenshot of Just My XAML button disabled in the Live Visual Tree window in Visual Studio.

XAML UI 的结构有很多你可能不感兴趣的元素，而如果你并不完全了解应用程序的源代码，则可能很难在可视化树中找到要查找的 UI 元素。因此，在 Windows 上，“实时可视化树”窗口提供了几种方法，使你可以使用应用的 UI 来帮助找到想要检查的元素：

在正在运行的应用程序中选择元素。可以通过单击“实时可视化树”工具栏中的“在正在运行的应用程序中选择元素”按钮来启用此模式：

启用此模式后，当你在应用中选择 UI 元素时，“实时可视化树”窗口会自动更新以显示树中对应于该元素的节点。
在运行的应用程序中显示布局装饰器。可以通过单击“实时可视化树”工具栏中的“在正在运行的应用程序中显示布局装饰器”按钮来启用此模式：

启用此模式后，它会导致应用窗口沿所选对象的边界显示水平线和垂直线，以便看到它与什么对齐，以及显示边距的矩形。
预览所选内容。可以通过单击“实时可视化树”工具栏中的“预览选定项”按钮来启用此模式：

如果你有访问应用源代码的权限，此模式会显示声明了该元素的 XAML 源代码。