c# - acrylic - fluent design windows 10

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

Question

No puedo encontrar ningún documento detallado para usar Acrylic Acento ( CreateBackdropBrush ). Encontré una post en StackOverflow que es algo útil pero no ayuda para comenzar. Así que por favor 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 de Acrílico Acento. Acrylic Acent es la nueva característica de Windows 10 Creators Update que permite que el fondo de la aplicación sea borroso y transparente.

Answer 1

ACTUALIZACIÓN DEL CREADOR

XAML

Necesitas usar un componente que pones en el fondo de tu aplicación, digamos un RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

El segundo RelativePanel se usa para establecer el color de la sombra por encima de Blur.

.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, tendrá que 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 estableció con un color acrílico no podrá mostrar ningún control (hasta el momento no lo he probado). Así que necesitas usar tu panel relativo sin ningún control en él.

Barra de título transparente

La transparencia de la barra de título podría establecerse usando 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 agregadas también).

Actualización de otoño 10.0.16190 y superior

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

Answer 2

En la versión preliminar 16193 (junto con Windows 10 SDK 16190 ), hay una nueva AcrylicBrush que puedes aplicar directamente en tu elemento como si fuera una SolidColorBrush normal.

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="{StaticResource HostBackdropBrush}" />
</Page>

Tenga en cuenta que puede cambiar BackgroundSource a Backdrop para obtener una muestra del 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 enfoque o el dispositivo esté en modo de ahorro de batería.

Answer 3

Nota

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

Puede unirse al programa Windows 10 Insider Preview here

Puede unirse a Descargar Windows 10 SDK Preview Build 16190 here

Recursos temáticos acrílicos.

Los recursos denominados Acrylic / WindowBrush * representan el fondo acrílico, mientras que Acrylic / ElementBrush * se refiere al acrílico integrado en la aplicación

Clave de recurso -> Opacidad de tinte -> Color de retroceso

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 aplicaría cualquier otro recurso de pincel

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Pincel acrílico personalizado

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

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

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

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

  <ResourceDictionary.ThemeDictionaries>
  <ResourceDictionary x:Key="Default">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FF7F0000"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="MyAcrylicBrush"
          Color="{ThemeResource SystemColorWindowColor}"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="Light">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FFFF7F7F"/>
  </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>

El siguiente ejemplo muestra cómo declarar AcrylicBrush en el código. Si su aplicación admite múltiples objetivos de SO, 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 el 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.