WinUI 3용 XAML 런타임 디자인 도구

Visual Studio 앱이 실행되는 동안 WinUI 3 XAML을 디자인, 반복 및 검사할 수 있는 런타임 도구 집합이 포함되어 있습니다. 함께 사용하면 정적 근사값이 아닌 실제 스타일, 실제 데이터 템플릿, 실제 애니메이션 등 실제 UI를 보여 주는 빠른 편집-다시 로드-검사 루프가 제공됩니다.

Note

Visual Studio XAML 디자이너(끌어서 놓기 디자인 탭)는 현재 WinUI 3 프로젝트를 지원하지 않습니다. 파일을 열고 .xaml XML 편집기만 볼 경우 설치가 끊어지지 않습니다. WinUI 3에서는 디자이너를 사용할 수 없습니다. 기능 요청은 Developer Community 추적됩니다. WinUI 3 데스크톱 앱에 대한 XAML 디자이너 지원 추가 엔지니어링 작업에 대한 배경 정보는 WindowsAppSDK 토론 #4710을 참조하세요.

이 문서에 설명된 런타임 도구는 디자이너를 사용할 수 있는지 여부에 관계없이 유용합니다. 이 문서에서는 워크플로를 안내합니다.

사용할 항목

Tool	용도	여는 방법
XAML 실시간 다시 로드	다시 시작하지 않고 실행 중인 앱에 XAML 변경 내용 푸시	자동 - 디버깅하는 동안 모든 `.xaml` 파일 편집
라이브 시각적 트리	전체 런타임 요소 트리를 표시하고 앱에서 요소를 선택할 수 있도록 합니다.	디버그>Windows>실시간 시각적 트리
Live 속성 탐색기	런타임에 선택한 요소의 모든 속성을 표시하고 편집할 수 있습니다.	디버그>> Windows Live 속성 탐색기
XAML 라이브 미리 보기	창을 전환하지 않고 검사할 수 있도록 실행 중인 앱을 Visual Studio 내부에 렌더링합니다.	디버그>> Windows XAML 라이브 미리 보기

Tip

라이브 시각적 트리 및 Live 속성 탐색기를 나란히 도킹합니다. 함께 사용하면 실제 런타임 값을 보여 주는 자세한 검사 보기를 제공합니다.

Prerequisites

