共用方式為


Mica 材質

Mica 是一種不透明的動態材質,可以將主題和桌布融入長時間存留的視窗 (如應用程式和設定) 的背景中。 您可以將 Mica 套用至應用程式背景,藉由提高焦點,讓使用者滿意並建立視覺階層、協助生產力。 Mica 專為應用程式效能而設計,因為只取樣桌面桌布一次,以建立其視覺效果。 Mica 適用於在 Windows 11 版本 22000 或更高版本上執行時,使用 WinUI 2 的 UWP 應用程式以及使用 Windows 應用程式 SDK 1.1 或更高版本的應用程式。

主角圖像

淺色主題中的 Mica
淺色主題中的 Mica

深色主題中的 Mica
深色主題中的 Mica

Mica Alt 是 Mica 的變體,具有更強的使用者桌面著色效果。 您可以將 Mica Alt 套用至應用程式的背景,以提供比 Mica 更深的視覺階層,尤其是在建立具有索引標籤式標題列的應用程式時。 Mica 適用於在 Windows 11 版本 22000 或更高版本上執行時,使用 Windows 應用程式 SDK 1.1 或更高版本的應用程式。

這些影像顯示 Mica 與 Mica Alt 在標題列中與索引標籤之間的差異。 第一個影像使用 Mica,第二個影像使用 Mica Alt。

標題欄中具有索引標籤的Mica螢幕快照。

標題欄中含有索引標籤的Mica Alt 螢幕快照。

使用 Mica 或 Mica Alt 的時機

Mica 和 Mica Alt 是出現在應用程式背景上 (位於所有其他內容後面) 的材質。 每種材質都是不透明的,並結合了使用者的主題和桌布,以建立其高度個人化的外觀。 當使用者在畫面上移動視窗時,Mica 材質會動態調整,以使用應用程式下方的桌布來建立豐富的視覺效果。 此外,當應用程式處於非使用中狀態時,材質可協助使用者專注於目前的工作。

我們建議您將 Mica 或 Mica Alt 套用為應用程式的基礎層,並優先考慮在標題列提高可見性。 如需更具體的分層指引,請參閱 本文的分層和提高許可權應用程式 分層一節。

可用性與適應性

Mica 材質會自動調整其外觀以適應各種裝置和環境。 它們設計用於提高效能,因為它們只擷取一次背景桌布以建立其視覺化效果。

在高對比度模式中,用戶會繼續看到他們選擇的熟悉背景色彩,以取代Mica或Mica Alt。此外,Mica 材質會在下列情況下顯示為純色後援色彩(SolidBackgroundFillColorBase 針對 Mica, SolidBackgroundFillColorBaseAlt 適用於 Mica Alt) :

  • 使用者在 [設定] >[個人化]> [色彩] 中關閉透明度。
  • 省電模式啟動。
  • 應用程式在低階硬體上執行。
  • 桌面上的應用程式視窗停用。
  • Windows 應用程式在 Xbox 或 HoloLens 上執行。
  • Windows 版本低於 22000。

使用 Mica 進行應用程式分層

標準模式內容層
標準內容層

卡片模式內容層
卡片模式內容層

Mica 由於其非活動和活動狀態以及微妙的個人化特性,非常適合作為應用程式層次結構中的基礎層。 若要遵循兩層分層和標高系統,建議您將 Mica 作為應用程式的基礎層,並新增位於基礎層之上的其他內容層。 內容層應該取回其背後的材質Mica,使用 LayerFillColorDefaultBrush,作為其背景的低不透明度純色。 我們建議的內容層模式如下:

  • 標準模式:大型區域連續的背景,需要與基底層不同的階層式區分。 LayerFillColorDefaultBrush 應該套用至 WinUI 應用程式介面的容器背景 (例如 Grids、StackPanels、Frames 等等)。
  • 卡片模式:針對使用多個區段和不連續UI元件所設計之應用程式的區段卡片。 如需使用 LayerFillColorDefaultBrush的卡片 UI 定義,請參閱 分層和提高許可權 指引。

若要讓應用程式的視窗看起來順暢,如果您選擇將材質套用至您的應用程式,則應該會在標題列中看到 Mica。 您可以將應用程式延伸至非工作區,並建立透明的自訂標題列,在標題列中顯示 Mica。 如需詳細資訊,請參閱標題列

