UWP App en tiempo real desenfoque de fondo con DX Compositor

Así que la compatibilidad con la composición de UWP ha estado fuera por un tiempo. Estoy buscando una manera de hacer borrosos en tiempo real de los elementos (desenfoque en tiempo real a medida que se mueven o cargan, no instantánea estática). Hasta ahora he estado buscando respuestas en stackoverflow y google, lo que me llevó a utilizar Lumia Imaging SDK Sample y Win2D. Ninguno de ellos es lo suficientemente bueno para el soporte borroso en tiempo real. Sé que hacer blur en tiempo real es posible en la composición porque he visto demos de videos borrosos y hay un proyecto XAMLFx obsoleto que te permite difuminar casi cualquier cosa con las aplicaciones de DX on 8.1.

No quiero usar RenderTargetBitmap (quiero mantener mi UI thread libre). ¿Cómo puedo hacerlo solo usando API de composición?

 ContainerVisual rootVisual = GetVisual(this.Content); Compositor compositor = rootVisual.Compositor; // what next? 

Cualquier ayuda es muy apreciada 🙂

Nota: Estas características (desenfoque y el pincel de fondo) requieren la actualización de aniversario de Windows 10. Actualmente puede obtener una vista previa del SDK a través del progtwig Windows Insider

Requisitos previos

  1. Orientación a la actualización de aniversario de Windows 10
  2. Una comprensión básica de la Capa Visual y cómo funciona el Árbol Visual. Puedes encontrar más aquí .

Además, puede consultar un artículo que escribí aquí , que es una forma rápida de comenzar a usar la API de composición dentro de una aplicación XAML. También muestra el uso de un efecto. No solo eso, sino que también cubre cargar una imagen usando la API de composición (con un paquete que escribí).

Empezando

Hay dos formas de consumir un efecto de desenfoque en las API de composición. Uno es como un efecto normal que se aplica a una sola superficie. El otro es usarlo como un pincel “Telón de fondo” que toma todo el contenido detrás de él y lo desenfoca.

Para usar un efecto de desenfoque, debe usar una definición GaussianBlurEffect de Win2D. Eso dice algo como esto:

 GaussianBlurEffect blurEffect = new GaussianBlurEffect() { Name = "Blur", BlurAmount = 0.0f, // You can place your blur amount here. BorderMode = EffectBorderMode.Hard, Optimization = EffectOptimization.Balanced, Source = new CompositionEffectSourceParameter("source") }; 

El siguiente paso es crear una fábrica de efectos:

 var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] {"Blur.BlurAmount"}); 

El segundo parámetro no es necesario, pero siempre que lo permita, puede animar o cambiar la propiedad con nombre después de comstackr el efecto. En este caso, ahora podemos cambiar o animar el BlurAmount. Esto es útil si quiere reutilizar su fábrica de efectos de desenfoque para crear múltiples pinceles de efectos de desenfoque, pero haga que todos usen un BlurAmount diferente.

El siguiente paso varía según cómo desee que funcione el efecto.

Superficie única

Si desea que se aplique solo a una sola superficie, haría lo siguiente:

 var effectBrush = effectFactory.CreateBrush(); effectBrush.SetSourceParameter("source", someOtherSurfaceBrush); visual.Brush = effectBrush; 

Fondo

Sin embargo, si desea difuminar gran cantidad de contenido de forma dinámica detrás de un visual determinado, debería hacer lo siguiente:

 var effectBrush = effectFactory.CreateBrush(); effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush()); visual.Brush = effectBrush; 

Tenga en cuenta que esto se ve muy similar al primer método, pero en lugar de darle un pincel de superficie le da un BackdropBrush. Esto tomará el contenido detrás del visual en tiempo real y lo alimentará a la fuente de su efecto. En este caso, cualquier cosa “detrás” de lo visual se verá borrosa.

Actuación

Si solo está difuminando una sola imagen, es mejor difuminar la superficie individual. Debería intentar usar solo BackdropBrush cuando realmente lo necesite.

¡Muestrame mas!

Para ver más, dirígete a nuestra página de GitHub . Hemos creado un control XAML personalizado que debería ayudarlo aquí , y puede verlo en acción aquí . También puede ver // la conversación de construcción aquí .