Compartir a través de

Aplicar materiales de Mica o acrílico en aplicaciones de escritorio para Windows 11

Materiales en Windows 11 son efectos visuales aplicados a superficies de la interfaz de usuario que se asemejan a artefactos de la vida real. Los materiales bloqueantes, como Mica y Acrílico, se emplean como capas base bajo los controles interactivos de la interfaz de usuario.

Mica es un material opaco que incorpora el tema y el fondo de pantalla de escritorio del usuario para crear una apariencia muy personalizada. Mica está diseñado para mejorar el rendimiento, ya que solo captura el fondo de pantalla una vez para crear su visualización, por lo que se recomienda para la capa básica de la aplicación, especialmente en el área de la barra de título.

Acrílico es un material semitransparente que replica el efecto de cristal esmerilado. Solo se usa para superficies transitorias que no dejan pasar la luz, como controles flotantes y menús contextuales.

En este artículo se describe cómo aplicar Mica o Acrylic como capa base de la aplicación XAML de Windows App SDK/WinUI 3.

Nota:

Cómo usar un material de fondo

  • API importantes: propiedad Window.SystemBackdrop, clase MicaBackdrop, clase DesktopAcrylicBackdrop, clase SystemBackdropConfiguration

Abrir la aplicación Galería de WinUI 3 y ver los fondos del sistema en acción

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Para aplicar material de Mica o Acrílico a tu aplicación, estableces la propiedad a un SystemBackdrop XAML (normalmente, uno de los fondos integrados, MicaBackdrop o DesktopAcrylicBackdrop).

Estos elementos tienen una propiedad :

  • CommandBarFlyoutCommandBar.SystemBackdrop
  • ContentIsland.SystemBackdrop
  • DesktopWindowXamlSource.SystemBackdrop
  • FlyoutBase.SystemBackdrop
  • MenuFlyoutPresenter.SystemBackdrop
  • Popup.SystemBackdrop
  • Window.SystemBackdrop

Estos ejemplos muestran cómo establecer el telón de fondo del sistema en XAML.

Mica

Mica se usa normalmente como telón de fondo para una ventana de la aplicación.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

Para usar la variante Mica Alt, establezca la propiedad en .

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

Acrylic

Desktop Acrylic se puede usar como telón de fondo para una ventana.

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

Acrílico en la interfaz de usuario transitoria

El acrílico también se usa comúnmente como telón de fondo para la interfaz de usuario transitoria, como un menú desplegable. Puedes establecer esto en XAML o en código, ya que los menús desplegables a menudo se crean dinámicamente.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Avanzado: Cómo usar un controlador de telón de fondo del sistema

Nota:

A partir de Windows App SDK 1.3, puedes aplicar material estableciendo la propiedad Window.SystemBackdrop en un XAML SystemBackdrop tal como se describe en la sección anterior. Esta es la manera recomendada de aplicar un material para la mayoría de las aplicaciones.

En el resto de este artículo se muestra cómo usar las API Composition MicaController y DesktopAcrylicController , que proporcionan más control sobre el comportamiento de fondo.

Para usar un material de fondo en su aplicación, puede utilizar uno de los controladores que implementa la interfaz ISystemBackdropController (MicaController o DesktopAcrylicController). Estas clases administran tanto la representación del material de fondo del sistema como el control de la directiva del sistema del material.

Para usar Mica como material de fondo, cree un objeto MicaController. Para usar Acrílico, cree un objeto DesktopAcrylicController. El código de configuración y complementario es el mismo para cada tipo de material de fondo del sistema.

Creación de un MicaController

  • C#
  • C++ 
MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

Creación de un DesktopAcrylicController

  • C#
  • C++ 
DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

El controlador reacciona a los temas Claro y Oscuro del sistema de forma predeterminada. Para invalidar este comportamiento, puede establecer las siguientes propiedades en el controlador:

  • FallbackColor
  • LuminosidadOpacidad
  • TintColor
  • OpacidadDelTinte

Nota:

Después de personalizar cualquiera de las cuatro propiedades del controlador, ya no aplica los valores predeterminados de Claro u Oscuro cuando el `SystemBackdropConfiguration.Theme` asociado cambia. Debe actualizar manualmente esas propiedades para que coincidan con el nuevo tema.

Para usar el material de fondo de la aplicación, se requieren los siguientes elementos:

  • Compatibilidad del sistema

    El sistema donde se ejecuta la aplicación debe admitir el material de fondo. Llame al método MicaController.IsSupported o DesktopAcrylicController.IsSupported para asegurarse de que el material de fondo se admita en tiempo de ejecución.

  • Un destino válido

    Debe proporcionar un destino que implemente la interfaz ICompositionSupportsSystemBackdrop. En una aplicación XAML, la ventana de XAML implementa esta interfaz y se usa como destino de fondo.

  • Un objeto SystemBackdropConfiguration

    SystemBackdropConfiguration proporciona al controlador de fondo del sistema información de directiva específica de la aplicación para configurar correctamente el material de fondo del sistema.

  • Un objeto DispatcherQueue

    Necesita un objeto Windows.System.DispatcherQueue disponible en el subproceso XAML principal. Llame para asegurarse de que existe uno.

Ejemplo: Uso de Mica con un controlador en una aplicación WinUI

En este ejemplo se muestra cómo configurar el material de fondo de Mica mediante un controlador en una aplicación XAML.

Sugerencia

Vea también estos proyectos de ejemplo en GitHub:

C#: SampleSystemBackdropsWindow en la Galería de WinUI.

C++/WinRT: Windows App SDK ejemplo de Mica.

  • C#
  • C++ 
using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}
  • Last updated on