Xamarin.Forms árbol visual dinámico

  • Artículo

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

Requisitos

  • Use Xamarin.Forms 5.0 o posterior.
  • Tener habilitada la Recarga activa solo para cambios (está habilitada de forma predeterminada).

Uso

Con los requisitos cumplidos, depurar la aplicación y la ventana Árbol visual dinámico mostrarán la jerarquía de la interfaz de usuario de runtime de la aplicación.

  • Windows: de forma predeterminada, aparece a la izquierda del IDE. Si no lo ve, use Depurar > Windows > Árbol visual dinámico para mostrarlo.
  • Mac: de forma predeterminada, aparece a la derecha del IDE. Si no lo ve, use Ver > Depurar Windows > Árbol visual dinámico para mostrarlo.

Use la vista de árbol para inspeccionar la jerarquía de la interfaz de usuario de runtime de la aplicación y expandir o contraer nodos para centrarse en determinadas partes de la interfaz de usuario.

Barra de herramientas del árbol visual activo

La vista de elementos XAML se simplifica de forma predeterminada mediante la característica Solo mi XAML. Active el botón Mostrar Solo mi XAML, situado a la derecha de la barra de herramientas del Árbol visual dinámico, para mostrar todos los elementos de la interfaz de usuario. Si quiere deshabilitar esta configuración en opciones para mostrar siempre todos los elementos XAML.

Nota:

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

La estructura del XAML tiene muchos elementos que probablemente no le interesen, y si no conoce bien el código tal vez tenga que perder bastante tiempo navegando por el árbol para encontrar lo que está buscando. Por lo tanto, el Árbol visual dinámico tiene varios enfoques que 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 activado puede seleccionar un elemento de interfaz de usuario en la aplicación; Árbol visual dinámico se actualiza automáticamente para mostrar el nodo en el árbol correspondiente a dicho 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.