Xamarin.Forms árbol visual en directo

  • Artículo
  • 2 minutos para leer

Puede recibir una vista en tiempo real del código XAML en ejecución con el árbol visual en directo. Muestra una vista de árbol de los elementos de la interfaz de usuario de la aplicación en Xamarin.Forms ejecución.

Requisitos

  • Use Xamarin.Forms la versión 5.0 o posterior.
  • Tener solo los Recarga activa habilitados (está habilitado de forma predeterminada).

Uso

Con los requisitos cumplidos, depurar la aplicación y la ventana Árbol visual en directo mostrará la jerarquía de la interfaz de usuario en tiempo de ejecución de la aplicación.

  • Windows:de forma predeterminada, aparece a la izquierda del IDE. Si no lo ve, use Depurar Windows Live Visual > Tree para mostrarlo.
  • Mac:de forma predeterminada, aparece a la derecha del IDE. Si no lo ve, use Ver depuración Windows árbol visual en > directo para mostrarlo.

Use la vista de árbol para inspeccionar la jerarquía de la interfaz de usuario en tiempo de ejecución de la aplicación, expandiendo o contrayendo nodos para centrarse en determinadas partes de la interfaz de usuario.

Barra de herramientas de árbol visual en directo

La vista de elementos XAML se simplifica de forma predeterminada mediante la característica XAML Just My. Alterne el botón Mostrar solo mi XAML, situado más a la derecha en la barra de herramientas árbol visual en directo, para mostrar todos los elementos de la interfaz de usuario. Si lo desea, puede deshabilitar esta configuración en opciones para mostrar siempre todos los elementos XAML.

Nota:

Visual Studio para Mac no admite actualmente la característica XAML Solo mi.

La estructura del XAML tiene una gran cantidad de elementos que probablemente no le interesen directamente y, si no conoce bien el código, es posible que le sea difícil navegar por el árbol para encontrar lo que busca. Por lo tanto, el árbol visual en directo tiene varios enfoques que le permiten usar la interfaz de usuario de la aplicación para ayudarle a encontrar el elemento que desea examinar.

Seleccione el elemento de la aplicación en ejecución (actualmente solo se admite para aplicaciones para UWP). Puede habilitar este modo al seleccionar el botón situado más a la izquierda de la barra de herramientas de Live Visual Tree. Con este modo activo, puede seleccionar un elemento de la interfaz de usuario en la aplicación y el árbol visual activo se actualiza automáticamente para mostrar el nodo en el árbol correspondiente a ese elemento y sus propiedades.

Mostrar adornos de diseño en la aplicación en ejecución (actualmente solo se admite para aplicaciones para UWP). Puede habilitar este modo al seleccionar el botón que está justo a la derecha del botón Habilitar selección. Cuando la opción Mostrar adornos de diseño está activada, la ventana de la aplicación muestra líneas horizontales y verticales a lo largo de los límites del objeto seleccionado para que pueda ver lo que alinea, así como rectángulos que muestran los márgenes.

Obtener una vista previa de la selección. Puede habilitar este modo seleccionando el tercer botón de la izquierda en la barra de herramientas de Live Visual Tree. Este modo muestra el XAML donde se ha declarado el elemento, siempre y cuando tenga acceso al código fuente de la aplicación.