Материалы в приложениях Windows

Материалы — это визуальные эффекты, применяемые к поверхностям пользовательского интерфейса для создания глубины, иерархии и визуального интереса. WinUI 3 предоставляет четыре механизма применения материалов, каждый из которых подходит для разного сценария.

Important

AcrylicBrush — это акриловый эффект только внутри приложения — он размывает содержимое XAML внутри окна приложения. Рабочий стол или другие окна позади приложения не отображаются. Для эффектов прозрачности рабочего стола используйте Window.SystemBackdrop или SystemBackdropElement.

Какой материал следует использовать?

Сценарий Материал API
Окно приложения с фоном «Mica» (с оттенком обоев) Mica Window.SystemBackdrop = new MicaBackdrop()
Окно приложения с полупрозрачным фоном из матового стекла Акрил рабочего стола Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Выпадающее меню, всплывающее меню или контекстное меню с акриловым фоном Системный фон на поверхности Установите SystemBackdrop для FlyoutBase, Popup и т. д.
Боковая панель, панель или элемент с микой или акрилом (не во всем окне) SystemBackdropElement контроллер <SystemBackdropElement>
Панель навигации или панель содержимого с эффектом размытия в приложении Акрил в приложении {ThemeResource AcrylicInAppFillColorDefaultBrush}

Нет материала (по умолчанию)

Если материал не применяется, фон окна является сплошным цветом, нарисованным из активной светлой или темной темы — без размытия или транслюкентности.

Снимок экрана: окно приложения WinUI 3 без применения материала, показывающее плоский белый фон.

Материалы используют эффекты компостора, требующие поддержки оборудования и пользовательских настроек. WinUI 3 использует сплошной цвет, если материал не удаётся отрисовать:

  • Remote Desktop или виртуальные машины — компостор не может смешиваться с рабочим содержимым рабочего стола по протоколу RDP, поэтому SystemBackdrop материалы автоматически возвращаются.
  • Недостаточно мощное графическое оборудование — для Mica и Desktop Acrylic требуются DirectX 11 и достаточный объём видеопамяти. Устройства, которые не достигают порогового значения, используют однотонный цвет темы.
  • Эффекты прозрачности отключены — если пользователь отключил Эффекты прозрачности в Параметры > Персонализация > Цвета, все SystemBackdrop материалы и AcrylicBrush будут заменены их однотонными вариантами.
  • Активная экономия батареи — Windows отключает акрил (DesktopAcrylicBackdropиAcrylicBrush) при включении экономии батареи. Мика не затрагивается.
  • Режим высокой контрастности — все материалы подавляются; Вместо этого система применяет цвета темы высокой контрастности.

Приложению не нужно обнаруживать эти условия— API-интерфейсы обрабатывают резервный вариант автоматически. Убедитесь, что любой настроенный вами FallbackColor или фон темы хорошо смотрится в виде простой однотонной заливки.

Mica

Mica использует цвет обоев рабочего стола пользователя в качестве приглушённого персонализированного фона. Он предназначен для фона основного окна приложения, особенно в области заголовка и области навигации.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Варианты: MicaKind.Base (по умолчанию) или MicaKind.BaseAlt (легче для вторичных поверхностей)
  • Windows версия: только Windows 11. Возвращается к сплошной цветовой теме на Windows 10.

Снимок экрана: приложение WinUI 3 с примененным MicaBackdrop, показывающее тонкий серый фон, оттеняемый фоном рабочего стола пользователя.

Акрил для рабочего стола

Акрил рабочего стола показывает в реальном времени размытое изображение рабочего стола и содержимого позади окна приложения, создавая эффект матового стекла.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Варианты: DesktopAcrylicKind.Base (более непрозрачные) или DesktopAcrylicKind.Thin (более прозрачные)
  • Версия Windows: Windows 10 (сборка 17763) и более поздних версий.

Снимок экрана приложения WinUI 3 с применением DesktopAcrylicBackdrop, демонстрирующий размытие содержимого рабочего стола за окном с эффектом матового стекла.

Acrylic также можно применять к временным поверхностям — задайте SystemBackdrop для FlyoutBase, Popup, MenuFlyoutPresenter или CommandBarFlyoutCommandBar. Полный список см. в разделе Системные фоны.

SystemBackdropElement

SystemBackdropElement применяет материал Mica или Desktop Acrylic с помощью компоновщика ОС к конкретному элементу XAML, а не ко всему окну. Используйте его, когда боковой панели, панели или карточке нужен собственный фон Mica или Acrylic независимо от остального окна.

Акрил в приложении (AcrylicBrush)

AcrylicBrush размывает содержимое XAML в окне приложения. Он не отображает рабочий стол или другие окна через поверхность. Используйте его для панелей навигации, боковой панели или панелей содержимого, где требуется полупрозрачный эффект в приложении.

  • API: применение {ThemeResource AcrylicInAppFillColorDefaultBrush} к элементу Backgroundили определение пользовательского AcrylicBrush с помощью TintColor, TintOpacityа также TintLuminosityOpacity.
  • Свойство UWP BackgroundSource = HostBackdrop недоступно в WinUI 3.
  • Дополнительные сведения и примеры кода см. в разделе "Акрил в приложении".

Снимок экрана приложения WinUI 3 с применённым AcrylicBrush, показывающий полупрозрачную панель, которая размывает содержимое XAML в окне приложения.

  • Last updated on