Windows 앱의 자료

재질은 깊이, 계층 구조 및 시각적 관심을 만들기 위해 UI 화면에 적용되는 시각 효과입니다. WinUI 3은 각기 다른 시나리오에 적합한 재질을 적용하기 위한 네 가지 메커니즘을 제공합니다.

Important

AcrylicBrush앱 내 아크릴에만 해당 하며 앱 창 내에서 XAML 콘텐츠를 흐리게 합니다. 앱 뒤에 바탕 화면 또는 다른 창이 표시되지 않습니다. 데스크톱 반투명 효과의 경우 Window.SystemBackdrop 또는 SystemBackdropElement을 사용하세요.

어떤 자료를 사용해야 하나요?

Scenario 재료 API
Mica 배경이 있는 앱 창(배경 화면 착색) Mica Window.SystemBackdrop = new MicaBackdrop()
반투명 유리 배경이 있는 앱 창 데스크톱 아크릴 Window.SystemBackdrop = new DesktopAcrylicBackdrop()
아크릴 배경이 있는 플라이아웃, 팝업 또는 상황에 맞는 메뉴 표면의 시스템 배경 SystemBackdrop, FlyoutBase 등에서 Popup 설정
Mica 또는 Acrylic이 적용된 사이드바, 패널 또는 요소(창 전체가 아님) SystemBackdropElement <SystemBackdropElement> 제어
앱 내 흐림 효과가 있는 탐색 창 또는 콘텐츠 패널 앱 내 아크릴 {ThemeResource AcrylicInAppFillColorDefaultBrush}

재질 없음(기본값)

재질이 적용되지 않은 경우 창 배경은 활성 조명 또는 어두운 테마에서 그린 단색이며 흐림 또는 반투명하지 않습니다.

플랫 흰색 배경을 보여 주는 재질이 적용되지 않은 WinUI 3 앱 창의 스크린샷.

머티리얼은 하드웨어 지원과 사용자 설정이 필요한 컴포지터 효과에 의존합니다. 재질을 렌더링할 수 없는 경우 WinUI 3은 단색으로 정상적으로 돌아갑니다.

  • 원격 데스크톱 또는 가상 머신 — RDP에서는 컴포지터가 데스크톱 콘텐츠와 합성할 수 없으므로 SystemBackdrop 재질은 자동으로 폴백됩니다.
  • 그래픽 하드웨어가 부족합니다 . Mica 및 Desktop Acrylic에는 DirectX 11과 적절한 GPU 메모리가 필요합니다. 임계값을 충족하지 않는 디바이스는 단색 테마 색으로 대체됩니다.
  • 투명도 효과 사용 안 함 - 사용자가 에서 > 해제하면 모든 > 재질이 단색 대체 항목으로 대체됩니다.
  • 배터리 절약 모드 - Windows 배터리 절약 모드가 켜져 있을 때 아크릴(DesktopAcrylicBackdropAcrylicBrush)을 사용하지 않도록 설정합니다. Mica는 영향을 받지 않습니다.
  • 고대비 모드 - 모든 재질이 표시되지 않습니다. 시스템에서 고대비 테마 색을 대신 적용합니다.

앱은 이러한 조건을 검색할 필요가 없습니다. API는 자동으로 대체를 처리합니다. 구성하는 FallbackColor 또는 테마 배경이 단순한 단색으로 표시되어도 잘 보이도록 하세요.

미카 (광물)

Mica는 사용자의 바탕 화면 배경 색을 반영해 차분하고 개인화된 배경을 제공합니다. 특히 제목 표시줄 및 탐색 창 영역에서 주 앱 창 배경을 위해 설계되었습니다.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • 변형: MicaKind.Base (기본값) 또는 MicaKind.BaseAlt (보조 표면의 경우 더 밝게)
  • Windows 버전: Windows 11 전용. Windows 10 단색 테마 색으로 돌아갑니다.

MicaBackdrop이 적용된 WinUI 3 앱의 스크린샷으로, 사용자의 바탕 화면 배경 화면에 착색된 미묘한 파란색 회색 배경을 보여 줌

데스크톱 아크릴

데스크톱 아크릴은 앱 창 뒤의 데스크톱과 콘텐츠를 실시간으로 흐리게 보여 주어 반투명한 성에 낀 유리 같은 효과를 만듭니다.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • 변형: DesktopAcrylicKind.Base (더 불투명) 또는 DesktopAcrylicKind.Thin (더 투명)
  • Windows 버전: Windows 10(빌드 17763) 이상.

DesktopAcrylicBackdrop이 적용된 WinUI 3 앱의 스크린샷으로, 창 뒤에 있는 데스크톱 콘텐츠가 서리 낀 유리처럼 흐려져 보이는 모습입니다.

아크릴은 일시적 표면에 적용할 수도 있습니다.SystemBackdropFlyoutBasePopupMenuFlyoutPresenterCommandBarFlyoutCommandBar 전체 목록은 시스템 배경을 참조하세요.

SystemBackdropElement

SystemBackdropElement 는 OS 작성기에서 전체 창이 아닌 특정 XAML 요소에 Mica 또는 Desktop Acrylic 자료를 적용합니다. 사이드바, 패널 또는 카드에 나머지 창과 독립적으로 고유한 Mica 또는 Acrylic 배경이 필요할 때 사용합니다.

앱 내 아크릴 (AcrylicBrush)

AcrylicBrush 는 앱 창 내의 XAML 콘텐츠를 흐리게 합니다. 바탕 화면이나 다른 창은 표면을 통해 표시되지 않습니다. 반투명 앱 내 효과를 원하는 탐색 창, 사이드바 또는 콘텐츠 패널에 사용합니다.

  • API: 요소 {ThemeResource AcrylicInAppFillColorDefaultBrush}Background를 적용하거나, AcrylicBrush, TintColor, TintOpacity으로 사용자 지정 TintLuminosityOpacity를 정의합니다.
  • UWP BackgroundSource = HostBackdrop 속성은 WinUI 3에서 사용할 수 없습니다.
  • 자세한 내용 및 코드 샘플은 앱 내 아크릴을 참조하세요.

앱 창 내에서 XAML 콘텐츠를 흐리게 하는 반투명 패널을 보여 주는 AcrylicBrush가 적용된 WinUI 3 앱의 스크린샷