Встроенный акрил

Вы можете применить акрил внутри приложения к поверхностям вашего приложения, используя XAML Акриловую Кисть или предопределенные AcrylicBrush тематические ресурсы.

Замечание

В WinUI 3 AcrylicBrush предоставляет акриловый эффект только внутри приложения — этот эффект применяет размытие и тонирование к содержимому XAML внутри окна приложения, но не к рабочему столу или содержимому за окном. Свойство UWP BackgroundSource (которое включало HostBackdrop режим акрилового эффекта на уровне окна) недоступно в WinUI 3. Для акрилового фона уровня окна, через который в окне приложения виден рабочий стол, задайте для Window.SystemBackdrop значение DesktopAcrylicBackdrop. Чтобы применить системный фоновый материал (Mica или Акрил из компостора ОС) к конкретному элементу пользовательского интерфейса, а не ко всему окну, используйте SystemBackdropElement.

Откройте приложение галереи WinUI и увидьте акрил в действии

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

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Замечание

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

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

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

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

Образцы акрила светлой темы

Образцы акрила темной темы

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

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

Замечание

Если значение TintLuminosityOpacity не указано, система автоматически изменит его на основе ваших параметров TintColor и TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            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"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

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

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.Background = myBrush;
  • Last updated on