Xamarin.Forms实时可视化树

  • 项目

通过“实时可视化树”，可以获取正在运行的 XAML 代码的实时视图。 它显示正在运行的 Xamarin.Forms 应用程序的 UI 元素的树状视图。

要求

  • 使用 Xamarin.Forms 5.0 或更高版本。
  • 仅热重载启用更改（默认情况下已启用）。

使用情况

满足要求后，调试应用和实时可视化树窗口将显示应用的运行时 UI 层次结构。

  • Windows：默认情况下，它显示在 IDE 的左侧。 如果未看到它，请通过“调试”>“Windows”>“实时可视化树”显示它。
  • Mac：默认情况下，它显示在 IDE 的右侧。 如果未看到它，请通过“视图”>“调试 Windows”>“实时可视化树”显示它。

使用树状视图检查应用的运行时 UI 层次结构，展开/折叠节点以专注于 UI 的特定部分。

实时可视化树工具栏

默认情况下使用“仅显示我的 XAML”功能简化 XAML 元素的视图。 切换“实时可视化树”工具栏上最右侧的“仅显示我的 XAML”按钮以显示所有 UI 元素。 你也可以在选项中禁用此设置，以始终显示所有 XAML 元素。

注意

Visual Studio for Mac 目前不支持“仅显示我的 XAML”功能。

XAML 的结构具有大量你可能并不直接感兴趣的元素，并且如果你不熟悉代码，就可能很难通过导航树来查找你正在寻找的内容。 因此，“实时可视化树”有几种方法可使用应用程序的 UI 来帮助找到想要检查的元素。

选择正在运行的应用程序中的元素（当前仅支持 UWP 应用）。 当选择“实时可视化树”工具栏上最左侧的按钮时，可以启用此模式。 在此模式下，可以在应用程序中选择 UI 元素，并且“实时可视化树”会自动更新以显示树中对应于该元素的节点，以及其属性。

选择正在运行的应用程序中的布局装饰器（当前仅支持 UWP 应用）。 当选择“启用选择”按钮右侧紧靠的按钮时，可以启用此模式。 当“显示布局装饰器”打开时，它会导致应用程序窗口沿所选对象的边界显示水平线和垂直线，以便看到它与什么对齐，以及显示边距的矩形。

预览所选内容。 你可以通过选择“实时可视化树”工具栏上从左侧起第三个按钮来启用此模式。 如果你有访问该应用程序的源代码的权限，则此模式将在声明元素处显示 XAML。