XAML Live Preview를 사용하면 데스크톱 앱의 UI(사용자 인터페이스)를 캡처하여 Visual Studio 내의 도킹된 창으로 가져올 수 있으므로 XAML 핫 다시 로드 를 사용하여 앱을 변경한 다음 변경 내용을 실시간으로 볼 수 있습니다.
XAML 라이브 미리 보기 창
XAML 라이브 미리 보기 창은 디버깅 중에 사용할 수 있습니다. 열려면Windows>XAML 라이브 미리 보기>로 이동합니다.
Visual Studio 2022 버전 17.14 미리 보기 2부터는 디버깅 세션이 아니라 디자인 타임에 XAML Live Preview 및 XAML 핫 다시 로드 를 사용할 수 있습니다.
또는 애플리케이션 도구 모음 에서 XAML 라이브 미리 보기로 표시 단추를 선택합니다.
스크롤 및 확대/축소
스크롤 막대를 사용하여 스크롤하는 것 외에도 다음과 같은 상호 작용을 사용할 수 있습니다.
- 마우스 휠(마우스가 지원하는 경우, 세로 및 가로)입니다.
- 터치 패드는 세로와 가로로 두 손가락으로 스크롤합니다.
- 마우스 끌기 동작과 함께 Ctrl 키를 누릅니다.
확대/축소에 관해서는 다음 상호 작용을 사용할 수도 있습니다.
- 왼쪽 아래 모서리에 있는 확대/축소 단추입니다.
- 키보드를 사용하려는 경우 Ctrl++ 기호 (+) 또는 Ctrl+빼기 기호 (-) 바로 가기 키를 누릅니다.
- 마우스 휠 동작과 쌍을 이루는 Ctrl 키 누르기 또는 터치 패드를 사용하여 확대/축소 동작을 위한 손가락 모으기 마우스를 사용하는 추가 보너스는 제어 영역을 유지하는 것입니다.
요소 선택
XAML 라이브 미리 보기의 요소 선택은 실행 중인 애플리케이션의 선택 영역과 유사합니다. 이를 통해 라이브 시각적 트리 또는 원본 XAML에서 요소를 찾을 수 있습니다.
요소 선택은 처음 4개의 도구 모음 단추(왼쪽에서 오른쪽)로 제어됩니다.
도구 모음 단추는 다음 작업을 생성합니다.
- 요소 선택 영역 은 요소 선택 작업을 시작합니다. 즉, XAML Live Preview에서 애플리케이션 콘텐츠 위로 마우스를 이동할 때 요소를 강조 표시합니다. 요소를 클릭하면 라이브 시각적 트리에서 선택됩니다. 또한 선택한 미리 보기 요소를 사용할 수 있고 원본 XAML을 사용할 수 있는 경우 원본으로 이동합니다. 이 동작은 라이브 시각적 트리의 동작과 동일합니다.
- 선택 중에 요소 정보 표시 는 마우스 아래 요소에 대한 크기, 색 및 글꼴 정보의 표시를 제어하는 토글 단추입니다.
- 내 XAML은 강조 표시할 요소( 모두 또는 솔루션에서 사용할 수 있는 원본 XAML이 있는 요소만)를 제어하는 토글 단추입니다. 이 동작은 라이브 시각적 트리의 동작과 동일합니다.
- 선택한 항목 미리 보기 는 요소를 선택할 때 원본 XAML로의 탐색을 제어하는 토글 단추입니다. 기본적으로 꺼져 있습니다. 이 동작은 라이브 시각적 트리의 동작과 동일합니다.
통치자
애플리케이션에서 요소를 정렬하는 데 눈금자가 도움이 됩니다. 애플리케이션 단위에서 이전 눈금자까지의 거리를 표시합니다. 이러한 방식으로 애플리케이션의 여러 부분 간의 거리를 확인하는 데 도움이 됩니다.
도구 모음 단추의 두 번째 그룹은 다음과 같이 눈금자를 제어합니다(왼쪽에서 오른쪽으로).
- 세로 눈금자를 추가합니다. 단일 세로 눈금자를 추가합니다. 이 단추를 몇 번 연속으로 클릭하면 새 눈금자가 기존 눈금자와 겹치지 않도록 배치됩니다.
- 가로 눈금자를 추가합니다. 세로 눈금자처럼 단일 가로 눈금자를 추가합니다.
- 모든 눈금자를 제거합니다. 한 번에 모든 눈금자를 제거합니다.
- 눈금자 색을 선택합니다. 눈금자의 색을 변경합니다.
- 눈금자 불투명도를 전환합니다. 한 번의 클릭으로 모든 눈금자를 숨기거나 표시합니다.
조정자는 키보드 친화적입니다. 탭 키로 그들 주위를 이동할 수 있습니다. 화살표 키를 사용하여 눈금자를 한 번에 한 픽셀씩 이동하거나 화살표 키와 쌍을 이루는 Ctrl 키를 눌러 한 번에 10개의 앱 단위로 이동할 수 있습니다. Del 키는 현재 선택한 눈금자를 삭제합니다. 레이블 근처에서 눈금자 삭제 단추를 선택하여 마우스로 눈금자를 삭제 할 수도 있습니다.
요소 선택을 사용하는 동안 요소 주위에 눈금자를 추가할 수도 있습니다. 마우스 오른쪽 단추를 클릭하면 수직 눈금선이 추가됩니다. 가로 눈금자를 추가하려면 Shift 키를 선택하고 마우스 오른쪽 단추로 클릭합니다.
다중 창 애플리케이션
애플리케이션에 여러 창이 있는 경우 창 콤보 상자를 사용하여 표시할 창을 선택할 수 있습니다. 또는 미리 보기하려는 창에 있는 애플리케이션 도구 모음의 XAML 라이브 미리 보기에서 표시 단추를 사용합니다.
지원되는 플랫폼
Visual Studio 2022의 초기 릴리스는 다음 플랫폼 및 디버깅 시나리오를 지원합니다.
| 플랫폼 | 요소 선택 및 정보 팁 | 통치자 |
|---|---|---|
| WPF (Windows Presentation Foundation, 윈도우 프레젠테이션 파운데이션) | 예 | 예 |
| 유니버설 윈도우 플랫폼 (UWP) | 예 | 예 |
| WinUI3 데스크톱 | 예 | 예 |
| .NET 마우이 | 예 | 예 |
| Xamarin 5.0 이상(Android Emulator) | 아니오 | 예(px*) |
비고
앞의 표에서 (px*)는 픽셀 단위로 표시되는 눈금자를 나타냅니다. 다른 모든 플랫폼은 모니터의 DPI에 따라 플랫폼 단위로 정보를 표시합니다.
제한점
XAML 라이브 미리 보기는 애플리케이션 스크린샷을 초당 여러 번 캡처하여 작동하며 PrintWindow와 같은 사용 가능한 API를 사용합니다. 다음과 같은 제한 사항이 적용됩니다.
- 앱 창의 일부가 화면에서 벗어난 경우 해당 부분은 XAML 핫 다시 로드 변경 내용을 표시할 가능성이 없습니다.
- WDA_EXCLUDEFROMCAPTURE SetWindowDisplayAffinity 를 사용하거나 DWMWA_CLOAK DwmSetWindowAttribute 를 사용하여 창에서 스크린샷 캡처를 옵트아웃하고 XAML Live Preview에 사용할 수 없게 될 수 있습니다.
다음 단계
XAML 라이브 미리 보기와 긴밀하게 페어링되는 XAML 핫 다시 로드에 대해 자세히 알아봅니다.