¿Cómo usar Acrylic Accent en Windows 10 Creators Update?

No puedo encontrar ningún documento detallado para usar Acrylic Accent ( CreateBackdropBrush ). Encontré una publicación en StackOverflow que es algo útil, pero no ayuda a comenzar. Por lo tanto, crea una respuesta detallada a esta publicación para que todos puedan aprender.

Actualizar:

Microsoft ha publicado un documento oficial de material acrílico

Nota:

Si alguien no sabe sobre Acrylic Accent. Acrylic Accent es la nueva característica en Windows 10 Creators Update que permite que el fondo de la aplicación sea borroso y transparente. enter image description here enter image description here

ACTUALIZACIÓN DEL CREADOR

XAML

Debe usar un componente que coloque en el fondo de su aplicación, digamos un RelativePanel

      

El segundo RelativePanel se utiliza para establecer el color de sombra por encima del desenfoque.

.CS

Y luego puedes usar el siguiente código:

 private void applyAcrylicAccent(Panel panel) { _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; _hostSprite = _compositor.CreateSpriteVisual(); _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight); ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite); _hostSprite.Brush = _compositor.CreateHostBackdropBrush(); } Compositor _compositor; SpriteVisual _hostSprite; 

y llamándolo con applyAcrylicAccent(MainGrid); También necesitarás manejar el evento SizeChanged:

 private void Page_SizeChanged(object sender, SizeChangedEventArgs e) { if (_hostSprite != null) _hostSprite.Size = e.NewSize.ToVector2(); } 

Por supuesto, necesitará estar en la Actualización del creador para ejecutar esto, CreateHostBackdropBrush () no funcionará en un dispositivo móvil o en modo tableta.

Además, tenga en cuenta que el panel o la cuadrícula que configure con un color acrílico no podrá mostrar ningún control (hasta ahora lo he probado). Entonces necesita usar su panel relativo sin control alguno.

Barra de título transparente

La transparencia de la barra de título se puede configurar con el siguiente código

 ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar; formattableTitleBar.ButtonBackgroundColor = Colors.Transparent; CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar; coreTitleBar.ExtendViewIntoTitleBar = true; 

Aquí un ejemplo de lo que genera el código anterior (con algunas otras cosas también). Ejemplo

Actualización de otoño 10.0.16190 y superior

Como menciona Justin XL en una respuesta a continuación, a partir de la comstackción 16190 y posteriores, los desarrolladores tienen acceso a diferentes pinceles acrílicos ubicados en Windows.UI.Xaml.Media ( API de acrílico ) y las directrices de Microsoft: directrices de material acrílico

En Creators Update Insider Preview 16193 (junto con Windows 10 SDK 16190 ), hay un nuevo AcrylicBrush que puede aplicar directamente en su elemento como un SolidColorBrush normal.

       

Tenga en cuenta que puede cambiar BackgroundSource to Backdrop para muestrear desde el contenido de la aplicación en lugar del contenido detrás de la ventana de la aplicación. También asegúrese de definir un FallbackColor apropiado porque perderá el efecto acrílico cuando la ventana de la aplicación haya perdido el foco o el dispositivo esté en modo de ahorro de batería.

Nota

Esto solo funcionará con Windows 10 Insider Preview (v10.0.16190.0 y superior). Si desea usarlo en Creators Update, verifique la respuesta de Sven Borden.

Puede unirse al progtwig Windows 10 Insider Preview aquí

Puede unirse Descargar la versión preliminar del SDK de Windows 10 Build 16190 aquí

Recursos de acrílico

Los recursos denominados Acrylic \ WindowBrush * representan el acrílico de fondo, mientras que Acrylic \ ElementBrush * hace referencia al acrílico integrado en la aplicación.

Tecla de recurso -> opacidad de tinte -> color de retorno

SystemControlAcrylicWindowBrush -> 80% -> ChromeMedium

SystemControlAcrylicElementBrush -> 80% -> ChromeMedium

SystemControlAcrylicMediumHighWindowBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumHighElementBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumWindowBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicMediumElementBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush -> 70% -> SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush -> 70% -> SystemAccentColorDark2

Para pintar una superficie específica, aplique uno de los recursos del tema anterior a los fondos de elementos tal como lo haría con cualquier otro recurso de pincel

  

Cepillo de acrílico personalizado

  • TintColor: la capa de superposición de color / tinte. Considere especificar tanto el valor del color RGB como la opacidad del canal alfa.

  • TintOpacity: la opacidad de la capa de tinte. Recomendamos 80% de opacidad como punto de partida, aunque diferentes colores pueden parecer más convincentes en otras transparencias.

  • BackgroundSource: el indicador para especificar si desea fondo o acrílico integrado en la aplicación.

  • FallbackColor: el color sólido que reemplaza el acrílico en modo de batería baja. Para acrílico de fondo, el color alternativo también reemplaza el acrílico cuando su aplicación no se encuentra en la ventana del escritorio activo o cuando la aplicación se ejecuta en el teléfono y Xbox.

                

El siguiente ejemplo muestra cómo declarar AcrylicBrush en el código. Si su aplicación admite múltiples objectives de sistema operativo, asegúrese de verificar que esta API esté disponible en la máquina del usuario.

 if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase")) { Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush(); myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop; myBrush.TintColor = Color.FromArgb(255, 202, 24, 37); myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37); myBrush.TintOpacity = 0.6; grid.Fill = myBrush; } else { SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37)); grid.Fill = myBrush; } 

Extendiendo acrílico en tu barra de título

 CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true; ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar; titleBar.ButtonBackgroundColor = Colors.Transparent; titleBar.ButtonInactiveBackgroundColor = Colors.Transparent; 

Fuente: material acrílico