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

Применяйте материалы Mica или акрил в настольных приложениях для Windows 11

Материалы в Windows 11 — это визуальные эффекты, применяемые к поверхностям пользовательского интерфейса, которые напоминают реальные объекты. Материалы, обладающие遮光ными свойствами, такие как слюда и акрил, используются в качестве базовых слоев под интерактивными элементами управления пользовательским интерфейсом.

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

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

В этой статье описывается, как применять Mica или Акрил в качестве базового слоя приложения XAML для Windows App SDK/WinUI 3.

Замечание

Использование фонового материала

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

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

Чтобы применить к вашему приложению материал Mica или Акрил, вы назначаете свойство в XAML SystemBackdrop (обычно, это один из встроенных фонов, MicaBackdrop или DesktopAcrylicBackdrop).

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

В этих примерах показано, как задать системный фон в XAML.

Mica

Мика обычно используется в качестве фона для окна приложения.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Мика Альт

Чтобы использовать вариант Mica Alt, установите свойство Kind на BaseAlt.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

Acrylic

Акрил рабочего стола можно использовать в качестве фона для окна.

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

Акриловый эффект во временном пользовательском интерфейсе

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

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Продвинутый: Как использовать контроллер системного фона

Замечание

Начиная с Windows App SDK 1.3, можно применить материал, задав свойство Window.SystemBackdrop в XAML SystemBackdrop, как описано в предыдущем разделе. Это рекомендуемый способ применить материал для большинства приложений.

Оставшаяся часть этой статьи показывает, как использовать API-интерфейсы Composition MicaController и DesktopAcrylicController , что дает вам больше контроля над поведением фона.

Чтобы использовать фоновый материал в приложении, можно использовать один из контроллеров, реализующих интерфейс ISystemBackdropController (MicaController или DesktopAcrylicController). Эти классы управляют как отображением материалов заднего фона системы, так и управлением системной политикой, связанной с этими материалами.

Чтобы использовать Mica в качестве фонового материала, создайте объект MicaController . Чтобы использовать Акрил, создайте объект DesktopAcrylicController . Настройка и поддерживающий код одинаковы для всех типов материалов фона системы.

Создайте MicaController

MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

Создайте DesktopAcrylicController

DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

Контроллер реагирует на системные темы Light и Dark по умолчанию. Чтобы переопределить это поведение, можно задать следующие свойства на контроллере:

Замечание

Если настроить любое из четырех свойств контроллера, он больше не применяет значения по умолчанию Light или Dark при изменении связанной SystemBackdropConfiguration.Theme. Необходимо вручную обновить эти свойства, чтобы соответствовать новой теме.

Чтобы использовать фоновый материал в приложении, требуются следующие элементы:

  • Поддержка системы

    Система, в которой выполняется приложение, должна поддерживать материал фона. Вызовите метод MicaController.IsSupported или DesktopAcrylicController.IsSupported, чтобы обеспечить поддержку фонового материала во время выполнения.

  • Допустимый целевой объект

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

  • Объект SystemBackdropConfiguration

    SystemBackdropConfiguration предоставляет контроллер фона системы с информацией о политике для конкретного приложения, чтобы правильно настроить материал фона системы.

  • Объект DispatcherQueue

    Вам нужно, чтобы на основном потоке XAML была доступна Windows.System.DispatcherQueue. Позвоните по номеру DispatcherQueue.EnsureSystemDispatcherQueue(), чтобы убедиться, что он существует.

Пример. Использование Mica с контроллером в приложении WinUI

В этом примере показано, как настроить материал фона Mica с помощью контроллера в приложении XAML.

Подсказка

Кроме того, см. следующие примеры проектов на GitHub:

C#: SampleSystemBackdropsWindow в галерее WinUI.

C++/WinRT: пример Windows App SDK Mica.

using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}
  • Last updated on