Material acrílico

Acrílico es un tipo de pincel que crea una textura translúcida. Puedes aplicar acrílico a las superficies de la app para agregar profundidad y ayudar a establecer una jerarquía visual.

API importantes: clase AcrylicBrush, propiedad Background

Acrílico en tema claro

Acrílico en tema oscuro

Acrylic y Fluent Design System

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala. Acrylic es un componente de Fluent Design System que agrega textura física (material) y profundidad a tu app. Para más información, consulta la Introducción a Fluent Design.

Ejemplos

WinUI 2 Gallery
Si tienes instalada la aplicación WinUI 2 Gallery, haz clic aquí para abrir la aplicación y ver acrílico en acción.

Obtenga la aplicación WinUI 2 Gallery (Microsoft Store)
Obtener el código fuente (GitHub)

Tipos de fusiones de Acrylic

La característica más destacable de Acrylic es su transparencia. Hay dos tipos de fusiones de acrílico que cambian lo que se ve a través del material:

• El acrílico en el fondo revela el fondo de escritorio y otras ventanas que están detrás de la app que está activa, lo que agrega profundidad entre las ventanas de la app, a las vez que sirve de reconocimiento para las preferencias de personalización del usuario.
• El acrílico en la app agrega una sensación de profundidad en el marco de la app y proporciona foco y jerarquía.

Evite superponer varias superficies acrílicas: varias capas de acrílico de fondo pueden crear ilusión ópticas distraídas.

Cuándo usar acrílico

• Usa acrílico en la app para interfaces de usuario que lo admiten, como en las superficies que pueden superponer contenido cuando se desplaza o se interactuar con ellas.
• Usa acrílico en el fondo para los elementos de interfaz de usuario transitorios, como menús contextuales, controles flotantes y elementos de interfaz de usuario con cierre del elemento por cambio de foco.
  El uso de Acrylic en escenarios transitorios ayuda a mantener una relación visual con el contenido que desencadenó la interfaz de usuario transitoria.

Si usas acrílico en la aplicación en superficies de navegación, considera la posibilidad de extender el contenido debajo del panel acrílico para mejorar el flujo de la aplicación. Usar NavigationView hará esto automáticamente. Sin embargo, para evitar crear de efecto de bandas, intenta no colocar varios fragmentos de acrílico de un borde a otro, ya que esto puede crear una costura no deseada entre las dos superficies desenfocadas. Acrylic es una herramienta para aportar armonía visual a sus diseños, pero cuando se usa incorrectamente puede dar lugar a ruido visual.

Ten en cuenta los siguientes patrones de uso para decidir la mejor manera de incorporar el acrílico en la app:

Paneles verticales

Para paneles verticales o superficies que ayudan a seccionar el contenido de la app, recomendamos que uses un fondo opaco en lugar de acrílico. Si los paneles verticales se abren por encima del contenido, como en los modos Compacto o Mínimo de NavigationView, recomendamos usar acrílico en la app para ayudar a mantener el contexto de la página cuando el usuario tiene este panel abierto.

Superficies transitorias

En el caso de las aplicaciones con menús contextuales, controles flotantes, elementos emergentes no modales o paneles de cierre de luz, se recomienda usar acrílico de fondo, especialmente si estas superficies se dibujan fuera del marco de la ventana principal de la aplicación.

Muchos controles XAML dibujan acrílico de forma predeterminada. MenuFlyout, AutoSuggestBox, ComboBox y controles similares con elementos emergentes de cierre de luz usan acrílico mientras están abiertos.

Nota

La representación de superficies acrílicas puede consumir muchos recursos de la GPU, lo que puede aumentar el consumo de energía del dispositivo y reducir la duración de la batería en algunos dispositivos. Los efectos acrílicos se deshabilitan automáticamente cuando un dispositivo entra en modo de ahorro de batería. Los usuarios pueden deshabilitar los efectos acrílicos para todas las aplicaciones desactivando los efectos de transparencia en Configuración Colores > de personalización > .

Facilidad de uso y adaptabilidad

Acrylic adapta automáticamente su aspecto para una amplia variedad de dispositivos y contextos.

En el modo de contraste alto, los usuarios siguen viendo el color de fondo conocido de su elección en lugar del acrílico. Además, tanto el acrílico en el fondo como el acrílico en la app se muestran como un color sólido:

• Cuando el usuario desactiva los efectos de transparencia en Configuración Colores > de personalización > .
• Cuando se activa el modo de ahorro de batería.
• Cuando la aplicación se ejecuta en hardware de gama baja.

Además, solo el acrílico en el fondo reemplazará su translucidez y textura con un color sólido:

• Cuando se desactiva una ventana de aplicación en el escritorio.
• Cuando la aplicación se ejecuta en Xbox, HoloLens o en modo tableta.

Consideraciones sobre la legibilidad

