Compartir a través de

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

  • Artículo

.NET Multi-platform App UI (.NET MAUI) Live Visual Tree 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 del árbol visual dinámico seleccionando Depurar > Ventanas > Live Visual Tree en la barra de menús de Visual Studio:

Screenshot of the Live Visual Tree window in Visual Studio.

Siempre que Recarga activa esté habilitado, la ventana Live Visual Tree 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. 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:

Screenshot of all UI elements in the Live Visual Tree window.

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 Live Visual Tree (Habilitar solo mi XAML en el árbol visual dinámico) está deshabilitado:

Screenshot of Just My XAML button disabled in the Live Visual Tree window in Visual Studio.

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 Live Visual Tree tiene diversos métodos que te permiten usar la interfaz de usuario de la aplicación para poder encontrar el elemento que deseas examinar.

  • Seleccione el elemento en la aplicación en ejecución. Puedes habilitar este modo haciendo clic en el botón Seleccione el elemento en la aplicación en ejecución de la barra de herramientas de Live Visual Tree:

    Screenshot of the Select Element in the Running Application button in the Live Visual Tree toolbar.

    Con este modo activado puedes seleccionar un elemento de interfaz de usuario en la aplicación, la ventana Live Visual Tree 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 Live Visual Tree:

    Screenshot of the Display Layout Adorners in the Running Application button in the Live Visual Tree toolbar.

    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 Live Visual Tree:

    Screenshot of the Preview Selected Item button in the Live Visual Tree toolbar.

    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.