Visual Studio 2022 버전 17.0 이상(XAML 핫 다시 로드 및 라이브 시각적 트리 포함).
Windows 앱 SDK 사용하는 WinUI 3 프로젝트입니다. 프로젝트를 만들려면 WinUI 3 프로젝트 만들기 및 실행을(를) 참조하세요.
프로젝트는 .NET 6 이상(C#)을 대상으로 하거나 C++/WinRT를 사용해야 합니다.

1단계: 디버거에서 앱 시작

F5 키를 누릅니다(또는 디버그>시작 디버깅). 디버거가 연결되면 XAML 핫 다시 로드 자동으로 활성화됩니다.

XAML 핫 다시 로드 도구 모음이 앱 내 오버레이에 나타납니다. 보이지 않으면 해당 설정이 활성화되어 있는지 확인하세요.

XAML 핫 다시 로드디버깅하는>도구>옵션>으로 이동합니다.
XAML 핫 다시 로드 사용하도록 설정이 선택되어 있는지 확인합니다.

Important

XAML 핫 다시 로드 디버거가 필요합니다. 디버깅 없이 실행(Ctrl+F5)은 핫 다시 로드, 라이브 시각적 트리 및 Live 속성 탐색기를 사용하지 않도록 설정합니다.

2단계: XAML 편집 및 변경 내용 즉시 보기

앱이 실행된 상태에서 편집기에서 아무 .xaml 파일로 전환한 다음 변경해 보세요. 예를 들어 Background 색상을 변경하거나 새 Button을(를) 추가합니다. 실행 중인 앱은 다시 시작하지 않고 1~2초 내에 업데이트됩니다.

핫 다시 로드 할 수 있는 것과 할 수 없는 일

핫 다시 로드 가장 일반적인 편집을 처리합니다.

요소 추가, 제거 또는 다시 정렬
속성 값 변경(색, 여백, 텍스트, 크기)
스타일 및 리소스 사전 추가 또는 수정
데이터 템플릿 콘텐츠 변경

일부 변경 내용을 다시 시작해야 합니다.

새 클래스, 코드 비하인드 이벤트 처리기 또는 x:Class 변경 사항 추가
App.xaml 병합 사전 수정하기(때때로)
새 속성을 참조하는 식 변경 x:Bind

핫 다시 로드 변경 사항을 적용할 수 없는 경우 도구 모음에 알림이 표시됩니다. 앱을 다시 시작하여 변경 내용을 선택하기만 하면 됩니다.

자세한 내용은 XAML 핫 다시 로드 참조하세요.

3단계: 시각적 트리 및 속성 검사

라이브 시각적 트리 창을 엽니다(디버그>Windows>라이브 시각적 트리). 이 창에는 부모-자식 관계별로 구성된 실행 중인 앱의 UI 트리에 있는 모든 요소가 표시됩니다.

시각적으로 요소 선택

라이브 시각적 트리 도구 모음에서 실행 중인 애플리케이션에서 요소 선택(십자선 단추)을 사용하도록 설정합니다.
실행 중인 앱에서 요소를 클릭합니다. 트리가 해당 요소로 이동하고 Live 속성 탐색기에 해당 속성이 표시됩니다.

이는 디자인 화면에서 요소를 클릭하는 것에 해당하는 런타임 동작이지만, 코드에서 동적으로 생성된 요소를 포함해 앱이 실제로 렌더링하는 내용을 정확히 반영한다는 점이 다릅니다.

런타임에 속성 편집

Live 속성 탐색기에서 속성 값을 실시간으로 변경할 수 있습니다. 다음은 그 예입니다.

간격을 Margin 조정하도록 변경하고 효과를 즉시 확인합니다.
요소를 숨길 때 발생하는 작업을 테스트하도록 Collapsed 설정합니다Visibility.
반응형 레이아웃을 테스트하려면 Width 또는 Height을 조정하세요.

이러한 런타임 편집은 XAML 파일에 다시 저장되지 않습니다. 실험용입니다. 원하는 값을 찾으면 해당 값을 .xaml 파일에 입력하세요(그러면 핫 다시 로드가 이를 감지해 영구적으로 적용합니다).

4단계: XAML 라이브 미리 보기 사용

XAML 라이브 미리 보기는 Visual Studio 탭 내에서 실행 중인 앱을 렌더링하므로 창을 전환하지 않고도 앱과 XAML 원본을 나란히 볼 수 있습니다.

열려면 디버그>Windows>XAML 라이브 미리 보기입니다.

이는 앱과 Visual Studio 사이를 Alt+Tab으로 전환하기 불편한 단일 모니터 환경에서 특히 유용합니다.

자세한 내용은 XAML 라이브 미리 보기를 참조하세요.

권장: UI 플레이그라운드 페이지 만들기

프로젝트에서 전용 플레이그라운드 페이지를 만듭니다. 이 페이지는 컨트롤, 스타일 및 레이아웃을 실험할 수 있도록 하는 것뿐입니다. 이렇게 하면 시각적 반복을 위해 항상 준비된 스크래치 패드가 제공되며, 특히 위의 런타임 도구와 잘 쌍을 이루게 됩니다.

놀이터 설정

솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고새 항목>빈 페이지 추가>(WinUI 3)를 선택합니다. 이름을 UIPlayground.xaml으로 지정합니다.

UIPlayground.xaml에서 시도하려는 각 컨트롤 또는 패턴에 대한 섹션이 있는 ScrollViewer를 추가합니다.

<Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

놀이터에 쉽게 도달할 수 있도록 합니다. 개발 중에는 App.xaml.cs에서 시작 페이지로 설정합니다:
```
// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));
```
또는 앱에서 사용하는 NavigationView경우 디버그 빌드에만 표시되는 메뉴 항목을 추가합니다. 예를 들어, 메인 창의 코드 비하인드에서 다음과 같습니다:
```
// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif
```
여기서 x:Name은 NavView 컨트롤의 NavigationView입니다.

놀이터를 사용하는 방법

F5 키를 눌러 앱을 시작하고 플레이그라운드 페이지로 이동합니다.
.xaml 실행 중인 앱과 함께 파일을 엽니다(또는 XAML 라이브 미리 보기 사용).
XAML 편집기에서 컨트롤을 추가하거나 수정합니다. 핫 다시 로드 변경 내용을 즉시 푸시합니다.
라이브 시각적 트리를 사용하여 렌더링된 컨트롤을 클릭하고 Live Property Explorer에서 실제 레이아웃 값을 검사합니다.
컨트롤의 모양에 만족하면 XAML을 실제 페이지에 복사합니다.

이 패턴은 "type-reload-inspect" 주기를 제공하며, 실제 코드를 실행하기 때문에 실제 데이터 템플릿, 실제 스타일 및 실제 애니메이션을 볼 수 있습니다.

디자인 타임 및 런타임 접근 방식 비교

일반적인 UI 디자인 작업이 런타임 도구에 매핑하는 방법은 다음과 같습니다.

과업	런타임 도구
페이지에 컨트롤 추가	XAML 요소를 입력합니다. IntelliSense는 태그 및 필수 속성을 완료합니다.
컨트롤 미리 보기	핫 다시 로드 통해 실행 중인 앱에서 라이브로 확인
검사할 요소 선택	라이브 시각적 트리>선택 요소 사용(십자선)
속성 보기 또는 편집	Live 속성 탐색기 사용
크기 또는 위치 조정	XAML 또는 Live 속성 탐색기에서 `Width`, `Height`, `Margin`을 편집하세요

효율적인 워크플로를 위한 팁

WinUI 3 갤러리 앱을 사용합니다. Microsoft Store에서 설치하거나 GitHub에서 빌드하세요. 대화형 예제 및 복사 준비 XAML이 있는 모든 WinUI 3 컨트롤을 보여 줍니다. XAML을 작성하기 전에 찾아볼 수 있는 시각적 카탈로그라고 생각하세요.
놀이터 페이지를 열어 두세요. 앱에 대한 생활 스타일 가이드처럼 취급합니다.
d:DesignHeight 및 d:DesignWidth를 사용하십시오. 디자이너가 없더라도 이러한 특성은 IntelliSense에 도움이 되며 편집기에서 페이지를 열 때 페이지 크기를 일관되게 유지할 수 있습니다.
XAML 바인딩 실패 창과 통합합니다. 디버그>창>XAML 바인딩 실패에서 열어 디자이너에서는 결코 표시되지 않았을 바인딩 오류를 포착하세요.
커뮤니티 도구 키트를 사용합니다. Windows 커뮤니티 도구 키트는 손으로 코딩하는 데 필요한 레이아웃의 양을 줄이는 컨트롤과 도우미를 제공합니다.

피드백

이 페이지가 도움이 되었나요?

Last updated on 2026-09-10