Mica 재질

Mica는 테마와 데스크톱 배경 화면을 통합하여 앱 및 설정과 같은 수명이 긴 창의 배경을 그리는 불투명한 동적 재질입니다. Mica를 애플리케이션 배경에 적용하면 사용자를 만족시키고 시각적인 계층 구조를 만들 수 있으며 포커스되는 창에 대한 명확성을 증가시켜 생산성을 향상시킬 수 있습니다. Mica는 앱 성능을 위해 특별히 설계되었으며 데스크톱 배경 화면을 한 번만 샘플링하여 시각화를 만듭니다.

hero image

중요한 API: BackdropMaterial 클래스

밝은 테마의 Mica
Mica in light theme

어두운 테마의 운모
Mica in dark theme

Mica를 사용하는 시기

Mica는 애플리케이션의 배경에서 다른 모든 콘텐츠 뒤에 표시되는 재질입니다. 사용자의 테마와 데스크톱 배경 화면을 통합하여 고도로 개인 설정된 모양을 만드는 불투명 재질입니다. Mica 재질은 사용자가 화면에서 창을 이동할 때 애플리케이션 아래의 배경 화면을 사용하여 풍부한 시각화를 만들도록 동적으로 조정됩니다. 또한 이 재질은 앱이 비활성 상태일 때 중간색으로 대체하여 사용자가 현재 작업에 집중하도록 도와줍니다.

Mica를 앱의 기본 계층으로 사용하고 적용하여 제목 표시줄 영역에서 애플리케이션 및 표시 여부 우선 순위를 결정하는 것이 좋습니다. 보다 구체적인 계층화 지침은 계층화 및 권한 상승Mica를 사용한 앱 계층화를 참조하세요.

유용성 및 적응성

Mica는 다양한 디바이스 및 컨텍스트에 맞춰 자동으로 모양을 바꿉니다. Mica는 시각화를 만들 때 배경 화면을 한 번만 캡처하므로 성능을 위해 설계되었습니다.

고대비 모드에서는 Mica 대신 사용자가 선택한 익숙한 배경색이 계속 표시됩니다. 또한 Mica는 단색 대체 색상(SolidBackgroundFillColorBase)으로 표시됩니다.

  • 사용자가 설정 > 개인 설정 > 색상에서 투명도를 해제하는 경우.
  • 배터리 절약 모드가 활성화된 경우.
  • 앱이 저사양 하드웨어에서 실행되는 경우.
  • 바탕 화면에서 앱 창이 비활성화되는 경우.
  • Windows 앱이 Xbox 또는 HoloLens에서 실행되는 경우.
  • Windows 버전이 22000 미만인 경우.

Mica를 사용하는 방법

BackdropMaterial 클래스를 사용하여 Mica를 적용할 수 있습니다. XAML 콘텐츠의 루트인 XAML 요소에 BackdropMaterial 연결 속성을 설정하는 것이 좋습니다. 이는 전체 콘텐츠 영역(예: 창)에 적용되기 때문입니다. 앱에 여러 페이지를 탐색하는 프레임이 있는 경우 프레임에서 이 속성을 설정해야 합니다. 그렇지 않은 경우에는 앱의 페이지에서 이 속성을 설정해야 합니다.

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

Mica를 사용하여 앱 계층화

표준 패턴 콘텐츠 계층
Standard content layer

카드 패턴 콘텐츠 계층
Card pattern content layer

Mica는 비활성 및 활성 상태와 미세한 개인 설정으로 인해 앱 계층 구조의 기반 계층으로 적합합니다. 2계층 계층화 및 권한 상승 시스템을 따르려면 Mica를 앱의 기본 계층으로 적용하고 기본 계층의 맨 위에 있는 추가 콘텐츠 계층을 추가하는 것이 좋습니다. 콘텐츠 계층은 LayerFillColorDefaultBrush, 불투명도가 낮은 단색을 사용하여 Mica 뒤에 표시되는 재질을 배경으로 선택해야 합니다. 권장되는 콘텐츠 계층 패턴은 다음과 같습니다.

  • 표준 패턴: 기본 계층과 계층 구조의 뚜렷한 구분이 필요한 넓은 영역에 대한 연속된 배경입니다. LayerFillColorDefaultBrush는 WinUI 앱 표면의 컨테이너 배경(예: Grids, StackPanels, Frames 등)에 적용되어야 합니다.
  • 카드 패턴: 여러 섹션으로 구분된 불연속 UI 구성 요소를 사용하여 설계된 앱의 분할된 카드입니다. LayerFillColorDefaultBrush를 사용하는 카드 UI의 정의는 계층화 및 권한 상승 지침을 참조하세요.

앱의 창이 끊김 없이 보이게 하려면 앱에 재질을 적용하도록 선택하는 경우 제목 표시줄에 Mica를 표시해야 합니다. 앱을 비클라이언트 영역으로 확장하고 투명한 사용자 지정 제목 표시줄을 만들어 제목 표시줄에 Mica를 표시할 수 있습니다. 아래 예제에서는 Mica가 제목 표시줄 영역에 표시되는 NavigationView를 사용하는 계층화 전략의 일반적인 구현을 소개합니다. 이러한 각 예제는 동일한 제목 표시줄 코드 숨김을 사용하여 이를 필요로 합니다.

  • 왼쪽 NavigationView의 표준 패턴입니다.
  • 위쪽 NavigationView의 표준 패턴입니다.
  • 왼쪽 NavigationView의 카드 패턴입니다.

왼쪽 NavigationView의 표준 패턴

기본적으로 왼쪽 모드의 NavigationView는 콘텐츠 영역에 콘텐츠 계층이 포함됩니다. 이 예제에서는 Mica를 제목 표시줄 영역으로 확장하고 사용자 지정 제목 표시줄을 만듭니다.

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

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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를 제목 표시줄 영역으로 확장하고 사용자 지정 제목 표시줄을 만듭니다.

NavigationView in standard pattern with custom title bar in Top mode

<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의 카드 패턴

NavigationView in standard pattern with custom title bar in Left mode

NavigationView를 사용하여 이 카드 패턴을 따르려면 배경 및 테두리 테마 리소스를 재정의하여 기본 콘텐츠 계층을 제거해야 합니다. 그런 다음, 컨트롤의 콘텐츠 영역에서 카드를 만들 수 있습니다. 이 예제에서는 여러 개의 카드를 만들고, Mica를 제목 표시줄 영역으로 확장하고, 사용자 지정 제목 표시줄을 만듭니다. 카드 UI에 대한 자세한 내용은 계층화 및 권한 상승 지침을 참조하세요.

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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);
    }
}

권장 사항 및 금지 사항

  • Do ApplicationPageBackgroundThemeBrush를 대체하는 맨 뒤 계층에 BackdropMaterial 적용을 적용합니다.
  • Do Mica를 표시하려는 모든 배경 계층을 투명으로 설정하여 Mica가 비치도록 합니다.
  • Don't 애플리케이션에서 BackdropMaterial을 두 번 이상 적용하지 않습니다.
  • Don't UI 요소에 BackdropMaterial을 적용하지 않습니다. 배경 재질은 요소 자체에 표시되지 않습니다. UI 요소와 창 간의 모든 계층이 투명으로 설정된 경우에만 표시됩니다.

샘플 코드 가져오기

BackdropMaterial 클래스, NavigationView, 재질, 계층화 및 권한 상승