Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

В Creators Update Предварительный просмотр Insider 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, потому что вы потеряете акриловый эффект, когда окно приложения потеряло фокус, или устройство находится в режиме экономии заряда аккумулятора.

Ответ 3

Примечание

Это будет работать только с Windows 10 Insider Preview (v10.0.16190.0 и выше). Если вы хотите использовать его в "Обновлениях авторов", то откройте "ответ от Sven Borden.

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

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

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

Ресурсы, названные Acrylic\WindowBrush *, представляют собой акриловый фон, в то время как Acrylic\ElementBrush * относится к in-app acrylic

Ключ ресурса → Прозрачность оттенка → Резервный цвет

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: флаг, чтобы указать, хотите ли вы использовать фона или в приложении acrylic.

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

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