Materiales en aplicaciones de Windows

Los materiales son efectos visuales aplicados a las superficies de la interfaz de usuario para crear profundidad, jerarquía e interés visual. WinUI 3 proporciona cuatro mecanismos para aplicar materiales, cada uno adecuado para un escenario diferente.

Importante

AcrylicBrush es solo Acrylic dentro de la aplicación: difumina el contenido XAML dentro de la ventana de la aplicación. No muestra el escritorio ni otras ventanas detrás de la aplicación. Para efectos de transparencia en el escritorio, utiliza Window.SystemBackdrop o SystemBackdropElement.

¿Qué material debo usar?

Escenario Material API
Ventana de la aplicación con fondo Mica (teñido con fondo de pantalla) Mica Window.SystemBackdrop = new MicaBackdrop()
Ventana de la aplicación con un fondo translúcido de cristal esmerilado Acrílico de escritorio Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Menú flotante, ventana emergente o menú contextual con fondo de Acrylic Fondo del sistema en una superficie Se establece SystemBackdrop en FlyoutBase, Popup, etc.
Barra lateral, panel o elemento con Mica o Acrílico (no toda la ventana) SystemBackdropElement <SystemBackdropElement> control
Panel de navegación o panel de contenido con un efecto de desenfoque en la aplicación Acrylic dentro de la aplicación {ThemeResource AcrylicInAppFillColorDefaultBrush}

Sin material (valor predeterminado)

Cuando no se aplica ningún material, el fondo de la ventana es un color sólido dibujado del tema claro o oscuro activo, sin desenfoque ni translucencia.

Captura de pantalla de una ventana de la aplicación WinUI 3 sin material aplicado, en la que se muestra un fondo blanco plano.

Los materiales dependen de efectos de composición que requieren soporte de hardware y las preferencias del usuario. WinUI 3 recurre de forma elegante a un color sólido cuando no se puede mostrar un material:

  • Escritorio remoto o máquinas virtuales: el compositor no puede fusionarse con el contenido del escritorio a través de RDP, por lo que los materiales SystemBackdrop se sustituyen automáticamente.
  • Hardware gráfico insuficiente : Mica y Desktop Acrylic requieren DirectX 11 y memoria GPU adecuada. Los dispositivos que no cumplen el umbral recurren a un color de tema sólido.
  • Efectos de transparencia deshabilitados: si el usuario desactiva los efectos de transparencia en Configuración > Colores de personalización>, todos los SystemBackdrop materiales y AcrylicBrush recurren a sus alternativas de color sólido.
  • Modo de ahorro de batería activo — Windows desactiva el acrílico (DesktopAcrylicBackdrop y AcrylicBrush) cuando el modo de ahorro de batería está activado. Mica no se ve afectada.
  • Modo de contraste alto : se suprimen todos los materiales; En su lugar, el sistema aplica colores de tema de contraste alto.

Tu aplicación no necesita detectar estas condiciones: las API administran el recurso alternativo automáticamente. Asegúrate de que cualquier FallbackColor o fondo temático que configures se vea bien como un color liso y uniforme.

Mica

Mica incorpora el color del fondo de pantalla del escritorio del usuario en un fondo silenciado y personalizado. Está diseñado para el fondo de la ventana principal de la aplicación, especialmente en las áreas de la barra de título y del panel de navegación.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Variantes: MicaKind.Base (valor predeterminado) o MicaKind.BaseAlt (más claro, para superficies secundarias)
  • Windows versión: solo Windows 11. Vuelve a un color de tema sólido en Windows 10.

Captura de pantalla de una aplicación WinUI 3 con MicaBackdrop aplicada, que muestra un fondo azul-gris sutil tintado por el fondo de escritorio del usuario.

Acrílico de escritorio

Desktop Acrylic muestra una vista dinámica y borrosa del escritorio y el contenido detrás de la ventana de la aplicación, creando una apariencia de vidrio escarchado.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Variantes: DesktopAcrylicKind.Base (más opaca) o DesktopAcrylicKind.Thin (más transparente)
  • Windows versión: Windows 10 (compilación 17763) y versiones posteriores.

Captura de pantalla de una aplicación WinUI 3 con DesktopAcrylicBackdrop aplicado, en la que se aprecia un desenfoque tipo cristal esmerilado del contenido del escritorio detrás de la ventana.

El acrílico también se puede aplicar a superficies transitorias, establecidas SystemBackdrop en FlyoutBase, Popup, MenuFlyoutPresentero CommandBarFlyoutCommandBar. Consulta Fondos del sistema para ver la lista completa.

SystemBackdropElement

SystemBackdropElement aplica un material Mica o Desktop Acrylic del compositor del sistema operativo a un elemento XAML específico, no a toda la ventana. Úselo cuando una barra lateral, un panel o una tarjeta necesite su propio fondo Mica o Acrílico independientemente del resto de la ventana.

Acrylic en la aplicación (AcrylicBrush)

AcrylicBrush desenfoca el contenido XAML dentro de la ventana de la aplicación. No muestra el escritorio ni otras ventanas a través de la superficie. Úselo para paneles de navegación, barras laterales o paneles de contenido en los que desee un efecto translúcido en la aplicación.

  • API: se aplica {ThemeResource AcrylicInAppFillColorDefaultBrush} a un elemento Backgroundo define un personalizado AcrylicBrush con TintColor, TintOpacityy TintLuminosityOpacity.
  • La propiedad UWP BackgroundSource = HostBackdrop no está disponible en WinUI 3.
  • Para obtener más información y ejemplos de código, consulte Acrílico en aplicaciones.

Captura de pantalla de una aplicación WinUI 3 con AcrylicBrush aplicada, que muestra un panel translúcido que desenfoca el contenido XAML dentro de la ventana de la aplicación.

  • Last updated on