다음을 통해 공유

시각적 계층을 사용하여 UI 향상(Windows 앱 SDK/WinUI 3)

  • 아티클

Windows 앱 SDK/WinUI 3 의 시각적 계층은 그래픽, 효과, 애니메이션 및 입력을 위한 고성능 유지 모드 API를 제공합니다. Windows 장치 전반의 모든 UI를 위한 기반입니다.

시각적 계층의 Windows 앱 SDK/WinUI 3 구현에서 Microsoft.UI.Composition의 형식 입니다. 이 Windows.UI.Composition 네임스페이스에서 구현되는 UWP 시각적 계층과 매우 유사합니다. Windows 앱 SDK/WinUI 3 시각적 계층의 두 기능과 누락된 기능 간의 차이점은 아래에 자세히 설명되어 있습니다.

WCF와의 차이점

Microsoft.UI.Composition와 UWP 시각적 계층 간의 가장 명백한 차이점은 네임스페이스입니다. Microsoft.UI.Composition 는 가장 일반적으로 사용되는 시나리오에서 UWP 시각적 계층과 거의 동일한 기능에 대한 액세스를 제공합니다. 그러나 예외와 차이점이 있습니다.

Windows 앱 SDK/WinUI 3은 Microsoft.UI.Composition를 사용하여 개별 시각적 개체의 트리를 설명합니다. 그런 다음 이러한 시각적 개체를 합성하여 창의 전체 렌더링을 만듭니다. 이는 Windows.UI.Composition 작동 방식(UWP 앱의 경우)과 매우 유사합니다. 그러나 한 가지 큰 차이점은 Microsoft.UI.Composition 작성기가 Windows 앱 SDK 앱 내에서 완전히 실행되며 그린 픽셀에만 액세스할 수 있다는 것입니다. 즉, 외부 콘텐츠(작성자가 그리지 않은 콘텐츠)는 작성자에 알 수 없습니다. 이는 특정 제한 사항을 만듭니다.

외부 콘텐츠의 예로는 (Microsoft.UI.Xaml.Controls) MediaPlayerElement가 있습니다. Windows 미디어 스택은 XAML에 불투명 미디어 스왑 체인 핸들을 제공합니다. XAML은 해당 핸들을 작성기에 제공하여 Windows( Windows.UI.Composition를통해)에 손을 떼어 표시합니다. 더 구체적으로, 작성자는 미디어 스왑 체인에서 픽셀을 볼 수 없으므로 창에 대한 전체 렌더링의 일부로 합성할 수 없습니다. 대신, 미디어 스왑 체인을 Windows에 제공하여 작성자의 렌더링 아래에 렌더링하고, 그 아래의 미디어 스왑 체인을 볼 수 있도록 작성자의 렌더링에서 구멍이 잘려 있습니다. 이 설정의 시각화는 다음과 같습니다.

외부 콘텐츠 렌더링 다이어그램

일반적으로 이 접근 방식을 사용하면 외부 콘텐츠(예: 스왑 체인)가 창에 대한 전체 렌더링의 일부가 될 수 있습니다. 또한 작성자가 그린 다른 콘텐츠가 외부 콘텐츠 위에 겹칠 수 있습니다(예: 미디어 위에 렌더링되는 XAML의 MediaTransportControls ). 그러나 이 외부 콘텐츠와의 고급 효과 상호 작용은 허용되지 않습니다. 이는 XAML(예: SwapChainPanel을 통해) 또는 컴퍼지션(예: ICompositorInterop::CreateCompositionSurfaceForSwapChain사용)을 통해 스왑 체인을 보기에 연결하는 데 사용할 수 있는 모든 접근 방식에 적용됩니다.

Windows 앱 SDK/WinUI 3에서 다음 API는 모두 외부 콘텐츠를 만듭니다.

