Mica 材質

發行項
03/19/2024

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

淺色主題中的 Mica
Mica in light theme

深色主題中的 Mica
Mica in dark theme

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

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

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

使用 Mica 或 Mica Alt 的時機

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

我們建議您將 Mica 或 Mica Alt 套用為應用程式的基礎層，並優先考慮在標題列提高可見性。要獲得更具體的分層指南，請參閱分層和標高和使用 Mica 的應用程式分層。

可用性與適應性

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

在高對比度模式中，使用者會繼續看到他們選擇的熟悉背景色彩來替代 Mica 或 Mica Alt。此外，Mica 材質會顯示為純色後援色彩 (SolidBackgroundFillColorBase for Mica、SolidBackgroundFillColorBaseAlt for Mica Alt) 時：

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

使用 Mica 進行應用程式分層

標準模式內容層
Standard content layer

卡片模式內容層
Card pattern content layer

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

標準模式：大型區域連續的背景，需要與基礎層不同的階層差異。 LayerFillColorDefaultBrush 應該套用至 WinUI 應用程式介面的容器背景 (例如 Grids、StackPanels、Frames 等等)。
卡片模式：對於設計有多個分段和不連續 UI 元件的應用程式，使用分段式卡片。對於使用 LayerFillColorDefaultBrush 之卡片 UI 的定義，請參閱分層和標高指引。

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

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

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

左側 NavigationView 中的標準模式

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

Nav View in standard pattern with custom title bar in Left mode

頂部 NavigationView 中的標準模式

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

NavigationView in standard pattern with custom title bar in Top mode

左側 NavigationView 中的卡片模式

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

NavigationView in standard pattern with custom title bar in Left mode

使用 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。

建議

務必將背景材質套用至最後層 (如果存在 ApplicationPageBackgroundThemeBrush 則取代)。
務必將您想要看到 Mica 的所有背景圖層設定為透明，以便 Mica 顯示出來。
請勿在應用程式中多次套用背景材質。
請勿將背景材質套用至 UI 元素。背景材質不會出現在元素本身。只有當 UI 元素與視窗之間的所有圖層都設定為透明時，才會顯示。

如何使用 Mica

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

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

若要在使用 Windows 應用程式 SDK 和 WinUI 3 的 XAML 應用程式中使用 Mica，請將 Window.SystemBackdrop 屬性設定為 MicaBackdrop。

這些範例示範如何在 XAML 和程式碼中執行這項操作。

Mica

<Window
    ... >

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

</Window>

public MainWindow()
{
    this.InitializeComponent();

    SystemBackdrop = new MicaBackdrop() 
                        { Kind = MicaKind.BaseAlt };
}

如需使用 CompositionMicaController API 的詳細資訊，請參閱在 Windows 11 傳統型應用程式中套用 Mica 或壓克力材質。

若要在 Win32 應用程式中使用背景材質，請參閱在 Windows 11 的 Win32 傳統型應用程式中套用 Mica。

將 Mica 與 UWP 的 WinUI 配合使用

重要 API： BackdropMaterial 類別

您可以使用 BackdropMaterial 類別，在 UWP 應用程式中套用 Mica。建議您在 XAML 內容的根元素上設定 BackdropMaterial 附加屬性，因為它將套用於整個內容區域 (如一個視窗)。如果您的應用程式具有導覽多個頁面的框架，則應在框架上設定此屬性。否則，您應該在應用程式的「頁面」上設定此屬性。

<Page muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <TextBlock>Hello world</TextBlock>
</Page>

下列範例示範如何實作先前所示的標準分層模式。這些範例中的每一個都使用並需要相同的標題列後置程式碼，如上一個範例所示。

範例：左側 NavigationView 中的標準模式

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

<Page
    x:Class="LeftNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LeftNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12, 0, 0, 0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <Grid>
                        <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                    </Grid>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

範例：頂部 NavigationView 中的標準模式

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

<Page
    x:Class="TopNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TopNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="32"
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
            <muxc:NavigationView x:Name="NavigationViewControl"          
            Header="Page Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            PaneDisplayMode="Top">
                <muxc:NavigationView.MenuItems>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
            </muxc:NavigationView.MenuItems>
                <Grid>
                    <Frame x:Name="contentFrame">
                        <Grid>
                            <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                        </Grid>
                    </Frame>
                </Grid>
            </muxc:NavigationView>
    </Grid>
</Page>

範例：左側 NavigationView 中的卡片模式

<Page
    x:Class="CardLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CardLayout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
        <Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
        <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
    </Page.Resources>

    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>

        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <StackPanel Orientation="Vertical" Margin="40,16,0,0">
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16" 
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                    </StackPanel>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

標題列後置程式碼

前三個應用程式配置 XAML 頁面使用此後置程式碼來建立適應應用程式狀態和可見性的自訂標題列。

如需詳細資訊，請參閱標題列自訂。

public MainPage()
{
    this.InitializeComponent();
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;

    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    UpdateTitleBarLayout(coreTitleBar);

    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    // For example, when the app moves to a screen with a different DPI.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;

    //Register a handler for when the window changes focus
    Window.Current.Activated += Current_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;

    // Ensure the custom title bar does not overlap window caption controls
    Thickness currMargin = AppTitleBar.Margin;
    AppTitleBar.Margin = new Thickness(currMargin.Left, currMargin.Top, coreTitleBar.SystemOverlayRightInset, currMargin.Bottom);
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

// Update the TitleBar based on the inactive/active state of the app
private void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
{
    SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
    SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];

    if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
    {
        AppTitle.Foreground = inactiveForegroundBrush;
    }
    else
    {
        AppTitle.Foreground = defaultForegroundBrush;
    }
}

// Update the TitleBar content layout depending on NavigationView DisplayMode
private void NavigationViewControl_DisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
{
    const int topIndent = 16;
    const int expandedIndent = 48;
    int minimalIndent = 104;

    // If the back button is not visible, reduce the TitleBar content indent.
    if (NavigationViewControl.IsBackButtonVisible.Equals(Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Collapsed))
    {
        minimalIndent = 48;
    }

    Thickness currMargin = AppTitleBar.Margin;
    
    // Set the TitleBar margin dependent on NavigationView display mode
    if (sender.PaneDisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top)
    {
        AppTitleBar.Margin = new Thickness(topIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
    else if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
    {
        AppTitleBar.Margin = new Thickness(minimalIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }          
    else
    {
        AppTitleBar.Margin = new Thickness(expandedIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
}

Mica 材質

使用 Mica 或 Mica Alt 的時機

可用性與適應性

使用 Mica 進行應用程式分層

左側 NavigationView 中的標準模式

頂部 NavigationView 中的標準模式

左側 NavigationView 中的卡片模式

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

建議

如何使用 Mica

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

Mica

將 Mica 與 UWP 的 WinUI 配合使用

範例：左側 NavigationView 中的標準模式

範例：頂部 NavigationView 中的標準模式

範例：左側 NavigationView 中的卡片模式

標題列後置程式碼

意見反應

其他資源

Mica 材質

使用 Mica 或 Mica Alt 的時機

可用性與適應性

使用 Mica 進行應用程式分層

左側 NavigationView 中的標準模式

頂部 NavigationView 中的標準模式

左側 NavigationView 中的卡片模式

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

建議

如何使用 Mica

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

Mica

將 Mica 與 UWP 的 WinUI 配合使用

範例：左側 NavigationView 中的標準模式

範例：頂部 NavigationView 中的標準模式

範例：左側 NavigationView 中的卡片模式

標題列後置程式碼

相關文章

意見反應

其他資源