壓克力材質

Acrylic 是一種能建立半透明紋理的 Brush \(英文\) 類型。 您可以將壓克力套用到應用程式表面來增加深度，並協助建立視覺階層。

重要 API： AcrylicBrush 類別，背景屬性

在淺色主題中的壓克力

深色主題中的壓克力

Acrylic 和 Fluent Design 系統

Fluent Design 系統能協助您建立結合光線、深度、動作、材質及縮放比例的現代化前衛 UI。 Acrylic 是 Fluent Design 系統元件，其能將實體紋理 (材質) 與深度加入應用程式。 若要深入了解，請參閱 Fluent Design 概觀。

範例

WinUI 2 Gallery
如果您已安裝 WinUI 2 資源庫應用程式，請按一下此處以開啟應用程式並查看壓克力的實際動作。

取得 WinUI 2 資源庫應用程式 (Microsoft Store)
取得原始程式碼 (GitHub)

壓克力混合類型

Acrylic 最明顯的特徵就是它的透明度。 有兩種壓克力混合類型能改變可穿透此材質顯示的項目：

• 背景壓克力會顯示位於目前作用中應用程式背後的桌面背景及其他視窗，以增加應用程式視窗之間的深度，並呈現使用者個人化的喜好設定。
• 應用程式內壓克力能增加應用程式框架內的深度感，讓應用程式能夠聚焦並有層次。

避免堆疊多個壓克力表面：多層背景壓克力可能會產生令人分心的視覺錯覺。

使用壓克力的時機

• 將應用程式內壓克力用來支援 UI，例如在捲動或互動時可能會使內容重疊的表面上。
• 將背景壓克力用於暫時性的 UI 元素，例如操作功能表、飛出視窗，以及可消失關閉的 UI。
  在暫時性案例中使用 Acrylic 可協助維持與觸發暫時性 UI 的內容之間的視覺關聯性。

如果您在瀏覽表面上使用應用程式內壓克力，請考慮將內容延伸至壓克力窗格下，以改善應用程式中的流程。 使用 NavigationView 將能自動為您做到這點。 不過，為了避免產生分割效果，請試著不要將多個壓克力組件以相連的方式放置在一起，因為這可能會在兩個模糊表面之間產生不必要的接合。 壓克力是一個能讓您的設計賞心悅目的工具，但若使用方式不正確，便可能會產生視覺上的干擾。

請考慮採用下列使用模式來決定將壓克力融入應用程式的最佳方式：

垂直窗格

針對能協助區隔應用程式內容的垂直窗格或表面，我們建議使用不透明的背景，而非壓克力。 如果您的垂直窗格會在內容上方開啟 (例如 NavigationView 的 Compact 或 Minimal 模式)，我們建議您使用應用程式內壓克力來協助在使用者開啟此窗格時維持頁面的內容。

暫時性表面

對於具有內容功能表、飛出視窗、非強制回應快顯或輕量式關閉窗格的應用程式，建議使用背景壓克力，尤其是在主應用程式視窗框架外繪製這些表面時。

許多 XAML 控制項預設使用壓克力效果。 MenuFlyout、AutoSuggestBox、ComboBox 等類似的控制項與輕量式關閉彈出視窗在打開時都會使用壓克力效果。

注意

呈現壓克力表面會大量佔用 GPU，這可能會提升裝置耗電量並縮短電池使用時間。 當裝置進入「省電模式」時，會自動停用壓克力效果。 使用者可以關閉設定>個人化>色彩中的透明度效果，以停用所有應用程式的壓克力效果。

可用性與適應性

壓克力會自動針對各種不同的裝置與內容調整其外觀。

在高對比模式中，使用者會繼續看見其所選擇的熟悉背景色彩，而非壓克力效果。 此外，背景壓克力與應用程式內壓克力都會在下列狀況中顯示為純色：

• 當使用者在 [設定]>[個人化]>[色彩] 中關閉透明度效果時。
• 當「省電模式」啟動時。
• 當應用程式在低階硬體上執行時。

此外，在下列狀況中，只有背景壓克力會以純色取代其透明度與紋理：

• 當桌面上的應用程式視窗停用時。
• 當 Windows 應用程式正在Xbox、HoloLens 或平板電腦模式中執行時。

可讀性考量

