Compartir a través de

Acrílico en la aplicación

Puedes aplicar acrílico dentro de la aplicación a las superficies de la aplicación mediante un XAML AcrylicBrush o recursos de tema predefinidos AcrylicBrush.

Abra la aplicación De la Galería de WinUI y vea Acrílico en acción

WinUI incluye una colección de recursos temáticos de brochas que respetan el tema de la aplicación y recurren a colores sólidos según sea necesario. Para pintar una superficie específica, aplique uno de los recursos de tema a los fondos de los elementos de la misma manera que aplicaría cualquier otro recurso de pincel.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Nota:

Puede ver estos recursos en el archivo de recursos del tema AcrylicBrush, en el repositorio de GitHub microsoft-ui-xaml.

Pincel de acrílico personalizado

Puedes optar por agregar un tono de color al acrílico de la aplicación para mostrar la personalización de marca o proporcionar equilibrio visual con otros elementos de la página. Para mostrar el color en lugar de la escala de grises, debe definir sus propios pinceles acrílicos mediante las siguientes propiedades.

  • TintColor: la capa superpuesta de color o tono.
  • TintOpacity: la opacidad de la capa de tinte.
  • TintLuminosityOpacity: controla la cantidad de saturación que se permite pasar a través de la superficie acrílica desde el fondo.
  • FallbackColor: el color sólido que reemplaza al acrílico en el modo de ahorro de batería. En el caso del acrílico de fondo, el color de reserva también reemplaza el acrílico cuando la aplicación no está en la ventana de escritorio activa.

Muestras de acrílico con tema claro

Muestras de acrílico con tema oscuro

Opacidad de luminosidad comparada con opacidad de tinte

Para agregar un pincel acrílico, defina los tres recursos para temas oscuros, claros y de contraste alto. En contraste alto, recomendamos usar una clase SolidColorBrush con el mismo x:Key que la clase AcrylicBrush para oscuro o claro.

Nota:

Si no especifica un valor TintLuminosityOpacity, el sistema ajustará automáticamente su valor en función de su TintColor y TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

En el ejemplo siguiente se muestra cómo declarar un AcrylicBrush en el código.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;
  • Last updated on