以下範例展示了使用 NavigationView 實現分層策略的常見實作,其中 Mica 在標題列區域可見。

  • 左側 NavigationView 中的標準模式。
  • 頂部 NavigationView 中的標準模式。
  • 左側 NavigationView 中的卡片模式。

左側 NavigationView 中的標準模式

根據預設,左側模式中的 NavigationView 會在其內容區域中包含內容層。 本範例會將 Mica 延伸至標題列區域,並建立自訂標題列。

在左模式中使用自定義標題列的標準模式導覽檢視

頂部 NavigationView 中的標準模式

根據預設,頂部模式中的 NavigationView 會在其內容區域中包含內容層。 本範例會將 Mica 延伸至標題列區域,並建立自訂標題列。

在標準模式中使用頂端模式自定義標題列的 NavigationView

左側 NavigationView 中的卡片模式

若要使用 NavigationView 遵循卡片模式,您必須覆寫背景和框線主題資源來移除預設內容層。 然後,您可以在控制項的內容區域中建立卡片。 此範例會建立數張卡片、將 Mica 延伸至標題列區域,並建立自訂標題列。 如需卡片 UI 的詳細資訊,請參閱分層和標高指引。

在標準模式中使用左模式自定義標題列的 NavigationView

使用 Mica Alt 進行應用程式分層

Mica Alt 是 Mica 的替代品,作為應用程式層次結構中的基礎層,具有相同的功能,例如非活動和活動狀態以及微妙的個人化特性。 當您需要標題列元素與應用程式命令區域的對比時,建議您將Mica Alt 套用為應用程式的基底層(例如導覽功能表)。

使用 Mica Alt 的常見案例是當您建立具有索引標籤式標題列的應用程式時。 若要遵循分層和標高指引,建議您將 Mica Alt 作為應用程式的基礎層,新增位於基礎層頂端的命令層,最後新增位於命令層頂端的其他內容層。 命令層應該採用其背後使用 LayerOnMicaBaseAltFillColorDefaultBrush的材質 Mica Alt (低透明度的純色),作為其背景。 內容層應該採用其下方使用 LayerFillColorDefaultBrush 的分層,另一個低透明度的純色。 分層系統如下所示:

  • Mica Alt:基底層。
  • 命令層:需要與基底層不同的階層式差異。 LayerOnMicaBaseAltFillColorDefaultBrush 應該套用至 WinUI 應用程式介面的命令區域 (例如:MenuBar、導覽結構等)
  • 內容層:大型區域連續的背景,需要與命令層不同的階層式區分。 LayerFillColorDefaultBrush 應該套用至 WinUI 應用程式介面的容器背景 (例如 Grids、StackPanels、Frames 等等)。

若要讓應用程式的視窗看起來順暢,如果您選擇將材質套用至您的應用程式,則應該會在標題列中看到 Mica Alt。 您可以將應用程式延伸至非工作區,並建立透明的自訂標題列,在標題列中顯示 Mica Alt。

建議

  • 針對您想要看到Mica的所有層次,請將 背景設定為 透明 ,讓Mica顯示通過。
  • 請勿在應用程式中多次套用背景材質。
  • 請勿將背景材質套用至 UI 元素。 背景材質不會出現在元素本身。 只有當 UI 元素與視窗之間的所有圖層都設定為透明時,才會顯示。

範例

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式,或在 GitHub 上取得原始程式碼

如何使用 Mica

您可以在使用 WinUI 2 的 UWP 應用程式中,或使用 Windows 應用程式 SDK 1.1 或更新版本的應用程式中使用 Mica。 您可以在使用 Windows 應用程式 SDK 1.1 或更新版本的應用程式中使用 Mica Alt。

將 Mica 與 Windows 應用程式 SDK 配合使用

若要在 WinUI 3 XAML 應用程式中使用 Mica,請參閱 在 Windows 11 傳統型應用程式中套用 Mica 或壓克力材質。

若要在 Win32 應用程式中使用 Mica,請參閱 在適用於 Windows 11 的 Win32 傳統型應用程式中套用 Mica。

將 Mica 與 UWP 的 WinUI 配合使用

若要在 UWP 應用程式中搭配 WinUI 2 使用 Mica,請參閱 針對 UWP 套用 Mica 與 WinUI 2。