Поделиться через

Акриловый материал

  • Статья

Главное изображение

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

Важные API: класс AcrylicBrush, свойство Background, свойство Window.SystemBackdrop, класс DesktopAcrylicBackdrop

Акрил в светлой теме Акрил в светлой теме

Акрил в темной теме Акрил в темной теме

Акрил и система проектирования Fluent Design

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Акрил — это компонент системы проектирования Fluent Design, добавляющий физическую текстуру (материал) и глубину в приложение. Дополнительные сведения см. в разделе Fluent Design — Материал.

Типы акрилового материала

Самая заметная характеристика акрила — его прозрачность. Существует два типа акриловых смешай, которые изменяют то, что видно через материал:

  • Фоновый акрил показывает обои на рабочем столе и другие окна, которые находятся за текущим активным приложением, добавляя глубину между окнами приложений при праздновании настроек персонализации пользователя.
  • Акрил приложения создает ощущение глубины в структуре самого приложения, обеспечивая акцентирование внимания и иерархию.

Акрил фона

Акрил приложения

Избегайте слоев нескольких акриловых поверхностей: несколько слоев фонового акрила могут создавать отвлекающие оптические иллюзии.

Когда использовать акрил

Рассмотрим следующие шаблоны использования, чтобы решить, как лучше всего включить акрил в приложение.

Временные поверхности

  • Используйте акрил фона для временных элементов пользовательского интерфейса.

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

Фон рабочего стола с открытым контекстным меню с помощью акрила фона

По умолчанию многие элементы управления XAML рисуют акрил. MenuFlyout, AutoSuggestBox, ComboBox и аналогичные элементы управления со всплывающей окнами с световым закрытием используют акрил при открытии.

Поддержка пользовательских интерфейсов и вертикальных панелей

  • Используйте акрил в приложении для поддержки пользовательского интерфейса, например на поверхностях, которые могут перекрывать содержимое при прокрутке или взаимодействии с ним.

Если вы используете акрил в приложении на поверхностях навигации, рассмотрите возможность расширения содержимого под акриловой областью, чтобы улучшить поток в приложении. С помощью NavigationView вы будете выполнять это автоматически. Чтобы избежать эффекта полос, старайтесь не помещать несколько панелей с акрилом встык друг к другу, поскольку при этом возникают лишние "швы" на границе между двумя размытыми поверхностями. Акрил — это инструмент для того, чтобы принести визуальную гармонию к вашим конструкциям, но при неправильном использовании может привести к визуальному шуму.

Для вертикальных панелей и областей, которые разделяют разные области содержимого в приложении, мы рекомендуем использовать вместо акрила непрозрачный фон. Если вертикальные панели открываются поверх содержимого, как в режимах Compact или Minimal в NavigationView, мы рекомендуем использовать акрил приложения, чтобы сохранять контекст страницы при открытии этой панели пользователем.

Примечание.

На некоторых устройствах отрисовка акриловых поверхностей существенно нагружает графический процессор, что увеличивает энергопотребление и сокращает время работы от батареи. Акриловые эффекты автоматически отключаются при входе устройства в режим экономии батареи. Пользователи могут отключить акриловые эффекты для всех приложений, отключив эффекты прозрачности в цветах > персонализации > параметров.

Удобство использования и адаптируемость

Акрил автоматически адаптируется к разнообразным устройствам и контекстам.

В режиме высокой контрастности вместо акриловой поверхности пользователи видят знакомый цвет фона по своему выбору. Кроме того, как акрил фона, так и акрил приложения отображаются сплошным цветом в следующих случаях:

  • Если пользователь отключает эффекты прозрачности в цветах > персонализации > параметров.
  • При активации режима экономии батареи.
  • Когда приложение выполняется на низком оборудовании.

Помимо этого, прозрачность и текстура акрила фона сменится сплошным цветом в следующих случаях:

  • Когда окно приложения на рабочем столе деактивируется.
  • Когда приложение работает на Xbox, HoloLens или в режиме планшета.

Вопросы разборчивости

