Compartir a través de

Mejora de la interfaz de usuario con la capa visual (SDK de Aplicaciones para Windows/WinUI 3)

  • Artículo

La capa Visual de SDK de Aplicaciones de Windows/WinUI 3 proporciona una API de alto rendimiento, modo retenido para gráficos, efectos, animaciones y entrada. Es la base para toda la interfaz de usuario en todos los dispositivos Windows.

Los tipos de Microsoft.UI.Composition forman la implementación de SDK de Aplicaciones de Windows/WinUI 3 de la capa visual. Es muy parecida a la Capa visual de UWP, que se implementa en el espacio de nombres Windows.UI.Composition. A continuación se detallan las diferencias entre las dos y las funciones que faltan de la capa visual de SDK de Aplicaciones para Windows/WinUI 3.

Diferencias de UWP

La diferencia más obvia entre Microsoft.UI.Composition y la capa visual de UWP es el espacio de nombres. Microsoft.UI.Composition proporciona acceso a la funcionalidad que es casi idéntica a la de la capa visual de UWP en los escenarios más utilizados. Pero hay excepciones y diferencias.

Windows App SDK/WinUI 3 usa Microsoft.UI.Composition para describir un árbol de objetos visuales individuales. A continuación, esos objetos visuales se crean para crear la representación completa de la ventana. Es muy similar a cómo funciona Windows.UI.Composition (para aplicaciones para UWP). Pero una gran diferencia es que el compositor Microsoft.UI.Composition se ejecuta completamente dentro de una aplicación de SDK de Aplicaciones para Windows; y solo tiene acceso a píxeles que ha dibujado. Esto significa que cualquier contenido externo (contenido que no ha sido 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. En concreto, dado 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, proporciona la cadena de intercambio multimedia a Windows para representarla debajo de la representación del compositor, con un agujero cortado de la representación del compositor para permitir que la cadena de intercambio multimedia debajo de él sea visible. Esta es una visualización de esta configuración.

Diagrama de representación de contenido externo

En general, el enfoque permite que el contenido externo (como las cadenas de intercambio) forme parte de la representación general de la ventana; y aún permite que otros contenidos dibujados por el compositor se superpongan sobre el contenido externo, por ejemplo, la representación de MediaTransportControls de XAML sobre el medio. Sin embargo, no permite interacciones de efectos más avanzadas con este contenido externo. Esto se aplica a todos los enfoques que se pueden usar para conectar una cadena de intercambio a una vista: ya sea a través de XAML (por ejemplo, a través de SwapChainPanel) o a través de Composition (por ejemplo, mediante ICompositorInterop::CreateCompositionSurfaceForSwapChain).

En el SDK de Aplicaciones para Windows/WinUI 3, todas las API siguientes crean contenido externo.

El modelo, descrito anteriormente, de controlar el contenido externo crea estas limitaciones:

  • No es posible tener contenido de compositor detrás del contenido externo (es decir, detrás o debajo de las capas externas del diagrama anterior). Por lo tanto, por ejemplo, no es posible dar a un WebView2 un fondo transparente para poder ver los botones o imágenes XAML 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 tener un ejemplo de contenido compositor del contenido externo. Por ejemplo, AcrylicBrush no puede muestrear ni desenfocar ningún píxel paraMediaPlayerElement. AcrylicBrush muestra de la imagen del compositor, que es negro transparente para áreas de contenido externo. Para que el negro transparente sea lo que AcrílicoBrush desenfoque. 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 símbolo de intercalación de controles de cuadro de texto para invertir los píxeles de los que está delante el símbolo de intercalación de texto. Esto invierte de forma similar muestras de la superficie del compositor y se verá afectada si el cuadro de texto no tiene un fondo opaco dibujado por el compositor.
  • Dado que el SwapChainPanel de WinUI 3 crea contenido externo, no admite transparencia. Tampoco admite la aplicación AcrylicBrush y otros efectos que usan CompositionBackdropBrush delante de él. AcrylicBrush y estos otros efectos basados en CompositionBackdropBrushno pueden muestrear desde un SwapChainPanel.
  • En las aplicaciones de escritorio (una aplicación WinUI 3 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 XAML (WinUI 3 y UWP), se recomienda llamar a ElementCompositionPreview.GetElementVisual(UIElement) para obtener una composición Visual, y recuperar el Compositor de la propiedad Compositor del objeto visual. En los casos en los que no tenga acceso a UiElement (por ejemplo, si crea un CompositionBrush en una biblioteca de clases), puede llamar a CompositionTarget.GetCompositorForCurrentThread.

Para obtener más información sobre la capa visual, consulta la Información general de la capa visual en la documentación de UWP. En la mayoría de los casos, la documentación y los ejemplos también se aplican a Microsoft.UI.Composition.

Requisitos previos para usar Microsoft.UI.Composition

Para usar las API Microsoft.UI.Composition en SDK de Aplicaciones para Windows/WinUI 3:

  1. Descargue e instale la versión experimental más reciente del SDK de Aplicaciones para Windows. Para obtener más información, consulte Empezar a desarrollar aplicaciones de Windows.
  2. Cree un nuevo proyecto como se describe en Inicio del desarrollo de aplicaciones de Windows o siga las instrucciones para usar el SDK de Aplicaciones para Windows en un proyecto existente.

Para obtener más información acerca de la disponibilidad de Microsoft.UI.Composition en SDK de Aplicaciones para Windows/WinUI 3, consulte canales de versión.

Hemos actualizado la Galería de ejemplos de composición de Windows para que ahora tome una dependencia de las API de composición de SDK de Aplicaciones para Windows. Visite WindowsCompositionSamples para ver las API Microsoft.UI.Composition en acción.

gif de la aplicación