共用方式為

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

Windows 11中的材質是應用於模仿現實生活中物件的使用者體驗介面的視覺效果。 雲母和壓克力這類遮擋材質會使用在互動式 UI 控制項下方當作基底層。

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

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

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

備註

如何使用背景材質

  • 重要 API：Window.SystemBackdrop 屬性、MicaBackdrop 類別、DesktopAcrylicBackdrop 類別、SystemBackdropConfiguration 類別

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

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

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

這些元素具有 屬性：

  • CommandBarFlyoutCommandBar.SystemBackdrop
  • ContentIsland.SystemBackdrop
  • DesktopWindowXamlSource.SystemBackdrop
  • FlyoutBase.SystemBackdrop
  • MenuFlyoutPresenter.SystemBackdrop（系統背景）
  • 彈出視窗.系統背景
  • 視窗.系統背景

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

Mica

Mica 通常用來作為應用程式視窗的背景。

<Window
    ... >

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

</Window>

米卡·阿爾特

要使用 Mica Alt 變體，請將屬性設 為 。

<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

  • C#
  • C++ 
MicaController micaController;

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

建立桌面壓克力控制器

  • C#
  • C++ 
DesktopAcrylicController acrylicController;

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

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

  • FallbackColor
  • 亮度不透明度
  • TintColor
  • 色調不透明度

備註

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

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

  • 系統支援

    執行應用程式的系統必須支援背景材質。 呼叫 MicaController.IsSupported 或 DesktopAcrylicController.IsSupported 方法，以確保執行階段支援背景材質。

  • 有效的目標

    您必須提供目標來實作 ICompositionSupportsSystemBackdrop 介面。 在 XAML 應用程式中，XAML Window 會實作這類介面，並當作背景目標來使用。

  • SystemBackdropConfiguration 物件

    SystemBackdropConfiguration 提供系統背景控制器與應用程式特定的原則資訊，藉此正確設定系統背景材質。

  • 一個 DispatcherQueue 物件

    您的主要 XAML 執行緒需要有可用的 Windows.System.DispatcherQueue。 打電話 確認有沒有。

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

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

小提示

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

C#：WinUI 畫廊中的 SampleSystemBackdropsWindow。

C++/WinRT：Windows App SDK Mica 範例。

  • C#
  • C++ 
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