Compartir a través de

Usar la capa visual en aplicaciones de escritorio

  • Artículo

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

En muchos casos, puedes usar islas XAML para agregar controles XAML modernos a la aplicación. Sin embargo, cuando necesites crear experiencias personalizadas que vayan más allá de los controles integrados de UWP, puedes acceder mediante las API de capa visual.

La capa visual proporciona una API de modo retenido y alto rendimiento para gráficos, efectos y animaciones. Es la base de la interfaz de usuario de todos los dispositivos Windows. Los controles XAML de UWP se basan en la capa visual y habilitan muchos aspectos del sistema Fluent Design, tales como luz, profundidad, movimiento, material y escala.

Vídeo corto en el que se muestra la 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 una composición ligera de contenido dibujado personalizado (objetos visuales) y la aplicación de animaciones, efectos y manipulaciones en esos objetos de la aplicación. La capa visual no reemplaza ningún marco de trabajo de la interfaz de usuario actual; es un complemento valioso para esos marcos de trabajo.

Puedes usar la capa visual para dar a la aplicación una apariencia única y establecer una identidad que la diferencie de otras aplicaciones. También habilita los principios de Fluent Design, ideados para facilitar el uso de tus aplicaciones y atraer más a los usuarios. Por ejemplo, puedes utilizarlo para crear indicaciones visuales y transiciones de pantalla animadas que muestren las relaciones entre los elementos de la pantalla.

Características de la capa visual

Pinceles

Los pinceles de Composition 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 Composition incluyen luz, sombra y una lista de efectos de filtro. Se pueden animar, personalizar y encadenar y, después, aplicar directamente a los objetos visuales. SceneLightingEffect se puede combinar con la iluminación de la composición para crear una atmósfera, profundidad y materiales.

Luces y materiales

Luces y materiales que se demuestran en la galería de ejemplos de Windows.UI.Composition.

Animaciones

Las animaciones de Composition se ejecutan directamente en el proceso del compositor, independientemente del subproceso de la interfaz de usuario. Esto garantiza fluidez y escalado, para que puedas ejecutar un gran número de animaciones explícitas simultáneas. Además de las animaciones KeyFrame conocidas para controlar los cambios de propiedad a lo largo del tiempo, puedes usar expresiones para configurar las relaciones matemáticas entre las distintas propiedades, incluida la entrada del usuario. Las animaciones controladas por la entrada permiten crear una interfaz de usuario que responde de forma dinámica y fluida a la entrada del usuario, lo que mejora la interacción con el usuario.

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

Movimiento que se demuestra en la galería de ejemplos de Windows.UI.Composition.

Conserva tu código base actual y haz la adopción de forma incremental

El código de las aplicaciones existentes es una inversión que ya has hecho y que no quieres perder. Puedes migrar islas de contenido para usar la capa visual y mantener el resto de la interfaz de usuario en tu marco de trabajo actual. De esta manera, puedes realizar actualizaciones y mejoras importantes en la interfaz de usuario de la aplicación sin necesidad de hacer cambios significativos en el código base que ya tienes.

Ejemplos y tutoriales

Practica con nuestros ejemplos para aprender a usar la capa visual en tus aplicaciones. Estos ejemplos y tutoriales te ayudarán a empezar a usar la capa visual y te mostrarán 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 de UWP, algunas características tienen limitaciones. Existen algunas limitaciones que hay que tener en cuenta, por ejemplo:

  • Las cadenas de efectos se basan en Win2D para las descripciones de los efectos. El paquete NuGet de Win2D no se admite en las aplicaciones de escritorio, por lo que tendrás que volver a compilarlo a partir del código fuente.
  • Para la prueba de aciertos, tienes que calcular los límites recorriendo el árbol de objetos visuales. Esto es lo mismo que la capa visual en UWP, excepto que, en este caso, no hay ningún elemento XAML con el que puedas enlazar fácilmente para la prueba de aciertos.
  • La capa visual no tiene una primitiva para representar texto.
  • Cuando se usan juntas dos tecnologías de interfaz de usuario diferentes, como WPF y la capa visual, cada una es responsable de dibujar sus propios píxeles en la pantalla y no pueden compartir píxeles. Como resultado, el contenido de la capa visual siempre se representa encima de otro contenido de la interfaz de usuario. (Esto se conoce como el problema de espacio aéreo). Puede que tengas que hacer pruebas y crear código adicional para asegurarte de que el contenido de la capa visual cambie de tamaño con la interfaz de usuario del host y no tape otro contenido.
  • El contenido hospedado en una aplicación de escritorio no cambia de tamaño y el valor de ppp no se escala automáticamente. Puede que tengas que dar algunos pasos adicionales para asegurarte de que el contenido controle los cambios de ppp. (Consulta los tutoriales específicos de la plataforma para más información).

Recursos adicionales

Referencia de la API