Compartir a través de

Mejora de la interfaz de usuario con la capa visual (Windows App SDK/WinUI)

La capa Visual de la Windows App SDK/WinUI proporciona una API de alto rendimiento y 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 Windows App SDK/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 funcionalidades que faltan de la capa visual de Windows App SDK/WinUI.

Diferencias con respecto a 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 usados. Pero hay excepciones y diferencias.

El Windows App SDK/WinUI usa Microsoft.UI.Composition para describir un árbol de objetos visuales individuales. A continuación, esos elementos visuales se componen para generar 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 Windows App SDK, y tiene acceso solo a los 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, 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. 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 Windows App SDK/WinUI, 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 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. 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 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. AcrylicBrush y estos otros efectos basados en CompositionBackdropBrushno pueden muestrear desde un SwapChainPanel.
  • 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 XAML (winUI y UWP), se recomienda llamar a ElementCompositionPreview.GetElementVisual(UIElement) para obtener un objeto Visual de composición y recuperar el Compositor de la propiedad Compositor del objeto 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.

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 de Microsoft.UI.Composition en el Windows App SDK/WinUI:

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

Para obtener más información sobre la disponibilidad de Microsoft.UI.Composition en el Windows App SDK/WinUI, consulte canales de versión.

Hemos actualizado la Galería de ejemplos de composición de Windows para que ahora dependa de las API de composición de Windows App SDK. Visite WindowsCompositionSamples para ver las API microsoft.UI.Composition en acción.

gif de la aplicación

  • Last updated on