Introducción a la capa visual

La capa visual proporciona una API de alto rendimiento, modo retenido para gráficos, efectos y animaciones, y es la base para todas las interfaces de usuario en todos los dispositivos Windows. La interfaz de usuario se define de forma declarativa y la capa visual se basa en la aceleración de hardware gráfico para asegurarse de que el contenido, los efectos y las animaciones se representan de forma fluida y sin problemas independientemente del subproceso de la interfaz de usuario de la aplicación.

Los tipos de Microsoft.UI.Composition forman la implementación de Windows App SDK/WinUI 3 de la capa visual.

Aspectos destacados importantes:

• API de WinRT conocidas
• Diseñado para interacciones y interfaz de usuario más dinámicas
• Conceptos alineados con herramientas de diseño
• Escalabilidad lineal sin acantilados repentinos de rendimiento

Las aplicaciones de WinUI y Windows App SDK ya usan la capa Visual a través de uno de los marcos de interfaz de usuario. También puede aprovechar la capa visual directamente para la representación personalizada, los efectos y las animaciones con muy poco esfuerzo.

¿Qué hay en la capa visual?

Las funciones principales de la capa visual son:

1. Contenido: composición ligera de contenido dibujado personalizado
2. Efectos: sistema de efectos de la interfaz de usuario en tiempo real cuyos efectos se pueden animar, encadenar y personalizar
3. Animaciones: animaciones expresivas y independientes del marco que se ejecutan independientemente del subproceso de la interfaz de usuario

Contenido

El contenido se hospeda, transforma y pone a disposición para su uso por parte del sistema de animaciones y efectos utilizando recursos visuales. En la base de la jerarquía de clases se encuentra la clase Visual, un proxy ligero, ágil en el manejo de subprocesos dentro del proceso de la aplicación para el estado visual en el compositor. Las subclases de Visual incluyen ContainerVisual para permitir que los elementos hijos creen árboles de objetos visuales y SpriteVisual que contiene contenido y se puede pintar con colores sólidos, contenido personalizado o efectos visuales. Juntos, estos tipos de objetos visuales componen la estructura de árbol visual para la interfaz de usuario 2D y subyacen a los elementos del marco de trabajo XAML más visibles.

Para obtener más información, consulte la introducción al Composition Visual.

Efectos

El sistema Efectos de la capa visual permite aplicar una cadena de efectos de filtro y transparencia a un objeto visual o a un árbol de objetos visuales. Se trata de un sistema de efectos de la interfaz de usuario, no confundirse con los efectos de imagen y multimedia. Los efectos funcionan junto con el sistema de animación, lo que permite a los usuarios lograr animaciones suaves y dinámicas de propiedades Effect, representadas independientemente del subproceso de la interfaz de usuario. Los efectos de la capa visual proporcionan los bloques de creación creativos que se pueden combinar y animar para construir experiencias personalizadas e interactivas.

Además de las cadenas de efectos animables, la capa visual también admite un modelo de iluminación que permite a los objetos visuales imitar las propiedades del material respondiendo a las luces animables. Los elementos visuales también pueden proyectar sombras. La iluminación y las sombras se pueden combinar para crear una percepción de profundidad y realismo.

Para obtener más información, consulte la descripción general de los efectos de composición.

Animaciones

El sistema de animación de la capa visual permite mover objetos visuales, animar efectos e impulsar transformaciones, clips y otras propiedades. Es un sistema independiente del marco que se ha diseñado desde el principio con el rendimiento en mente. Se ejecuta independientemente del subproceso de la interfaz de usuario para garantizar la fluidez y la escalabilidad. Aunque permite usar animaciones de fotograma clave conocidas para impulsar los cambios de propiedad a lo largo del tiempo, también le permite configurar relaciones matemáticas entre diferentes propiedades, incluida la entrada del usuario, lo que le permite crear experiencias coreografiadas de manera directa y sin problemas.

Para obtener más información, consulte la introducción a las animaciones de composición.

Trabajando con WinUI XAML

Puedes obtener un objeto Visual creado por el marco XAML y respaldar un FrameworkElement visible mediante la clase ElementCompositionPreview en Microsoft.UI.Xaml.Hosting. Tenga en cuenta que los objetos visuales creados por el marco incluyen algunos límites de personalización. Esto se debe a que el marco administra desplazamientos, transformaciones y duraciones. Sin embargo, puede crear sus propios objetos visuales y adjuntarlos a un elemento WinUI existente a través de ElementCompositionPreview o agregandolos a un ContainerVisual existente en algún lugar de la estructura del árbol visual.

Para obtener más información, consulta La introducción al uso de la capa visual con XAML .

Trabajar con la aplicación de escritorio

