共用方式為

在 Windows 11 桌面應用程式中應用雲母或壓克力材質

Windows 11中的材質是應用於用戶界面表面，模擬真實物件的視覺效果。 雲母和壓克力這類遮擋材質會使用在互動式 UI 控制項下方當作基底層。

雲母是一種不透明的材質，融合了使用者的佈景主題和桌面背景，以創造出高度個人化的外觀。 Mica 是為了效能而設計的，因為它只需擷取背景桌布一次即可建立視覺效果，所以我們建議將它用於應用程式的基礎層，特別是在標題列區域。

壓克力是一種半透明材質，重現了結霜玻璃的效果。 它僅用於暫時性、輕鬆關閉的介面，例如快顯視窗和選單。

本文說明如何將雲母或壓克力顏料應用於 Windows App SDK/WinUI 3 XAML 應用程式的基礎層。

備註

如何使用背景材質

開啟 WinUI 3 圖庫應用程式，看看系統背景的運作

WinUI 3 圖庫圖示 WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。 你可以從 Microsoft Store下載 App，或在 GitHub 瀏覽原始碼。

若要將 Mica 或 Acrylic 材質套用至您的應用程式，您可以將 SystemBackdrop 屬性設定為 XAML SystemBackdrop（通常是內建背景之一，如 MicaBackdrop 或 DesktopAcrylicBackdrop）。

這些元素具有 SystemBackdrop 屬性：

這些範例展示了如何在 XAML 中設定系統背景。

Mica

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 來套用材質。 這是大多數應用程式推薦的塗布方式。

本文剩餘部分將說明如何使用 Composition MicaController 和 DesktopAcrylicController API，這些 API 讓你能更好地控制背景的行為。

若要在應用程式中使用背景材質，您可以使用其中一種控制器來實作 ISystemBackdropController 介面 (MicaController 或 DesktopAcrylicController)。 這些類別可管理系統背景素材的呈現，以及處理該素材的系統政策。

若要將雲母設為背景材質，請建立 MicaController 物件。 若要使用壓克力，則請建立 DesktopAcrylicController 物件。 每個系統背景材質類型的設定和支援程式碼都相同。

建立 MicaController

MicaController micaController;

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

建立桌面壓克力控制器

DesktopAcrylicController acrylicController;

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

控制器會依預設回應系統的淺色和深色主題。 若要覆寫此行為，您可以在控制器上設定下列屬性：

備註

自訂控制器的四個屬性後，當相關的 SystemBackdropConfiguration.Theme 改變時，它不再套用預設的亮或暗值。 您必須手動更新這些屬性，以符合新的主題。

若要在應用程式使用背景材質，您需要下列項目：

範例：在 WinUI 應用程式中使用控制器搭配 Mica。

這個範例展示了如何在 XAML 應用程式中使用控制器設定 Mica 背景材質。

小提示

另外，請參考 GitHub 上的這些範例專案：

C#：WinUI 畫廊中的 SampleSystemBackdropsWindow。

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