Es importante asegurarse de que cualquier texto que la app presente a los usuarios cumpla con las relaciones de contraste (consulte Requisitos de texto accesible). Hemos optimizado los recursos acrílicos para que el texto cumpla las relaciones de contraste en la parte superior del acrílico. No se recomienda colocar texto de color de énfasis en las superficies acrílicos, ya que es probable que estas combinaciones no superen los requisitos mínimos de relación de contraste en el tamaño de fuente predeterminado de 14 píxeles. Intenta evitar colocar hipervínculos sobre elementos acrílicos. Además, si decide personalizar el color de tono acrílico o el nivel de opacidad, tenga en cuenta el impacto en la legibilidad.

Recursos de temas de Acrylic

Puedes aplicar fácilmente acrílico a las superficies de la aplicación mediante los recursos de tema Xaml AcrylicBrush o AcrylicBrush predefinidos. En primer lugar, tendrás que decidir si vas a usar el acrílico en la app o en el fondo. Para ver las recomendaciones, asegúrate de revisar los patrones comunes de la app que se describieron anteriormente en este artículo.

Hemos creado una colección recursos de temas de pincel para los tipos de acrílico en el fondo y en la app que respetan el tema de la app y se revierten a colores sólidos según sea necesario. Para WinUI 2, estos recursos de tema se encuentran en el archivo Themeresources de AcrylicBrush, en el repositorio de GitHub microsoft-ui-xaml. Los recursos que incluyen Background en sus nombres representan el acrílico en segundo plano, mientras que InApp hace referencia al acrílico en la aplicación.

Para pintar una superficie específica, aplique uno de los recursos de tema de WinUI 2 a los fondos de elementos del mismo modo que aplicaría cualquier otro recurso de pincel.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Pincel de acrílico personalizado

Puedes elegir agregar un tono de color al acrílico de tu app para mostrar una personalización de marca o para aportar equilibrio visual con los otros elementos de la página. Para mostrar color en lugar de escala de grises, debes definir tus propios pinceles de acrílico mediante las siguientes propiedades.

• TintColor: la capa de superposición de color o tono.
• TintOpacity: la opacidad de la capa de tono.
• TintLuminosityOpacity: controla la cantidad de saturación que se permite a través de la superficie acrílica desde el fondo.
• BackgroundSource: el indicador para especificar si quieres acrílico en el fondo o en la app.
• FallbackColor: el color sólido que reemplaza al acrílico en el modo de ahorro de batería. Para el acrílico en el fondo, el color de reversión también reemplaza al acrílico cuando la app no está en la ventana activa del escritorio o cuando la app se ejecuta en un teléfono o Xbox.

Para agregar un pincel de acrílico, define los tres recursos para los temas oscuro, claro y contraste alto. Ten en cuenta que en contraste alto, recomendamos usar una clase SolidColorBrush con el mismo atributo x:Key que la clase AcrylicBrush para oscuro o claro.

Nota

Si no especificas un valor TintLuminosityOpacity, el sistema ajustará automáticamente su valor según TintColor y TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            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"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

En el siguiente ejemplo se muestra cómo declarar AcrylicBrush en el código. Si tu app admite varios destinos de sistema operativo, asegúrate de comprobar que esta API esté disponible en el equipo del usuario.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    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;
}

Extender Acrylic a la barra de título

Para aportar un aspecto impecable a la ventana de la app, puedes usar Acrylic en el área de barra de título. En este ejemplo se extiende Acrylic en la barra de título al establecer las propiedades ButtonBackgroundColor y ButtonInactiveBackgroundColor del objeto ApplicationViewTitleBar en Colors.Transparent.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

Este código se puede colocar en el método OnLaunched de la app (App.xaml.cs), después de la llamada a Window.Activate, tal y como se muestra aquí, o en la primera página de la app.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

Además, tendrás que dibujar el título de la app, que normalmente aparece automáticamente en la barra de título, con una clase TextBlock mediante CaptionTextBlockStyle. Para más información, consulta Personalización de la barra de título.

Cosas que hacer y cosas que evitar

• Use acrílico en superficies transitorias.
• Extiende el acrílico al menos a uno de los bordes de la app para proporcionar una experiencia uniforme al mezclarlo de manera sutil con lo que rodea a la app.
• No pongas acrílico de escritorio en superficies de fondo grandes de tu aplicación.
• No coloque varios paneles acrílicos entre sí porque esto da como resultado una costura visible no deseada.
• No coloques texto de color de énfasis sobre superficies acrílicas.

Cómo se diseñó Acrylic

Ajustamos los componentes clave de Acrylic para llegar a sus propiedades y aspecto exclusivos. Empezamos con translucidez, desenfoque y ruido para agregar profundidad y dimensión visuales a las superficies planas. Agregamos una capa de modo de fusión de exclusión para asegurar el contraste y la legibilidad de la interfaz de usuario colocada en un fondo acrílico. Por último, agregamos tono de color para proporcionar oportunidades de personalización. En conjunto, estas capas dan como resultado un material fresco y utilizable.

La receta de Acrylic: fondo, desenfoque, fusión de exclusión, superposición de color y tono, ruido

Obtención del código de ejemplo

• Ejemplo de la Galería de WinUI 2 : consulta todos los controles XAML en un formato interactivo.

Artículos relacionados

Introducción a Fluent Design