Puede usar la capa visual para mejorar la apariencia, la sensación y la funcionalidad de las aplicaciones de escritorio win32 creadas con el SDK de aplicaciones de Windows, así como las aplicaciones de escritorio de WPF, Windows Forms y C++ Win32. 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.

Para más información, consulta Modernización de una aplicación de escritorio mediante la capa visual.

Diferencias con respecto a UWP

El espacio de nombres Microsoft.UI.Composition proporciona acceso a la funcionalidad que es casi idéntica a la capa visual de UWP (Windows.UI.Composition), en los escenarios más usados. Pero hay excepciones y diferencias.

Obtención de una instancia de Compositor

En las aplicaciones de escritorio (una aplicación winUI es una aplicación de escritorio), Window.Current es null. Por lo tanto, no puede recuperar una instancia de Compositor de Window.Current.Compositor. En las aplicaciones WinUI, se recomienda llamar a ElementCompositionPreview.GetElementVisual(UIElement) para obtener un Visual de composición y luego recuperar el Compositor de la propiedad del Compositor del visual. En los casos en los que no tenga acceso a un UIElement (por ejemplo, si crea un CompositionBrush en una biblioteca de clases), puede llamar a CompositionTarget.GetCompositorForCurrentThread.

Contenido externo

El compositor de Microsoft.UI.Composition se ejecuta completamente dentro de una aplicación del SDK de Windows App y solamente puede acceder a los píxeles que ha dibujado. Esto significa que cualquier contenido externo (contenido no dibujado por el compositor) es desconocido para el compositor, lo que crea ciertas limitaciones.

Un ejemplo de contenido externo es el (Microsoft.UI.Xaml.Controls) MediaPlayerElement. La pila multimedia de Windows proporciona a XAML un identificador de cadena de intercambio de medios opaco. XAML proporciona ese controlador al compositor, que a su vez lo entrega a Windows (a través de Windows.UI.Composition) para mostrar. Puesto que el compositor no puede ver ninguno de los píxeles de la cadena de intercambio multimedia, no puede componerlo como parte de la representación general de la ventana. En su lugar, delega la cadena de intercambio multimedia a Windows para que esta se renderice debajo de la representación del compositor, creando un espacio en la representación del compositor para permitir que la cadena de intercambio multimedia por debajo sea visible.

En windows App SDK/WinUI, todas las API siguientes crean contenido externo:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop y DesktopAcrylicBackdrop, así como los MicaController y DesktopAcrylicController subyacentes que usan.

El modelo de control de contenido externo crea estas limitaciones:

• No es posible tener contenido compositor detrás del contenido externo. Por ejemplo, no es posible proporcionar un fondo transparente a WebView2 para ver los botones xaml o las imágenes detrás de él. Las únicas cosas que pueden estar detrás del contenido externo son otro contenido externo y el fondo de la ventana. Por eso, desaconsejamos o deshabilitamos la transparencia del contenido externo.
• No es posible obtener muestras de contenido compositor del contenido externo. Por ejemplo, AcrylicBrush no puede muestrear ni desenfocar ningún píxel paraMediaPlayerElement. AcrylicBrush tomará muestras de la imagen del compositor, que es negro transparente en las áreas de contenido externo. Del mismo modo, AcrylicBrush delante de una MicaBackdrop o DesktopAcrylicBackdrop no podrá ver los colores que dibujarán esos fondos y en cambio, el pincel desenfocará el negro transparente.
• Otro escenario se conoce como inversión de destino, que se usa para el cursor de inserción de texto en los controles de cuadro de entrada para invertir los píxeles frente a los cuales está el cursor de inserción. Esto refleja de manera similar los muestreos de la superficie del compositor y se verá afectado si el cuadro de texto no tiene un fondo opaco renderizado por el compositor.
• Dado que WinUI SwapChainPanel crea contenido externo, no admite transparencia. Tampoco admite la aplicación de AcrylicBrush y de otros efectos que utilizan un CompositionBackdropBrush delante de él.

Muestras

El proyecto Ejemplos del SDK de aplicaciones de Windows incluye un conjunto completo de ejemplos de composición que muestran cómo usar las API Microsoft.UI.Composition para crear experiencias visuales enriquecidas. Estos ejemplos abarcan una amplia gama de escenarios, desde el diseño básico y las transformaciones hasta efectos avanzados, iluminación, sombras y manipulación de entrada basada en InteractionTracker, como actualización mediante arrastre y desplazamiento parallax. Tanto si va a empezar a trabajar con la capa visual como si busca patrones para aplicarlos en su propia aplicación, estos ejemplos son una referencia práctica para ver cómo se unen los bloques de creación.

Explore los ejemplos en GitHub: WindowsAppSDK-Samples /SceneGraph.

Temas relacionados

• Referencia de la API Microsoft.UI.Composition
• Uso de la capa Visual en aplicaciones de escritorio