Inspección del árbol visual de una aplicación de .NET MAUI

.NET Multi-platform App UI (.NET MAUI) Árbol visual dinámico es una característica de Visual Studio que proporciona una vista de árbol de los elementos de la interfaz de usuario en la aplicación de .NET MAUI en ejecución.

Cuando la aplicación de .NET MAUI se ejecuta en la configuración de depuración, con el depurador asociado, se puede abrir la ventana Árbol visual dinámico seleccionando Depurar > Ventanas > Árbol visual dinámico en la barra de menús de Visual Studio:

Siempre que Recarga activa esté habilitado, la ventana Árbol visual dinámico mostrará la jerarquía de los elementos de la interfaz de usuario de la aplicación, independientemente de si la interfaz de usuario de la aplicación se compila con XAML o C#. Pero tendrás que deshabilitar Solo mi XAML para mostrar la jerarquía de los elementos de interfaz de usuario de la aplicación para las interfaces compiladas con C#.

Solo mi XAML

La vista de los elementos de la interfaz de usuario se simplifica de forma predeterminada mediante una característica denominada Solo mi XAML. En Visual Studio, al hacer clic en el botón Mostrar solo mi XAML, se deshabilita la característica y se muestran todos los elementos de la interfaz de usuario del árbol visual:

Solo mi XAML se puede deshabilitar permanentemente seleccionando Depurar > Opciones > Recarga activa de XAML en la barra de menús de Visual Studio. Después el cuadro de diálogo Opciones, asegúrate de que Enable Just My XAML in Árbol visual dinámico (Habilitar solo mi XAML en el árbol visual dinámico) está deshabilitado:

Buscar un elemento de interfaz de usuario

La estructura de una interfaz de usuario XAML tiene muchos elementos que es posible que no te interesen y, si no tienes un conocimiento completo del código fuente de la aplicación, es posible que tengas dificultades al navegar por el árbol visual para encontrar el elemento de interfaz de usuario que estás buscando. Pero, en Ventanas, la ventana Árbol visual dinámico tiene diversos métodos que te permiten usar la interfaz de usuario de la aplicación para poder encontrar el elemento que deseas examinar.

• Selecciona el elemento en la aplicación en ejecución. Puedes habilitar este modo haciendo clic en el botón Selecciona el elemento en la aplicación en ejecución de la barra de herramientas de Árbol visual dinámico:

  

  Con este modo activado puedes seleccionar un elemento de interfaz de usuario en la aplicación, la ventana Árbol visual dinámico se actualiza automáticamente para mostrar el nodo en el árbol correspondiente a dicho elemento.

• Mostrar adornos de diseño en la aplicación en ejecución. Puedes habilitar este modo haciendo clic en el botón Mostrar adornos de diseño en la aplicación en ejecución de la barra de herramientas de Árbol visual dinámico:

  

  Cuando la opción Mostrar adornos de diseño está habilitada, la ventana de la aplicación muestra líneas horizontales y verticales a lo largo de los límites del objeto seleccionado para que puedas ver lo que alinea y rectángulos que muestran los márgenes.

• Obtener una vista previa de la selección. Puedes habilitar este modo haciendo clic en el botón Vista previa del elemento seleccionado en la barra de herramientas de Árbol visual dinámico:

  

  Este modo muestra el código fuente de XAML donde se ha declarado el elemento, siempre y cuando tengas acceso al código fuente de la aplicación.