Mica 재질
Mica는 테마와 데스크톱 배경 화면을 통합하여 앱 및 설정과 같은 수명이 긴 창의 배경을 그리는 불투명한 동적 재질입니다. Mica를 애플리케이션 배경에 적용하면 사용자를 만족시키고 시각적인 개체 계층 구조를 만들 수 있으며 포커스되는 창에 대한 명확성을 증가시켜 생산성을 향상시킬 수 있습니다. Mica는 앱 성능을 위해 특별히 설계되었으며 데스크톱 배경 화면을 한 번만 샘플링하여 시각화를 생성합니다. Windows 11 버전 22000 이상에서 실행되는 동안 Mica는 WinUI 2를 사용하는 UWP 앱과 Windows 앱 SDK 1.1 이상을 사용하는 앱에 사용할 수 있습니다.
밝은 테마의 Mica
어두운 테마의 Mica
Mica Alt 는 사용자의 바탕 화면 백그라운드 색을 더 강하게 틴팅하는 Mica의 변형입니다. 특히 탭 제목 표시줄이 있는 앱을 만들 때 Mica Alt를 앱 배경에 적용하여 Mica보다 더 심층적인 시각적 개체 계층 구조를 제공할 수 있습니다. Alt는 Windows 11 버전 22000 이상에서 실행되는 동안 Mica Windows 앱 SDK 1.1 이상을 사용하는 앱에서 사용할 수 있습니다.
이러한 이미지는 탭이 있는 제목 표시줄에서 Mica와 Mica Alt의 차이를 보여 줍니다. 첫 번째 이미지는 Mica를 사용하고 두 번째 이미지는 Mica Alt를 사용합니다.
Mica 또는 Mica Alt를 사용하는 경우
Mica 및 Mica Alt는 다른 모든 콘텐츠 뒤에 응용 프로그램의 배경에 표시되는 재질입니다. 각 재질은 사용자의 테마와 데스크톱 배경 화면을 통합하여 고도로 개인 설정된 모양을 만드는 불투명 재질입니다. Mica 재질은 사용자가 화면에서 창을 이동할 때 애플리케이션 아래의 배경 화면을 사용하여 풍부한 시각화를 만들도록 동적으로 조정됩니다. 또한 이 재질은 앱이 비활성 상태일 때 중간색으로 대체하여 사용자가 현재 작업에 집중하도록 도와줍니다.
Mica 또는 Mica Alt를 앱의 기본 레이어로 적용하고 제목 표시줄 영역에서 표시 유형을 우선시하는 것이 좋습니다. 보다 구체적인 레이어링 가이드라인은 레이어링 및 상승과 Mica를 사용한 앱 레이어링를 참조하세요.
유용성 및 적응성
Mica 재질은 다양한 디바이스 및 컨텍스트에 맞춰 자동으로 모양을 바꿉니다. 시각화를 만들기 위해 백그라운드 배경 화면을 한 번만 캡처하므로 성능을 위해 설계되었습니다.
고대비 모드에서는 사용자가 Mica 또는 Mica Alt 대신 선택한 익숙한 백그라운드 색을 계속 볼 수 있습니다. 또한 Mica 재질은 다음과 같은 경우 단색 대체 색(Mica의 경우 SolidBackgroundFillColorBase, Mica Alt용 SolidBackgroundFillColorBaseAlt)으로 표시됩니다.
- 사용자가 설정 >> 개인 설정 >> 색에서 투명도를 해제하는 경우
- 배터리 절약 모드가 활성화된 경우
- 앱이 저사양 하드웨어에서 실행되는 경우
- 바탕 화면에서 앱 창이 비활성화되는 경우
- Windows 앱이 Xbox 또는 HoloLens에서 실행 중입니다.
- Windows 버전이 22000 미만입니다.
Mica를 사용하여 앱 레이어링
표준 패턴 콘텐츠 레이어
카드 패턴 콘텐츠 레이어
Mica는 비활성 및 활성 상태와 미세한 개인 설정으로 인해 앱 계층 구조의 기반 레이어로 적합합니다. 2 레이어의 레이어링 및 상승 시스템을 따르려면 Mica를 앱의 기본 계층으로 적용하고 기본 레이어의 맨 위에 있는 추가 콘텐츠 레이어를 추가하는 것이 좋습니다. 콘텐츠 레이어는 LayerFillColorDefaultBrush, 불투명도가 낮은 단색을 사용하여 Mica 뒤에 표시되는 재질을 백그라운드로 선택해야 합니다. 권장되는 콘텐츠 레이어 패턴은 다음과 같습니다.
- 표준 패턴: 기본 레이어 계층 구조의 뚜렷한 구분이 필요한 넓은 영역에 대한 연속된 백그라운드입니다. LayerFillColorDefaultBrush는 WinUI 앱 표면의 컨테이너 백그라운드(예: Grids, StackPanels, Frames 등)에 적용되어야 합니다.
- 카드 패턴: 여러 섹션으로 구분된 불연속 UI 구성 요소를 사용하여 설계된 앱의 분할된 카드입니다. LayerFillColorDefaultBrush를 사용하는 카드 UI의 정의는 레이어링 및 상승 지침을 참조하세요.
앱의 창이 끊김 없이 보이게 하려면 앱에 재질을 적용하도록 선택하는 경우 제목 표시줄에 Mica를 표시해야 합니다. 앱을 비클라이언트 영역으로 확장하고 투명한 사용자 지정 제목 표시줄을 만들어 제목 표시줄에 Mica를 표시할 수 있습니다. 자세한 내용은 제목 표시줄을 참조하세요.
다음 예제에서는 제목 표시줄 영역에 Mica가 표시되는 NavigationView를 사용하여 레이어링 전략의 일반적인 구현을 보여 줍니다.
- 왼쪽 NavigationView의 표준 패턴입니다.
- 위쪽 NavigationView의 표준 패턴입니다.
- 왼쪽 NavigationView의 카드 패턴입니다.
왼쪽 NavigationView의 표준 패턴
기본적으로 왼쪽 모드의 NavigationView는 콘텐츠 영역에 콘텐츠 레이어가 포함됩니다. 이 예제에서는 Mica를 제목 표시줄 영역으로 확장하고 사용자 지정 제목 표시줄을 만듭니다.
위쪽 NavigationView의 표준 패턴
기본적으로 위쪽 모드의 NavigationView는 콘텐츠 영역에 콘텐츠 레이어가 포함됩니다. 이 예제에서는 Mica를 제목 표시줄 영역으로 확장하고 사용자 지정 제목 표시줄을 만듭니다.
왼쪽 NavigationView의 카드 패턴
NavigationView를 사용하여 이 카드 패턴을 따르려면 배경 및 테두리 테마 리소스를 재정의하여 기본 콘텐츠 레이어를 제거해야 합니다. 그런 다음, 컨트롤의 콘텐츠 영역에서 카드를 만들 수 있습니다. 이 예제에서는 여러 개의 카드를 만들고, Mica를 제목 표시줄 영역으로 확장하고, 사용자 지정 제목 표시줄을 만듭니다. 카드 UI에 대한 자세한 내용은 레이어링 및 상승 지침을 참조하세요.
Mica Alt를 사용하여 앱 레이어링
Mica Alt는 Mica의 대안으로, 비활성 및 활성 상태와 미묘한 개인 설정과 같은 동일한 기능을 갖춘 앱 계층 구조의 기본 레이어입니다. 제목 표시줄 요소와 앱의 명령 영역(예: 탐색, 메뉴) 간에 대비가 필요한 경우 Mica Alt를 앱의 기본 레이어로 적용하는 것이 좋습니다.
Mica Alt를 사용하는 일반적인 시나리오는 탭 제목 표시줄이 있는 애플리케이션을 만드는 경우가 됩니다. 레이어링 및 상승지침을 따르려면 Mica Alt를 앱의 기본 레이어로 적용하고, 기본 레이어 위에 있는 명령 레이어를 추가하고, 마지막으로 명령 레이어 위에 있는 추가 콘텐츠 레이어를 추가하는 것이 좋습니다. 명령 레이어는 불투명도가 낮은 단색을 배경으로 사용하여 LayerOnMicaBaseAltFillColorDefaultBrush 뒤에 있는 재료인 Mica Alt를 선택해야 합니다. 콘텐츠 레이어는 불투명도가 낮은 다른 단색을 LayerFillColorDefaultBrush 사용하여 그 아래에 있는 레이어를 선택해야 합니다. 레이어 시스템은 다음과 같습니다.
- Mica Alt
- 명령 레이어: 기본 레이어와 고유한 계층적 구분이 필요합니다. WinUI
LayerOnMicaBaseAltFillColorDefaultBrush앱 화면의 명령 영역(예: MenuBar, 탐색 구조 등)에 적용해야 합니다. - 콘텐츠 레이어: 명령 레이어와 뚜렷한 계층적 구분이 필요한 넓은 영역에 대한 연속적인 백그라운드입니다.
LayerFillColorDefaultBrush은(는) WinUI 앱 표면의 컨테이너 백그라운드(예: Grids, StackPanels, Frames 등)에 적용되어야 합니다.
앱의 창이 끊김 없이 보이게 하려면 앱에 재질을 적용하도록 선택하는 경우 제목 표시줄에 Mica Alt를 표시해야 합니다. 앱을 비클라이언트 영역으로 확장하고 투명한 사용자 지정 제목 표시줄을 만들어 제목 표시줄에 Mica Alt를 표시할 수 있습니다.
권장 사항
- Do 배경 재질을 가장 뒤의 레이어에 적용합니다(있는 경우 대체
ApplicationPageBackgroundThemeBrush). - Do Mica를 표시하려는 모든 배경 계층을 투명으로 설정하여 Mica가 비치도록 합니다.
- Don't 응용 프로그램에서 배경 자료를 두 번 이상 적용하지 마십시오.
- Don't 배경 재질을 UI 요소에 적용하지 마세요. 배경 재질은 요소 자체에 표시되지 않습니다. UI 요소와 창 간의 모든 계층이 투명으로 설정된 경우에만 표시됩니다.
Mica를 사용하는 방법
WinUI 2를 사용하는 UWP 앱 또는 Windows 앱 SDK 1.1 이상을 사용하는 앱에서 Mica를 사용할 수 있습니다. Windows 앱 SDK 1.1 이상을 사용하는 앱에서 Mica Alt를 사용할 수 있습니다.
Windows 앱 SDK에서 Mica 사용
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 };
}
컴퍼지션 MicaController API 사용에 대한 자세한 내용은 Windows 11용 데스크톱 앱에서 Mica 또는 Acrylic 자료 적용을 참조하세요.
Win32 앱에서 배경 자료를 사용하려면 Windows 11용 Win32 데스크톱 앱에서 Mica 적용을 참조하세요.
UWP용 WinUI 2와 함께 Mica 사용
중요한 API: BackdropMaterial 클래스
BackdropMaterial 클래스를 사용하여 UWP 앱에서 Mica를 적용할 수 있습니다. XAML 콘텐츠의 루트인 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의 카드 패턴
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="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);
}
}
관련된 문서
Windows developer
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기