Uso de la capa Visual en aplicaciones de escritorio

Ahora puedes usar Windows Runtime API en aplicaciones de escritorio que no sean para UWP para mejorar la apariencia, la sensación y la funcionalidad de tu WPF, Windows Forms y aplicaciones Win32 de C++ y aprovechar las características de interfaz de usuario de Windows más recientes que solo están disponibles a través de UWP.

En muchos escenarios, puedes usar islas XAML para agregar controles XAML modernos a tu aplicación. Sin embargo, cuando necesite crear experiencias personalizadas que van más allá de los controles integrados, puede acceder a las API de capa visual.

La capa visual proporciona una API de alto rendimiento, modo retenido para gráficos, efectos y animaciones. Es la base para la UI en dispositivos de Windows. Los controles XAML de UWP se basan en la capa Visual y permite muchos aspectos del sistema Fluent Design, como Luz, Profundidad, Movimiento, Material y Escala.

Vídeo corto que muestra una interfaz de usuario creada con la capa visual.

Interfaz de usuario creada con la capa visual

Crear una interfaz de usuario visualmente atractiva en cualquier aplicación de Windows

La capa Visual permite crear experiencias atractivas mediante la composición ligera de contenido dibujado personalizado (objetos visuales) y la aplicación de animaciones, efectos y manipulaciones eficaces en esos objetos de la aplicación. La capa visual no reemplaza ningún marco de interfaz de usuario existente; en su lugar, es un suplemento valioso para esos marcos.

Puede usar la capa Visual para dar a la aplicación una apariencia única y establecer una identidad que lo desmeje de otras aplicaciones. También permite principios de Fluent Design, diseñados para facilitar el uso de las aplicaciones, lo que hace que la interacción de los usuarios sea más eficaz. Por ejemplo, puede usarlo para crear indicaciones visuales y transiciones de pantalla animadas que muestren relaciones entre elementos en la pantalla.

Características de la capa visual

Pinceles

Los pinceles de composición permiten pintar objetos de interfaz de usuario con colores sólidos, degradados, imágenes, vídeos, efectos complejos, etc.

Un huevo creado con material Creator

Un huevo creado con la aplicación de demostración Material Creator.

Efectos

Los efectos de composición incluyen luz, sombra y una lista de efectos de filtro. Se pueden animar, personalizar y encadenar y, a continuación, aplicar directamente a los objetos visuales. SceneLightingEffect se puede combinar con iluminación de composición para crear atmósfera, profundidad y materiales.

Luces y material

Luces y materiales mostrados en la galería de muestras Windows UI Composition.

Animaciones

Las animaciones de composición se ejecutan directamente en el proceso de compositor, independientemente del subproceso de la interfaz de usuario. Esto garantiza la fluidez y la escala, por lo que puede ejecutar grandes cantidades de animaciones simultáneas y explícitas. Además de las animaciones de fotograma clave conocidas para impulsar los cambios de propiedad a lo largo del tiempo, puede usar expresiones para configurar relaciones matemáticas entre diferentes propiedades, incluida la entrada del usuario. Las animaciones controladas por entrada permiten crear una interfaz de usuario que responda dinámica y fluidamente a la entrada del usuario, lo que puede dar lugar a una mayor interacción del usuario.

Vídeo corto de otra interfaz de usuario creada con la capa visual.

El movimiento se muestra en la galería de ejemplos Windows UI Composition.

Mantener el código base existente y adoptar incrementalmente

El código de las aplicaciones existentes representa una inversión significativa que no desea perder. Puede migrar islas de contenido para usar la capa Visual y mantener el resto de la interfaz de usuario en su marco existente. Esto significa que puede realizar actualizaciones y mejoras significativas en la interfaz de usuario de la aplicación sin necesidad de realizar cambios exhaustivos en la base de código existente.

Ejemplos y tutoriales

Obtenga información sobre cómo usar la capa visual en las aplicaciones experimentando con nuestros ejemplos. Estos ejemplos y tutoriales le ayudan a empezar a usar la capa Visual y le muestran cómo funcionan las características.

Win32

Windows Forms

WPF

Limitaciones

Aunque muchas características de la capa visual funcionan igual cuando se hospedan en una aplicación de escritorio que en una aplicación para UWP, algunas características tienen limitaciones. Estas son algunas de las limitaciones que se deben tener en cuenta:

  • Las cadenas de efectos se basan en Win2D para las descripciones del efecto. El paquete NuGet Win2D no se admite en las aplicaciones de escritorio, por lo que tendría que volver a compilarlo desde el código source.
  • Para hacer pruebas de impacto, debe realizar cálculos de límites recorriendo el árbol visual por usted mismo. Esto es lo mismo que la capa visual en UWP, excepto en este caso, no hay ningún elemento XAML al que se pueda enlazar fácilmente para las pruebas de posicionamiento.
  • La capa visual no tiene un primitivo para representar texto.
  • Cuando se usan dos tecnologías de interfaz de usuario diferentes, como WPF y la capa visual, cada una de ellas es responsable de dibujar sus propios píxeles en la pantalla y no puede compartir píxeles. Como resultado, el contenido de la capa visual siempre se representa sobre otro contenido de la interfaz de usuario. (Esto se conoce como problema del espacio aéreo ). Es posible que tenga que realizar pruebas y codificación adicionales para asegurarse de que el contenido de la capa visual cambia de tamaño con la interfaz de usuario del host y no ocluye otro contenido.
  • El contenido alojado en una aplicación de escritorio no cambia de tamaño ni escala automáticamente para puntos por pulgada (PPP). Es posible que puedan requerirse pasos adicionales para asegurarse de que su contenido maneje los cambios de PPP. (Consulte los tutoriales específicos de la plataforma para obtener más información).

Recursos adicionales

Referencia de las API

  • Last updated on