Важно убедиться, что любой текст, представленный для пользователей, соответствует коэффициентам контрастности (см . требования к тексту со специальными возможностями). Мы оптимизировали акриловые ресурсы, чтобы текст соответствовал коэффициентам контрастности поверх акрила. Мы не рекомендуем размещать цветный текст на акриловых поверхностях, так как эти сочетания, скорее всего, не передают минимальные требования к контрастности по умолчанию размером шрифта 14px. Постарайтесь не размещать гиперссылки поверх элементов акрила. Кроме того, если вы решили настроить цвет акриловых оттенков или уровень непрозрачности, помните о влиянии на удобочитаемость.

Применение акрила в приложении

Внимание

Применение акрила фона отличается от WinUI 3 и WinUI 2/UWP.

WinUI 2/UWP: класс AcrylicBrush имеет свойство BackgroundSource , указывающее, требуется ли фон или акрил в приложении. Вы используете АкрилБруш для применения обоих типов акрила. Дополнительные сведения и примеры см. в классах AcrylicBrush: Microsoft.UI.Xaml.Media.AcrylicBrush (WinUI 2), Windows.UI.Xaml.Media.AcrylicBrush (UWP).

WinUI 3: Класс AcrylicBrush поддерживает только акрил в приложении. Класс DesktopAcrylicBackdrop используется для применения акрила фона.

Акрил фона

Чтобы применить акрил фона в приложении WinUI 3, задайте свойству элемента SystemBackdrop экземпляр DesktopAcrylicBackdrop. Дополнительные сведения см. в статье Apply Mica or Акриловые материалы в классических приложениях для Windows 11.

Эти элементы имеют SystemBackdrop свойство:

Акрил приложения

Вы можете применить акрил в приложении к поверхностям приложения с помощью акриловых ресурсов XAML АкрилBrush или предопределенных AcrylicBrush ресурсов темы.

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

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Примечание.

Эти ресурсы можно просмотреть в файле ресурсов темы AcrylicBrush в репозитории GitHub microsoft-ui-xaml.

Для WinUI 2 ресурсы, которые включают Фон в их именах, представляют акрил фона, в то время как InApp относится к акрилу в приложении.

WinUI 3 включает фоновые ресурсы для совместимости, но они ведут себя так же, как и ресурсы InApp .

Настраиваемая акриловая кисть

Вы можете добавить цветной оттенок к акрилу приложения, чтобы показать фирменное символику или обеспечить визуальный баланс с другими элементами на странице. Чтобы отобразить цвет, а не серое, необходимо определить собственные акриловые кисти с помощью следующих свойств.

  • TintColor — слой наложения цвета/оттенка.
  • TintOpacity — непрозрачность слоя оттенка.
  • TintLuminosityOpacity — управляет уровнем насыщенности, который пропускается через акриловую поверхность от фона.
  • BackgroundSource: (только WinUI 2/UWP) флаг, чтобы указать, требуется ли фон или акрил в приложении.
  • FallbackColor — сплошной цвет, который заменяет акрил в режиме экономии заряда. Для акрила фона резервный цвет также заменяет акрил, если ваше приложение не в активном окне рабочего стола.

Акриловая палитра (светлая тема)

Акриловая палитра (темная тема)

Непрозрачность luminosity по сравнению с непрозрачностью тонов

Чтобы добавить акриловую кисть, определите три ресурса для темных, светлых и высококонтрастных тем. В высокой контрастности рекомендуется использовать SolidColorBrush с тем жеx:Key, что и темный/светлый АкрилБруш.

Примечание.

Если значение не указано TintLuminosityOpacity , система автоматически изменит его значение на основе TintColor и 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>

В следующем примере показано, как объявить АкрилБруш в коде.

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;

Что рекомендуется и что не рекомендуется делать

  • Используйте акрил на временных поверхностях.
  • Сделайте акрил по крайней мере одним краем приложения, чтобы обеспечить простой интерфейс, смешиваясь с окружением приложения.
  • Не помещайте акрил рабочего стола на большие фоновые поверхности вашего приложения.
  • Не размещайте несколько акриловых панелей рядом друг с другом, так как это приводит к нежелательной видимой шве.
  • Не размещайте цветный текст над акриловыми поверхностями.

История создания акрила

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

Состав акрила
Состав акрила: фон, размытие, наложение путем исключения, цвет/оттенок, шум

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите фоновый акрил в действии.

Откройте приложение коллекции WinUI 3 и просмотрите в действии в приложении AcrylicBrush.

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

Общие сведения о Fluent Design