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。