確保應用程式呈現給使用者的所有文字都符合對比率是非常重要的 (請參閱協助工具文字的需求)。 我們已最佳化壓克力資源，讓文字符合壓克力上方的對比率。 我們不建議將輔色文字放置在壓克力表面上，因為這些組合很可能無法在預設 14px 字型大小的情況下通過最低對比率需求。 請嘗試避免將超連結放置在壓克力元素上。 此外，如果您選擇自訂壓克力色彩或不透明度，請牢記對可讀性的影響。

壓克力佈景主題資源

您可以使用新的 XAML AcrylicBrush 或預先定義的 AcrylicBrush 主題資源，輕鬆地將壓克力套用到應用程式表面。 首先，您必須決定要使用應用程式內壓克力或背景壓克力。 請務必檢閱本文先前所述的常見應用程式模式以取得建議。

我們已針對背景和應用程式內壓克力類型建立筆刷佈景主題資源集合，這些資源會採用應用程式的佈景主題，並會視需求切換回純色。 針對 WinUI 2，這些主題資源位於 microsoft-ui-xaml GitHub 存放庫中的 AcrylicBrush themeresources 檔案中。 在其 名稱中包含背景的資源代表背景壓克力，而 InApp 則是指應用程式內壓克力。

若要繪製特定的表面，請將其中一個 WinUI2 主題資源套用到元素背景，如同您套用任何其他筆刷資源一般。

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

自訂壓克力筆刷

您可以選擇將色彩色調新增到您應用程式的壓克力來顯示品牌，或與頁面上的其他元素產生視覺平衡。 若要顯示彩色而非灰階，您必須使用下列屬性定義自己的壓克力筆刷。

• TintColor︰色彩/色調重疊層。
• TintOpacity︰色調層的不透明度。
• TintLuminosityOpacity：控制背景透過壓克力表面所顯示的飽和度。
• BackgroundSource︰此旗標可指定是否要背景壓克力或應用程式內壓克力。
• FallbackColor︰在省電模式中會取代表壓克力的純色。 對於背景壓克力，當您的應用程式不是作用中的桌面視窗時，或當應用程式是在手機與 Xbox 上執行時，回復色彩也會取代壓克力。

若要新增壓克力筆刷，請針對深色、淺色及高對比佈景主題定義三個資源。 請注意，在高對比中，我們建議使用 SolidColorBrush 並搭配與深色/淺色 AcrylicBrush 相同的 x:Key。

注意

如果您不指定 TintLuminosityOpacity 值，系統將會根據您的 TintColor 和 TintOpacity 自動調整其值。

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

以下範例示範如何在程式碼中宣告 AcrylicBrush。 如果您的應用程式支援多個作業系統目標，請務必檢查使用者電腦上是否有此 API。

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

將壓克力延伸至標題列

若要讓您的應用程式視窗呈現順暢的外觀，您可以在標題列區域中使用壓克力。 此範例透過將 ApplicationViewTitleBar \(英文\) 物件的 ButtonBackgroundColor \(英文\) 及 ButtonInactiveBackgroundColor \(英文\) 屬性設定為 Colors.Transparent \(英文\)，來將壓克力延伸到標題列。

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

您可以在對 Window.Activate 的呼叫之後 (如這裡所示)，將此程式碼置於您應用程式的 OnLaunched 方法 (App.xaml.cs) 中，或是將它置於您應用程式的第一個頁面。

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

此外，您必須使用 CaptionTextBlockStyle 搭配 TextBlock 繪製您應用程式的標題，其通常會自動顯示在標題列中。 如需詳細資訊，請參閱標題列自訂。

可行與禁止事項

• 在暫時性表面使用壓克力。
• 請至少將壓克力延伸至應用程式的其中一個邊緣，來與應用程式的週遭巧妙混合，以呈現順暢的體驗。
• 請勿將桌面壓克力應用於您應用程式的大型背景表面。
• 請勿將多個壓克力窗格彼此相鄰，因為這會產生不理想的可見接縫。
• 請勿將輔色文字放置在壓克力表面上。

我們設計壓克力的方式

我們對壓克力的重要元件進行微調，以締造出壓克力獨特的外觀與屬性。 我們從透明度、模糊與雜訊開始，以增加平面表面的深度與維度。 我們加入排除混合模式層，以確保放置在壓克力背景上之 UI 的對比與可讀性。 最後，我們加入色彩色調來提供個人化的可能性。 這些層面會相互搭配，並產生全新且可使用的材質。

壓克力配方：背景、模糊、排除混合、色彩/色調重疊、雜訊

取得範例程式碼

• WinUI 2 資源庫範例 - 以互動式格式查看所有 XAML 控制項。

相關文章

Fluent Design 概觀