위에서 설명한 외부 콘텐츠 처리 모델은 다음과 같은 제한 사항을 만듭니다.

  • 외부 콘텐츠 뒤에 작성기 콘텐츠를 포함할 수 없습니다(위 다이어그램의 외부 계층 뒤/아래). 예를 들어, XAML 단추 또는 그 뒤에 있는 이미지를 볼 수 있도록 WebView2에 투명한 배경을 제공할 수 없습니다. 외부 콘텐츠 뒤에 있을 수 있는 유일한 것은 다른 외부 콘텐츠와 창 배경뿐입니다. 따라서 외부 콘텐츠에 대한 투명도를 사용하지 않도록 설정하거나 사용하지 않도록 설정합니다.
  • 외부 콘텐츠의 작성자 콘텐츠 샘플을 사용할 수 없습니다. 예를 들어 AcrylicBrush는 MediaPlayerElement에서 픽셀을 샘플링하고 흐리게 표시할 수 없습니다. AcrylicBrush 는 외부 콘텐츠 영역에 대해 투명한 검은색인 작성자의 이미지에서 샘플링합니다. 그래서 투명한 검은 색은 아크릴 브러시가 흐리게하는 것입니다. 마찬가지로, MicaBackdrop 또는 DesktopAcrylicBackdrop 앞의 AcrylicBrush는 배경이 그리는 색을 볼 수 없으며 대신 브러시가 투명한 검은색을 흐리게 합니다.
  • 또 다른 시나리오는 대상 반전이라고 하며 텍스트 상자 컨트롤의 캐리트에서 텍스트 삽입 캐리트가 앞에 있는 픽셀을 반전하는 데 사용됩니다. 이는 작성기 표면에서 유사한 샘플을 반전하며, 텍스트 상자에 작성자가 그린 불투명 배경이 없는 경우 영향을 받습니다.
  • WinUI 3 SwapChainPanel 은 외부 콘텐츠를 만들므로 투명성을 지원하지 않습니다. 또한 AcrylicBrush 및 그 앞에 CompositionBackdropBrush를 사용하는 다른 효과 적용을 지원하지 않습니다. AcrylicBrush 및 이러한 다른 CompositionBackdropBrush 기반 효과는 SwapChainPanel에서 샘플링할 수 없습니다.
  • 데스크톱 앱(WinUI 3 앱은 데스크톱 앱) 에서 Window.Current 입니다 null. 따라서 Window.Current.Compositor에서 Compositor의 인스턴스를 검색할 수 없습니다. XAML 앱(WinUI 3 및 UWP 모두)에서는 ElementCompositionPreview.GetElementVisual(UIElement)로 전화하여 Composition Visual을 가져오고 Visual의 Compositor 속성에서 Compositor 를 검색하는 것이 좋습니다. UIElement에 액세스할 수 없는 경우(예: 클래스 라이브러리에서 CompositionBrush 를 만드는 경우) CompositionTarget.GetCompositorForCurrentThread 를 호출 할 수 있습니다.

시각적 계층에 대한 자세한 내용은, UWP 설명서의 시각적 계층 개요를 참조하세요. 대부분의 경우 설명서 및 샘플은 Microsoft.UI.Composition에도 적용할 수 있습니다.

Microsoft.UI.Composition을 사용하기 위한 필수 구성 요소

Windows 앱 SDK/WinUI 3에서 Microsoft.UI.Composition API를 사용하려면 다음을 수행합니다.

  1. Windows App SDK의 최신 릴리스를 다운로드하여 설치합니다. 자세한 내용은 Windows 앱 개발 시작을 참조 하세요.
  2. Windows 앱 개발 시작에 설명된 대로 새 프로젝트를 만들거나 지침에 따라 기존 프로젝트의 Windows 앱 SDK 사용합니다.

Windows 앱 SDK/WinUI 3에서 Microsoft.UI.Composition의 가용성에 대한 자세한 내용은 릴리스 채널을 참조하세요.

이제 Windows 앱 SDK 컴퍼지션 API에 대한 종속성을 사용하도록 Windows Composition 샘플 갤러리를 업데이트했습니다. WindowsCompositionSamples를 방문하여 작동 중인 Microsoft.UI.Composition API를 확인합니다.

앱 gif