Как использовать Acrylic Accent в Windows 10 Creators Update?

Question

Как использовать Acrylic Accent в Windows 10 Creators Update?

Я не могу найти подробный документ для использования Acrylic Accent ( CreateBackdropBrush). Я нашел сообщение в Stackru, которое несколько полезно, но не помогает начать работу. Поэтому, пожалуйста, создайте подробный ответ на этот пост, чтобы каждый мог учиться.

Обновить:

Microsoft выпустила официальный документ по акриловым материалам

Замечания:

Если кто-то не знает об Акриловом Акценте. Acrylic Accent - это новая функция в обновлении для создателей Windows 10, которая позволяет фону приложения быть размытым и прозрачным.

31

c# uwp win-universal-app windows-composition-api fluent-design

Источник

user7331395 29 апр '17 в 18:41

3 ответа

Решение

В ~~Creators Update~~ Insider Preview 16193 (вместе с Windows 10 SDK 16190) есть новый AcrylicBrush что вы можете применить непосредственно к вашему элементу, как обычный SolidColorBrush,

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="{StaticResource HostBackdropBrush}" />
</Page>

Обратите внимание, что вы можете изменить BackgroundSource в Backdrop для выборки из содержимого приложения вместо содержимого за окном приложения. Также убедитесь, что вы определили FallbackColor потому что вы потеряете акриловый эффект, когда окно приложения потеряло фокус или устройство находится в режиме экономии заряда батареи.

12

Источник

user231837 15 май '17 в 05:54

Заметка

Это будет работать только в Windows 10 Insider Preview (v10.0.16190.0 и выше). Если вы хотите использовать его в Creators Update, проверьте ответ Свена Бордена.

Вы можете присоединиться к программе Windows 10 Insider Preview здесь

Вы можете присоединиться к Download Windows 10 SDK Preview Build 16190 здесь

Акриловые тематические ресурсы

Ресурсы с именем Acrylic\WindowBrush* представляют фоновый акрил, в то время как Acrylic\ElementBrush* относится к акрилу в приложении.

Ключ ресурса -> Непрозрачность оттенка -> Цвет отступления

SystemControlAcrylicWindowBrush -> 80% -> ChromeMedium

SystemControlAcrylicElementBrush -> 80% -> ChromeMedium

SystemControlAcrylicMediumHighWindowBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumHighElementBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumWindowBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicMediumElementBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush -> 70% -> SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush -> 70% -> SystemAccentColorDark2

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

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Специальная акриловая кисть

TintColor: слой наложения цвета / оттенка. Попробуйте указать и значение цвета RGB, и непрозрачность альфа-канала.
TintOpacity: непрозрачность слоя оттенка. Мы рекомендуем 80% непрозрачности в качестве отправной точки, хотя другие цвета могут выглядеть более привлекательными на других прозрачных пленках.
BackgroundSource: флаг, указывающий, хотите ли вы использовать фон или акрил в приложении.

FallbackColor: сплошной цвет, который заменяет акрил в режиме низкого заряда батареи. Для фонового акрила запасной цвет также заменяет акрил, когда ваше приложение отсутствует в окне активного рабочего стола или когда приложение работает на телефоне и Xbox.

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

В следующем примере показано, как объявить AcrylicBrush в коде. Если ваше приложение поддерживает несколько целей ОС, убедитесь, что этот API доступен на компьютере пользователя.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
{
    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;
}

Расширение акрила в строке заголовка

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

Источник: Акриловый материал

8

Источник

user7331395 15 май '17 в 07:09

Другие вопросы по тегам c# uwp win-universal-app windows-composition-api fluent-design

user2620725 30 апр '17 в 21:17 2017-04-30 21:17 · Accepted Answer · 2017-04-30 21:17

ОБНОВЛЕНИЕ СОЗДАТЕЛЯ

XAML

Вам нужно использовать компонент, который вы положили на фон вашего приложения, скажем, RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

Второй RelativePanel используется для установки цвета тени над размытием

.cs

И тогда вы можете использовать следующий код:

private void applyAcrylicAccent(Panel panel)
{
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _hostSprite = _compositor.CreateSpriteVisual();
    _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);

    ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
    _hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;

и позвонив с applyAcrylicAccent(MainGrid);Вам также нужно будет обработать событие SizeChanged:

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();
}

Конечно, для этого вам нужно быть в Creator Update, CreateHostBackdropBrush() не будет работать на мобильном устройстве или в режиме планшета.

Также учтите, что панель или сетка, которые вы установили акриловым цветом, не смогут отображать какие-либо элементы управления (насколько я тестировал). Поэтому вам нужно использовать относительную панель без какого-либо контроля в ней.

Прозрачная строка заголовка

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

ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

Вот пример того, что генерирует приведенный выше код (с некоторыми другими добавленными тоже.)

Осеннее обновление 10.0.16190 и выше

Как Джастин XL упоминает в ответе ниже, начиная с Build 16190 и выше, разработчики имеют доступ к различным акриловым кистям, расположенным по адресу Windows.UI.Xaml.Media ( Acrylic API) и рекомендации от Microsoft: рекомендации по акриловым материалам