Visual Studio의 XAML 디자이너를 사용하면 WPF 및 UWP 프로젝트에 대한 XAML 문서를 시각적으로 편집할 수 있습니다. 디자이너 옵션을 사용하도록 설정하고 사용자 지정하면 워크플로를 간소화하고 필요에 맞게 편집 환경을 조정할 수 있습니다. 이 문서에서는 디자이너를 사용하도록 설정하고 키 옵션을 구성하는 방법을 안내합니다.
필수 조건
- Visual Studio 설치됨
- XAML 기반 프로젝트(예: WPF 또는 UWP)
XAML 디자이너 사용
XAML 디자이너가 XAML 문서에 대한 시각적 편집 기능 및 고급 IntelliSense에 액세스할 수 있도록 설정합니다.
- Visual Studio를 시작하고 주 메뉴에서 도구 > 옵션을 선택합니다.
옵션 창에서 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
XAML 디자이너 사용 확인란을 선택합니다.
변경 내용을 적용하려면 Visual Studio를 다시 시작합니다.
- 옵션 대화 상자에서 XAML 디자이너>일반 섹션을 확장합니다.
XAML 디자이너 사용 확인란을 선택한 다음 확인을 선택합니다.
변경 내용을 적용하려면 Visual Studio를 다시 시작합니다.
기본 문서 보기 설정
XAML 소스 코드, 코드의 시각적 디자인 보기 또는 둘 다를 포함하여 열 때 XAML 문서가 표시되는 방식을 선택합니다.
- 도구>옵션 창을 열고 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
- 도구>옵션 대화 상자를 열고 XAML 디자이너>일반 섹션을 확장합니다.
드롭다운 목록을 사용하고 기본 문서 보기 설정의 값을 설정합니다.
- 원본 뷰: XAML 소스 코드만 표시합니다.
- 디자인 뷰: 비주얼 디자이너만 표시합니다.
- 분할 보기: 비주얼 디자이너와 소스 코드를 나란히 표시합니다.
- 확인을 선택합니다.
분할 방향 변경
워크플로에 맞게 분할 보기의 레이아웃을 조정합니다.
- 도구>옵션 창을 열고 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
- 도구>옵션 대화 상자를 열고 XAML 디자이너>일반 섹션을 확장합니다.
드롭다운 목록을 사용하고 분할 방향 설정의 값을 설정합니다.
- 세로: 왼쪽 창에 소스 코드를 표시하고 오른쪽 창에 비주얼 디자이너를 표시합니다.
- 가로: 위쪽 창에 비주얼 디자이너를 표시하고 아래쪽 창에 소스 코드를 표시합니다.
- 기본값: 플랫폼 권장 방향을 사용합니다.
- 확인을 선택합니다.
확대/축소 동작 구성
쉽게 탐색할 수 있는 XAML 디자이너를 확대/축소하는 방법을 설정합니다.
- 도구>옵션 창을 열고 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
- 도구>옵션 대화 상자를 열고 XAML 디자이너>일반 섹션을 확장합니다.
드롭다운 목록을 사용하여 사용 설정에서 확대/축소 값을 설정합니다.
- 마우스 휠
- Ctrl+ 마우스 휠
- Alt + 마우스 휠
- 확인을 선택합니다.
Visual Studio 설정을 다시 설정하는 방법에 대한 자세한 내용은 설정 재설정을 참조하세요.
기본 확대/축소 설정
이 설정을 사용하여 XAML 문서를 보기 위한 기본 확대/축소 값을 결정합니다.
- 도구>옵션 창을 열고 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
- 도구>옵션 대화 상자를 열고 XAML 디자이너>일반 섹션을 확장합니다.
드롭다운 목록을 사용하고 기본 확대/축소 설정 옵션의 값을 설정합니다.
- 마지막 사용: 기본적으로 모든 XAML 문서에 마지막으로 사용한 확대/축소 값을 사용합니다. XAML 문서를 처음으로 열면 "모두 맞춤" 설정이 처음으로만 사용됩니다.
- 모두 맞춤: XAML 디자이너의 확대/축소 값을 "모두 맞춤"으로 설정하려면 이 옵션을 사용합니다. XAML 문서를 닫고 다시 열면 마지막 집합 값이 해당 세션에 대해 유지되지만 다른 세션의 경우 기본적으로 "모두 맞춤"이 사용됩니다.
- 확인을 선택합니다.
편집기 설정
이러한 설정은 XAML 문서를 편집할 때 시각적 디자이너 동작을 결정합니다.
| 이름 | Description |
|---|---|
| 만들 때 대화형 요소의 이름을 자동으로 지정합니다. | 디자이너에 추가할 때 새 대화형 요소에 대한 기본 이름을 제공할지 여부를 지정합니다. |
| 요소 생성 시 레이아웃 속성 자동 삽입 | 디자이너에 레이아웃 속성을 추가할 때 새 요소에 대한 레이아웃 속성이 제공되는지 여부를 지정합니다. 레이아웃 속성은 컨트롤의 레이아웃(예: Margin 및 VerticalAlignment)에 영향을 주는 속성입니다. 다음 XAML은 이 옵션을 선택하지 않고 단추를 만드는 방법을 보여 줍니다.<Button Content="Button" HorizontalAlignment="Left" Margin="245,56,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/><Button Content="Button" Grid.Row="1"/> |
| 사분면 기반 레이아웃 사용 | 현재 선택한 컨트롤이 부모 컨테이너의 가장 가까운 가장자리에 맞춰지는지 여부를 지정합니다. 이 확인란의 선택을 취소하면 이동 또는 만들기 작업 중에 컨트롤 맞춤이 변경되지 않습니다. |
| 도구 상자 항목을 자동으로 채웁니다. | 현재 솔루션의 사용자 정의 컨트롤과 사용자 지정 컨트롤이 도구 상자에 자동으로 표시되는지 여부를 지정합니다. |
| 요소 생성 시 샘플 데이터 자동 추가 | 디자이너에 추가할 때 새 대화형 요소에 대한 샘플 데이터를 자동으로 추가할지 여부를 지정합니다. |
| 디자이너용 빠른 작업 활성화 | 키보드 빠른 작업을 사용하여 도구 상자의 기능에 액세스할 수 있습니다. |
설정(Blend에만 해당)
Blend를 사용하여 XAML 파일을 편집할 때 고유한 설정에 액세스하려면 다음 옵션을 사용합니다.
Blend에서 도구>옵션 창을 열고 모든 설정>XAML 디자이너>일반 섹션을 확장합니다.
Blend에서 도구>옵션 대화 상자를 열고 XAML 디자이너>일반 섹션을 확장합니다.
Blend 관련 속성은 다음과 같습니다.
- 형식 단위: 디자이너의 측정값이 포인트 또는 픽셀을 기반으로 하는지 여부를 지정합니다. 유니버설 Windows 앱은 포인트를 지원하지 않으므로 점을 선택하면 단위가 자동으로 픽셀로 변환됩니다.
아트보드(Blend 전용)
Blend에서 XAML 문서를 편집할 때 이러한 설정을 사용하여 XAML 디자이너 동작을 확인합니다.
Blend에서 도구>옵션 창을 열고 모든 설정>XAML 디자이너>아트보드 섹션을 확장합니다.
Blend에서 도구>옵션 대화 상자를 열고 XAML 디자이너>아트보드 섹션을 확장합니다.
다음 섹션에서는 사용 가능한 Artboard 속성에 대해 설명합니다.
스냅 기능
| 이름 | Description |
|---|---|
| 스냅 눈금 표시 | 컨트롤을 정렬하는 데 도움이 되는 눈금선이 디자이너에 표시되는지 여부를 지정합니다. 눈금선에 맞춤 옵션이 선택되면, 디자이너의 컨트롤은 이 눈금선에 맞춰집니다. |
| 눈금선에 맞춤 | 컨트롤이 디자이너 주위에 추가되거나 이동되면 눈금선에 맞춰집니다. |
| 눈금선 간격 | 형식 단위 설정에 따라 결정되는 픽셀 또는 포인트의 눈금선 사이의 간격을 지정합니다. |
| 스냅라인에 맞춤 | 컨트롤이 맞춤선에 맞출지 여부를 지정합니다. |
| 기본 여백 | 맞춤선을 사용하도록 설정하면 컨트롤과 맞춤선 사이의 간격을 픽셀 또는 포인트로 지정합니다(형식 단위 설정에 따라 결정됨). |
| 기본 패딩 | 맞춤선에 맞춤이 활성화되면, 형식 단위 설정에 따라 컨트롤과 맞춤선 사이의 추가 간격을 픽셀 또는 포인트 단위로 지정합니다. |
애니메이션
Blend에서 종속(가속되지 않은) 애니메이션을 사용할 때 경고가 표시되도록 설정하려면 애니메이션 설정을 사용합니다.
효과
Blend에서 작업할 때 XAML 디자이너에서 XAML 파일을 편집할 때 효과 설정을 사용하여 효과가 렌더링되는지 여부를 확인합니다.
| 이름 | Description |
|---|---|
| 렌더링 효과 | Blend를 사용하여 XAML 디자이너에서 XAML 파일을 편집할 때 효과가 렌더링되는지 여부를 지정합니다. |
| 확대/축소 임계값 | 렌더링 효과 확인란을 선택할 때 효과가 렌더링되는 확대/축소의 백분율 을 지정합니다 . 이 설정을 넘어 확대/축소하면 XAML 디자이너에서 효과가 더 이상 렌더링되지 않습니다. |