이제 UWP가 아닌 데스크톱 애플리케이션에서 Windows 런타임 API를 사용하여 WPF, Windows Forms 및 C++ Win32 애플리케이션의 모양, 느낌 및 기능을 향상시키고 UWP를 통해서만 사용할 수 있는 최신 Windows UI 기능을 활용할 수 있습니다.
많은 시나리오에서 XAML 아일랜드 를 사용하여 최신 XAML 컨트롤을 앱에 추가할 수 있습니다. 그러나 기본 제공 컨트롤을 넘어서는 사용자 지정 환경을 만들어야 하는 경우 시각적 계층 API에 액세스할 수 있습니다.
시각적 계층은 그래픽, 효과 및 애니메이션에 대한 고성능 유지 모드 API를 제공합니다. 이는 Windows 디바이스에서 UI를 위한 기반입니다. UWP XAML 컨트롤은 시각적 계층을 기반으로 하며 빛, 깊이, 동작, 재질 및 배율과 같은 Fluent 디자인 시스템의 여러 측면을 사용할 수 있습니다.
시각적 계층을 사용하여 만든 사용자 인터페이스
모든 Windows 앱에서 시각적으로 매력적인 사용자 인터페이스 만들기
시각적 계층을 사용하면 사용자 지정 그리기 콘텐츠(시각적 개체)의 간단한 작성을 사용하고 애플리케이션에서 해당 개체에 강력한 애니메이션, 효과 및 조작을 적용하여 매력적인 환경을 만들 수 있습니다. 시각적 계층은 기존 UI 프레임워크를 대체하지 않습니다. 대신, 이러한 프레임워크에 대한 유용한 보완 기능입니다.
시각적 계층을 사용하여 애플리케이션에 고유한 모양과 느낌을 제공하고 다른 애플리케이션과 차별화되는 ID를 설정할 수 있습니다. 또한 애플리케이션을 더 쉽게 사용할 수 있도록 설계된 Fluent 디자인 원칙을 통해 사용자로부터 더 많은 참여를 유도할 수 있습니다. 예를 들어 화면의 항목 간 관계를 표시하는 시각적 신호 및 애니메이션 화면 전환을 만드는 데 사용할 수 있습니다.
시각적 계층 기능
브러시
컴퍼지션 브러시를 사용하면 단색, 그라데이션, 이미지, 비디오, 복합 효과 등을 사용하여 UI 개체를 그릴 수 있습니다.
재료 제작자 데모 앱으로 만든 달걀입니다
효과
컴퍼지션 효과 에는 빛, 그림자 및 필터 효과 목록이 포함됩니다. 애니메이션 효과를 적용하고, 사용자 지정하고, 연결한 다음, 시각적 개체에 직접 적용할 수 있습니다. SceneLightingEffect를 컴퍼지션 조명과 결합하여 분위기, 깊이 및 재질을 만들 수 있습니다.
Windows UI 컴퍼지션 샘플 갤러리에 설명된 조명 및 재료.
애니메이션
컴퍼지션 애니메이션은 UI 스레드와 관계없이 작성기 프로세스에서 직접 실행됩니다. 이렇게 하면 부드러움과 크기 조정이 가능하므로 많은 수의 동시 명시적 애니메이션을 실행할 수 있습니다. 시간이 지남에 따라 속성 변경을 구동하는 친숙한 키 프레임 애니메이션 외에도 식을 사용하여 사용자 입력을 비롯한 여러 속성 간에 수학 관계를 설정할 수 있습니다. 입력 기반 애니메이션을 사용하면 동적으로 유동적으로 사용자 입력에 응답하는 UI를 만들 수 있으므로 사용자 참여도를 높일 수 있습니다.
모션은 Windows UI 컴퍼지션 샘플 갤러리 .
기존 코드베이스를 유지하고 증분 방식으로 채택
기존 애플리케이션의 코드는 손실하지 않으려는 상당한 투자를 나타냅니다. 시각적 계층을 사용하도록 콘텐츠 의 아일랜드 를 마이그레이션하고 나머지 UI를 기존 프레임워크에 유지할 수 있습니다. 즉, 기존 코드 베이스를 광범위하게 변경하지 않고도 애플리케이션 UI를 크게 업데이트하고 개선할 수 있습니다.
샘플 및 튜토리얼
샘플을 실험하여 애플리케이션에서 시각적 계층을 사용하는 방법을 알아봅니다. 이러한 샘플 및 자습서는 시각적 계층 사용을 시작하고 기능의 작동 방식을 보여 주는 데 도움이 됩니다.
Win32
Windows Forms
WPF
Limitations
많은 시각적 계층 기능은 UWP 앱에서와 마찬가지로 데스크톱 애플리케이션에서 호스트할 때 동일하게 작동하지만 일부 기능에는 제한 사항이 있습니다. 다음은 알아야 할 몇 가지 제한 사항입니다.
- 효과 체인은 효과 설명에 Win2D 를 사용합니다. Win2D NuGet 패키지 데스크톱 애플리케이션에서 지원되지 않으므로 원본 코드 다시 컴파일해야 합니다.
- 적중 테스트를 수행하려면 시각적 트리를 직접 탐색하여 경계 계산을 수행해야 합니다. 이는 UWP의 시각적 계층과 동일하며, 이 경우 적중 테스트를 위해 쉽게 바인딩할 수 있는 XAML 요소가 없습니다.
- 시각적 계층에는 텍스트를 렌더링하기 위한 기본 형식이 없습니다.
- WPF 및 시각적 계층과 같은 두 가지 서로 다른 UI 기술을 함께 사용하는 경우 각각 화면에 자신의 픽셀을 그리는 역할을 하며 픽셀을 공유할 수 없습니다. 따라서 시각적 계층 콘텐츠는 항상 다른 UI 콘텐츠 위에 렌더링됩니다. (이를 영공 문제로 알려져 있습니다.) 시각적 계층 콘텐츠가 호스트 UI로 크기가 조정되고 다른 콘텐츠가 차단되지 않도록 추가 코딩 및 테스트를 수행해야 할 수 있습니다.
- 데스크톱 애플리케이션에서 호스트되는 콘텐츠는 DPI에 맞게 자동으로 크기를 조정하거나 축척되지 않습니다. 콘텐츠가 DPI 변경 내용을 처리하도록 하려면 추가 단계가 필요할 수 있습니다. 자세한 내용은 플랫폼별 자습서를 참조하세요.
추가 리소스
API 참조