XAML Live Preview: Captura y edición de la interfaz de usuario de la aplicación de escritorio

Con XAML Live Preview, puedes capturar la interfaz de usuario (UI) de una aplicación de escritorio y visualizarla en una ventana acoplada dentro de Visual Studio, lo que facilita el uso de XAML Hot Reload para cambiar la aplicación y luego ver esos cambios en tiempo real mientras los realizas.

Ventana vista previa de XAML Live

La ventana XAML Live Preview está disponible durante la depuración. Para abrirlo, vaya a Depurar>Windows>XAML Live Preview.

A partir de la versión 17.14 de Visual Studio 2022, la versión preliminar activa de XAML y la recarga activa de XAML están disponibles en tiempo de diseño en aplicaciones MAUI de .NET y no solo durante una sesión de depuración. También se admiten dispositivos Android y emuladores.

O bien, seleccione el botón Mostrar en xaml Live Preview en la barra de herramientas de la aplicación.

Desplazamiento y zoom

Además de desplazarse con las barras de desplazamiento, también puede usar las siguientes interacciones:

• Una rueda del mouse, tanto vertical como horizontal (si el mouse lo admite).
• Desplazamiento del panel táctil con dos dedos, tanto en vertical como en horizontal.
• Una pulsación de la tecla Ctrl junto con arrastrar el ratón.

En cuanto al zoom, también puede usar las siguientes interacciones:

• Los botones para acercar y alejar la vista en la esquina inferior izquierda.
• Presione Ctrl+signo más (+) o Ctrl+signo menos (-), si prefiere usar el teclado.
• Una tecla Ctrl presionada con una acción de rueda del mouse o una acción de pellizco para hacer zoom con el panel táctil. Una ventaja adicional de usar un mouse es mantener un área de control.

Selección de elementos

La selección de elementos en XAML Live Preview es similar a la selección en una aplicación en ejecución. Permite buscar elementos en el árbol visual dinámico o en XAML de origen.

La selección de elementos se controla mediante los cuatro primeros botones de la barra de herramientas (de izquierda a derecha).

Los botones de la barra de herramientas generan las siguientes acciones:

• La selección de elementos inicia la acción de selección de elementos; en otras palabras, resalta los elementos a medida que mueves el mouse sobre el contenido de la aplicación en XAML Live Preview. Al hacer clic en un elemento, se selecciona en Árbol visual activo. También se dirige al origen si Preview Selected Element está habilitado y el XAML de origen está disponible. Este comportamiento es el mismo que en el árbol visual dinámico.
• Mostrar información del elemento durante la selección es un botón de alternancia que controla cómo se muestra la información de tamaño, color y fuente del elemento bajo tu ratón.
• Solo Mi XAML es un botón de alternancia que controla qué elementos resaltar: todos o solo aquellos elementos que tengan XAML de origen disponible en la solución. Este comportamiento es el mismo que en el árbol visual dinámico.
• Vista previa del elemento seleccionado es un botón de alternancia que controla la navegación al XAML de origen cuando se selecciona un elemento. Está desactivado de forma predeterminada. Este comportamiento es el mismo que en el árbol visual dinámico.

Gobernantes

Las reglas le ayudan a alinear los elementos de la aplicación. Muestran la distancia, en unidades de aplicación, hasta la regla anterior. De este modo, ayudan a comprobar las distancias entre diferentes partes de la aplicación.

El segundo grupo de botones de la barra de herramientas controla las reglas, como se indica a continuación (de izquierda a derecha):

• Agregar regla vertical. Agrega una sola regla de medición vertical. Si hace clic en este botón varias veces en una fila, colocará nuevas reglas para que no se superpongan a las reglas existentes.
• Agregar regla horizontal. Agrega una sola regla horizontal, de manera similar a cómo se agrega una regla vertical.
• Elimina todas las reglas. Quita todas las reglas a la vez.
• Seleccione el color de la regla. Cambia el color de las reglas.
• Alternar la visibilidad de la regla. Oculta o muestra todas las reglas con un solo clic.

Las reglas son fáciles de usar con el teclado. Puede moverse usando la tecla Tab entre ellos. Puedes usar las teclas de flecha para mover las reglas de un píxel a la vez o presionar Ctrl junto con las teclas de flecha para moverlas por 10 unidades de aplicación a la vez. La clave Del elimina la regla seleccionada actualmente. También puede eliminar una regla con un ratón seleccionando el botón Eliminar regla junto a la etiqueta.

También puede agregar reglas alrededor de un elemento mientras usa Selección de elementos. Con un clic derecho del ratón se agregan reglas verticales. Para agregar reglas horizontales, seleccione y mantenga presionada la tecla Mayús mientras hace clic con el botón derecho.

Aplicaciones de varias ventanas

Si la aplicación tiene varias ventanas, puede elegir qué ventana mostrar mediante el cuadro combinado Ventana. O bien, usa el botón Mostrar en xaml Live Preview en la barra de herramientas de la aplicación que se encuentra en la ventana en la que quieres obtener una vista previa.

Plataformas compatibles

La versión inicial de Visual Studio 2022 admite las siguientes plataformas y escenarios de depuración.

Limitaciones

Xaml Live Preview funciona capturando una captura de pantalla de aplicación varias veces por segundo y usa api disponibles como PrintWindow. Está sujeto a las siguientes limitaciones:

• Si una parte de una ventana de la aplicación está fuera de pantalla, es probable que esa parte no muestre los cambios de XAML Hot Reload.
• Una ventana puede optar por no participar en la captura de pantalla y no estar disponible para la Vista Previa en Vivo de XAML usando SetWindowDisplayAffinity con WDA_EXCLUDEFROMCAPTURE o DwmSetWindowAttribute con DWMWA_CLOAK.

Pasos siguientes

Obtenga más información sobre XAML Hot Reload, que está estrechamente relacionado con XAML Live Preview.

Contenido relacionado

Notas de la versión de Visual Studio 2022