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

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

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

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

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

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

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

Примеры

Коллекция WinUI 2
Если у вас установлено приложение коллекции WinUI 2, щелкните здесь , чтобы открыть приложение и увидеть акрил в действии.

Получить приложение из коллекции WinUI 2 в Microsoft Store
Получить исходный код (GitHub)

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

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

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

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

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

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

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

Ознакомьтесь с приведенными ниже шаблонами, чтобы выбрать оптимальный способ использования акрила в приложении.

Вертикальные панели

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

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

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

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

Примечание

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

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

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

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

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

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

• При отключении окна приложения на рабочем столе.
• Если приложение работает на Xbox, HoloLens или в режиме планшета.

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

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

Ресурсы акриловой темы

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

Мы создали для акрила фона и для акрила приложения подборку ресурсов темы, которые учитывают тему приложения и при необходимости отображаются сплошным цветом. Для WinUI 2 эти ресурсы темы находятся в файле themeresources AcrylicBrush в репозитории GitHub microsoft-ui-xaml. Ресурсы, имена которых содержат Background , представляют собой акрил фона, а InApp — акрил в приложении.

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

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

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

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

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

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

Примечание

Если значение 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 в коде. Если приложение поддерживает несколько целевых операционных систем, убедитесь, что этот API доступен на компьютере пользователя.

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;
}

Применение акрила в заголовке окна

Чтобы окно вашего приложения выглядело максимально органично, можно использовать акриловую поверхность в области его заголовка. В этом примере акрил используется в заголовке окна путем задания определенным свойствам объекта ApplicationViewTitleBar (ButtonBackgroundColor и ButtonInactiveBackgroundColor) значения Colors.Transparent.

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

Этот код можно разместить в методе OnLaunched приложения (App.xaml.cs) после вызова Window.Activate, как показано здесь, или на первой странице приложения.

// 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();
    }
}

Кроме того, заголовок приложения (который обычно отображается в строке заголовка автоматически) придется отрисовать в TextBlock с помощью CaptionTextBlockStyle. Более подробную информацию см. в статье Title bar customization (Настройка заголовка окна).

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

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

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

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

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

Получение примера кода

• Пример коллекции WinUI 2 — просмотр всех элементов управления XAML в интерактивном формате.

Похожие статьи

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