Herramientas de diseño en tiempo de ejecución de XAML para WinUI 3

Visual Studio incluye un conjunto de herramientas en tiempo de ejecución que te permiten diseñar, iterar e inspeccionar el XAML de WinUI 3 mientras se ejecuta la aplicación. Se usan juntos, le proporcionan un bucle de inspección de edición y recarga rápido que muestra la interfaz de usuario real ( estilos reales, plantillas de datos reales, animaciones reales) en lugar de una aproximación estática.

Las herramientas en tiempo de ejecución que se describen en este artículo son valiosas si un diseñador está disponible o no. En este artículo se explica el flujo de trabajo.

Qué utilizará

Prerequisites

• Visual Studio 2022, versión 17.0 o posterior (se incluyen Recarga activa XAML y Árbol visual dinámico).
• Un proyecto de WinUI 3 mediante el SDK de Aplicaciones para Windows. Consulte Creación y ejecución de un proyecto de WinUI 3 para crear uno.
• El proyecto debe tener como destino .NET 6 o posterior (C#) o usar C++/WinRT.

Paso 1: Inicia la aplicación con el depurador

Presione F5 (o Depurar>Iniciar depuración). XAML Recarga activa se activa automáticamente cuando se conecta el depurador.

La barra de herramientas de XAML Recarga activa aparece en la superposición integrada en la aplicación. Si no lo ve, compruebe que la configuración está habilitada:

1. Vaya a Herramientas>Opciones>Depuración>Recarga activa de XAML.
2. Confirme que la opción Habilitar Recarga activa XAML está activada.

Paso 2: Editar XAML y ver los cambios al instante

Con la aplicación en ejecución, cambie a cualquier .xaml archivo del editor y realice un cambio; por ejemplo, cambie un Background color o agregue un nuevo Button. La aplicación en ejecución se actualiza dentro de un segundo o dos, sin reiniciar.

Qué Recarga activa puede y no puede hacer

Recarga activa controla las modificaciones más comunes:

• Adición, eliminación o reordenación de elementos
• Cambiar los valores de las propiedades (colores, márgenes, texto, tamaños)
• Adición o modificación de estilos y diccionarios de recursos
• Cambio del contenido de la plantilla de datos

Algunos cambios requieren un reinicio:

• Adición de nuevas clases, controladores de eventos del código subyacente o cambios en x:Class
• Modificar App.xaml diccionarios combinados (a veces)
• Cambiar las expresiones x:Bind que hacen referencia a nuevas propiedades

Cuando Recarga activa no puede aplicar un cambio, la barra de herramientas muestra una notificación. Solo tiene que reiniciar la aplicación para recoger esos cambios.

Para obtener más información, consulta HOT RELOAD XAML.

Paso 3: Inspeccionar el árbol visual y las propiedades

Abra la ventana Árbol visual dinámico (Depurar>Windows>Árbol visuallive). Esta ventana muestra todos los elementos del árbol de interfaz de usuario de la aplicación en ejecución, organizados por relaciones de elementos primarios y secundarios.

Selección de elementos visualmente

1. En la barra de herramientas Árbol visual activo , habilite Seleccionar elemento en la aplicación en ejecución (el botón de cruz).
2. Haga clic en cualquier elemento de la aplicación en ejecución; el árbol navega a ese elemento y el Explorador de propiedades dinámicas muestra sus propiedades.

Este es el equivalente en tiempo de ejecución de hacer clic en un elemento en una superficie de diseño, salvo que refleja exactamente lo que muestra tu aplicación, incluidos los elementos creados dinámicamente mediante código.

Edición de propiedades en tiempo de ejecución

En el Explorador de propiedades en vivo, puede cambiar los valores de propiedad en tiempo real. Por ejemplo:

• Cambie un Margin para ajustar el espaciado y vea el efecto inmediatamente.
• Establézcalo Visibility en Collapsed para probar lo que sucede cuando un elemento está oculto.
• Ajuste Width o Height para probar diseños con capacidad de respuesta.

Estas ediciones en tiempo de ejecución no se guardan de nuevo en el archivo XAML, sino que se realizan para experimentación. Una vez que encuentre valores que le gusten, escriba en el .xaml archivo (donde Recarga activa los recoge y los convierte en permanentes).

Paso 4: Usar XAML Live Preview

XAML Live Preview representa la aplicación en ejecución dentro de una pestaña de Visual Studio, por lo que puedes ver la aplicación y el origen XAML en paralelo sin cambiar las ventanas.

Para abrirlo: Depurar>Windows>XAML Live Preview.

Esto es especialmente útil en equipos con un solo monitor, donde alternar con Alt+Tab entre la aplicación y Visual Studio resulta incómodo.

Para obtener más información, consulta XAML Live Preview.

Recomendado: Crear una página de pruebas de la interfaz de usuario

Cree una página de área de juegos dedicada en el proyecto, una página cuyo único propósito es permitirle experimentar con controles, estilos y diseños. Esto te proporciona un espacio de trabajo que siempre está listo para hacer iteraciones visuales, y combina especialmente bien con las herramientas de ejecución mencionadas arriba.

Configuración del área de juegos

1. Haga clic con el botón derecho en su proyecto en Explorador de soluciones y seleccione Agregar>Nuevo elemento>Página en blanco (WinUI 3). Denomínelo UIPlayground.xaml.

2. En UIPlayground.xaml, agregue un ScrollViewer elemento con secciones para cada control o patrón que quiera probar:

   <Page
       x:Class="MyApp.UIPlayground"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
       <ScrollViewer Padding="24">
           <StackPanel Spacing="24">
   
               <!-- Section: Buttons -->
               <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
               <StackPanel Orientation="Horizontal" Spacing="8">
                   <Button Content="Standard"/>
                   <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                   <ToggleButton Content="Toggle"/>
                   <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
               </StackPanel>
   
               <!-- Section: Text input -->
               <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
               <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
               <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>
   
               <!-- Add more sections as needed -->
   
           </StackPanel>
       </ScrollViewer>
   </Page>
   

3. Haga que el parque infantil sea fácil de llegar. Durante el desarrollo, establézcalo como página de inicio en App.xaml.cs:

   // In App.xaml.cs, OnLaunched method — swap in for quick playground access:
   // rootFrame.Navigate(typeof(UIPlayground));
   

   O bien, si la aplicación usa un NavigationView, agregue un elemento de menú que solo aparezca en compilaciones de depuración. Por ejemplo, en el código subyacente de la ventana principal:

   // In your main window or shell page constructor, after InitializeComponent():
   #if DEBUG
       NavView.MenuItems.Add(new NavigationViewItem
       {
           Content = "UI Playground",
           Tag = typeof(UIPlayground)
       });
   #endif
   

   donde NavView es el x:Name de su NavigationView control.

Uso del área de juegos

1. Presione F5 para iniciar la aplicación y navegar a la página del área de juegos.
2. Abra el .xaml archivo en paralelo con la aplicación en ejecución (o use XAML Live Preview).
3. Agregar o modificar controles en el editor XAML: Recarga activa inserta cambios al instante.
4. Use Árbol visual dinámico para hacer clic en controles representados e inspeccionar sus valores de diseño reales en el Explorador de propiedades en directo.
5. Cuando estés satisfecho con el aspecto de un control, copia el XAML en tu página real.

Este patrón te ofrece un ciclo de «escribir-recargar-inspeccionar» y, como ejecuta código real, ves plantillas de datos reales, estilos reales y animaciones reales.

Comparación de los enfoques en tiempo de diseño y tiempo de ejecución

Aquí se muestra cómo las tareas comunes de diseño de la interfaz de usuario se asignan a las herramientas en tiempo de ejecución:

Sugerencias para un flujo de trabajo eficaz

• Use la aplicación WinUI 3 Gallery. Instálelo desde el Microsoft Store o compilelo desde GitHub. Muestra todos los controles de WinUI 3 con ejemplos interactivos y XAML listo para copiar. Piense en él como un catálogo visual que puedes examinar antes de escribir XAML.
• Mantenga abierta la página del área de juegos. Trátalo como una guía de estilo viva para tu aplicación.
• Use d:DesignHeight y d:DesignWidth. Incluso sin el diseñador, estos atributos ayudan a IntelliSense y mantienen las páginas en un tamaño coherente al abrirlas en el editor.
• Combinar con la ventana Errores de enlace de XAML. Ábralo desde Debug>Windows>XAML Binding Failures (Errores de enlace deXAML) para detectar errores de enlace que el diseñador nunca habría mostrado.
• Use el kit de herramientas de la comunidad. El kit de herramientas de Windows Community proporciona controles y asistentes que reducen la cantidad de diseño que necesita para codificar a mano.

Contenido relacionado

• Recarga en caliente de XAML
• Versión preliminar de XAML Live
• Inspeccionar propiedades XAML durante la depuración
• Elegir el visor de árbol visual adecuado
• Introducción a los controles
• Aplicación de la galería de WinUI 3