XAML 코드 편집기

Visual Studio IDE XAML 코드 편집기에서는 Windows 플랫폼용 WPF 및 UWP 앱을 만드는 데 필요한 모든 도구와 Xamarin.Forms 또는 .NET MAUI . 이 문서에서는 XAML 기반 앱을 개발할 때 코드 편집기가 수행하는 역할과 Visual Studio 2019의 XAML 코드 편집기에서 고유한 기능을 모두 설명합니다.

시작하려면 개방형 WPF 프로젝트를 사용하여 IDE(통합 개발 환경)를 살펴보겠습니다. 다음 이미지는 XAML 코드 편집기와 함께 사용할 몇 가지 주요 IDE 도구를 보여줍니다.

Visual Studio 2019 IDE에서 열린 WPF 프로젝트의 XAML

시계 방향으로 가는 이미지의 왼쪽 아래에서 키 IDE 도구는 다음과 같습니다.

• 코드를 만들고 편집하는 이 문서의 제목인 XAML 코드 편집기 창입니다.
• UI를 디자인하는 XAML 디자이너 창입니다.
• 도구 상자 도킹 가능한 창은 UI에 컨트롤을 추가하는 데 사용됩니다.
• 코드를 실행하고 디버그하는 디버그 단추입니다.
  (XAML 핫 다시 로드사용하여 디버깅하는 동안 실시간으로 코드를 편집할 수도 있습니다.)
• 파일, 프로젝트 및 솔루션을 관리하는 솔루션 탐색기 창
• 속성 창에서 UI의 모양과 UI 컨트롤의 작동 방식을 변경합니다.

계속하려면 XAML 코드 편집기에서 자세히 알아보겠습니다.

XAML 코드 편집기 UI

XAML 앱에 대한 코드 편집기 창은 표준 IDE에도 표시되는 일부 UI(사용자 인터페이스) 요소를 공유하지만 XAML 앱을 더 쉽게 개발할 수 있도록 하는 몇 가지 고유한 기능도 포함합니다.

XAML 코드 편집기 창 자체를 살펴보겠습니다.

다음으로 코드 편집기에서 각 UI 요소의 함수를 살펴보겠습니다.

첫 번째 행

XAML 코드 창의 맨 위에 있는 첫 번째 행의 왼쪽에는 디자인 탭, 스왑 창 단추, XAML 탭 및 팝아웃 XAML 단추가 있습니다.

작동 방식은 다음과 같습니다.

• 디자인 탭은 XAML 코드 편집기에서 XAML 디자이너로 포커스를 변경합니다.
• 스왑 창 단추는 XAML 디자이너의 위치와 IDE의 XAML 코드 편집기를 반대로 바꿉니다.
• XAML 탭은 포커스를 XAML 코드 편집기로 다시 변경합니다.
• Pop Out XAML 단추는 IDE 외부에 있는 별도의 XAML 코드 편집기 창을 만듭니다.

오른쪽에는 세로 분할 단추, 가로 분할 단추 및 창 축소 단추가 있습니다.

작동 방식은 다음과 같습니다.

• 세로 분할 단추는 IDE의 XAML 디자이너 및 XAML 코드 편집기의 위치를 가로 맞춤에서 세로 맞춤으로 변경합니다.
• 가로 분할 단추는 IDE의 XAML 디자이너 및 XAML 코드 편집기의 위치를 세로 맞춤에서 가로 맞춤으로 변경합니다.
• 축소 창 단추를 사용하면 코드 편집기든 디자이너든 아래쪽 창에 있는 내용을 축소할 수 있습니다. (아래쪽 창을 복원하려면 동일한 단추를 다시 선택합니다. 이제 확장 창 단추로 이름이 지정됩니다.)

두 번째 행

XAML 코드 창의 맨 위에 있는 두 번째 행에는 두 개의 창 드롭다운 목록이 있습니다. 그러나 이러한 UI 요소에 대한 설명 팝업을 보면 "요소: 창" 및 "멤버: 창"으로 더욱 명확하게 식별됩니다.

창 드롭다운 목록에는 다음과 같이 다양한 함수가 있습니다.

• 요소: 왼쪽의 창 형제 또는 부모 요소를 보고 탐색하는 데 도움이 됩니다.

  특히 코드의 태그 구조를 드러내는 개요 보기 형태로 보여 줍니다. 목록에서 선택하면 코드 편집기의 포커스가 선택한 요소가 포함된 코드 줄에 맞춰 표시됩니다.

  요소: 창 드롭다운 목록 스크린샷

• 멤버: 오른쪽에 있는 창은 특성 또는 자식 요소를 보고 탐색하는 데 유용합니다.

  특히 코드의 속성 목록이 표시됩니다. 목록에서 선택하면 코드 편집기의 포커스가 선택한 속성이 포함된 코드 줄에 맞춰 표시됩니다.

  멤버: 창 드롭다운 목록 스크린샷

가운데 창, 코드 편집기

가운데 창은 XAML 코드 편집기의 "코드" 부분입니다. 여기에는 IDE 코드 편집기찾을 수 있는 대부분의 기능이 포함되어 있습니다. XAML 코드를 개발하는 데 도움이 되는 몇 가지 범용 IDE 기능을 살펴보겠습니다. 또한 IDE의 고유-XAML 기능도 강조 표시합니다.

XAML 코드 편집기의 가운데 창에만 있는 XAML 코드 편집기, 가운데 창의 스크린샷

빠른 작업

빠른 작업 사용하여 단일 작업으로 코드를 리팩터링, 생성 또는 수정할 수 있습니다.

예를 들어, 빠른 작업을 사용하여 수행할 수 있는 유용한 작업 중 하나는 MainWindow.xaml.cs 탭의 C# 코드에서 불필요한 'using' 지시문 을 제거하는 것입니다.

방법은 다음과 같습니다.

1. using 문 위로 마우스를 가져가고 전구 아이콘을 선택한 다음 드롭다운 목록에서 불필요한 사용 제거를 선택합니다.

   

2. 문서, 프로젝트또는 솔루션모든 항목을 수정할지 선택합니다.

3. 미리 보기 대화 상자를 보고 적용선택합니다.

메뉴 모음에서 이 기능에 액세스할 수도 있습니다. 이렇게 하려면 편집>IntelliSense>Usings제거 및 정렬을 선택합니다.

사용 설정에 대한 자세한 내용은 정렬 사용 페이지를 참조하세요. IntelliSense에 대한 자세한 내용은 Visual Studio 페이지의 IntelliSense를 참조하세요. 또한 개발자가 빠른 작업을 사용하는 일반적인 방법 중 일부에 대한 자세한 내용은 일반적인 빠른 작업 페이지를 참조하세요.

변경 내용 추적

왼쪽 여백의 색을 사용하면 파일에서 변경한 내용을 추적할 수 있습니다. 색이 수행하는 작업과 관련된 방법은 다음과 같습니다.

• 파일을 열었지만 저장하지 않은 이후 변경한 내용은 왼쪽 여백(선택 여백이라고 함)의 노란색 막대로 표시됩니다.

  

• 변경 내용을 저장한 후(파일을 닫기 전에) 막대가 녹색 바뀝니다.

  

이 기능을 해제하고 켜려면 텍스트 편집기 설정에서 변경 내용 추적 옵션을 변경합니다(도구>옵션>텍스트 편집기).

코드 문자열 아래에 표시되는 물결선("물결선")을 포함하려면 변경 내용 추적에 대한 자세한 내용은 Visual Studio 코드 편집기 페이지의 기능섹션을편집기 기능을 참조하세요.

상황에 맞는 메뉴를 마우스 오른쪽 단추로 클릭

XAML 코드 편집기에서 코드를 편집할 때 오른쪽 클릭 상황에 맞는 메뉴를 사용하여 액세스할 수 있는 몇 가지 기능이 있습니다. 이러한 기능의 대부분은 Visual Studio IDE에서 보편적으로 사용할 수 있지만 일부는 디자인 창과 함께 코드 편집기를 사용하는 데만 해당합니다.

각 기능의 기능과 유용한 방법은 다음과 같습니다.

• 코드 보기 - 일반적으로 디자인 창과 XAML 코드 편집기가 포함된 기본 보기 옆에 탭으로 표시되는 프로그래밍 언어 코드 창을 엽니다.
• 뷰 디자이너 - 디자인 창과 XAML 코드 편집기가 포함된 기본 보기를 엽니다. (기본 보기에 이미 있는 경우 아무 작업도 수행하지 않습니다.)
• 빠른 작업 및 리팩터링 - 리팩터링, 코드를 생성하거나 기타 방법으로 단일 작업으로 코드를 수정합니다. 코드를 마우스로 가리키면 빠른 작업 또는 리팩터링을 사용할 수 있으면 전구 아이콘이 표시됩니다.
  참고 항목: 빠른 작업 및 코드 리팩터링.
• 이름 바꾸기... - 네임스페이스의 이름만 바꿉니다. 이름을 바꿀 네임스페이스가 없는 경우 "네임스페이스 접두사만 이름을 바꿀 수 있습니다."라는 오류 메시지가 표시됩니다.
• 네임스페이스 제거 및 정렬 - 사용되지 않는 네임스페이스를 제거한 다음 남아 있는 네임스페이스를 정렬합니다.
• 정의 보기 - 편집기에서 현재 위치를 그대로 유지하면서 유형 정의를 미리 봅니다.
  참조: 정의 엿보기 , 및 정의 엿보기를 사용하여 코드 보기 및 편집 ,.
• 정의로 이동 - 형식 또는 멤버의 원본으로 이동하고 결과를 새 탭에서 엽니다.
  참고 항목: 정의로 이동.
• 코드 감싸기... - 선택한 코드 블록 주위에 붙이는 코드 조각을 사용합니다.
  참고 항목: 확장 코드 조각 및 코드 감싸기 코드 조각.
• 코드 조각 삽입 - 커서 위치에 코드 조각을 삽입합니다.
• 컷 - 설명
• 복사 - 자명한
• 붙여넣기 - 설명 불필요
• 개요 - 코드 섹션을 확장하고 축소합니다.
  참고 사항: 개요.
• 소스 제어 - 오픈 소스 리포지토리에 대한 코드 기여 기록을 확인합니다.

가운데 창, 스크롤 막대

스크롤 막대는 코드를 스크롤하는 것 이상을 수행할 수 있습니다. 다른 코드 편집기 창을 여는 데 사용할 수도 있습니다. 또한 스크롤 막대를 사용하여 주석을 추가하거나 다른 디스플레이 모드를 사용하여 보다 효율적으로 코딩할 수 있습니다.

코드 창 분할

코드 편집기의 스크롤 막대에는 오른쪽 위에 분할 단추가 있습니다. 이 옵션을 선택하면 다른 코드 편집기 창을 열 수 있습니다. 서로 독립적으로 작동하므로 서로 다른 위치의 코드에서 작업하는 데 사용할 수 있기 때문에 유용합니다.

편집기 창을 분할하는 방법에 대한 자세한 내용은 편집기 관리 창 페이지를 참조하세요.

주석 또는 지도 모드 사용

스크롤 막대의 모양과 스크롤 막대에 포함된 추가 기능을 변경할 수도 있습니다. 예를 들어 많은 사람들이 코드 변경, 중단점, 책갈피, 오류 및 커서 위치와 같은 시각적 신호를 제공하는 스크롤 막대에 주석을 포함하기를 좋아합니다.

다른 사람들은 스크롤 막대에 코드 줄을 미니어처로 표시하는 맵 모드사용하는 것을 높이 평가합니다. 파일에 많은 코드가 있는 개발자는 지도 모드가 기본 스크롤 막대보다 더 효과적으로 코드 줄로 추적된다는 것을 알 수 있습니다.

스크롤 막대의 기본 설정을 변경하는 방법에 대한 자세한 내용은 스크롤 막대 사용자 지정 페이지를 참조하세요.

XAML 관련 기능

다음 기능의 대부분은 Visual Studio IDE에서 보편적으로 사용할 수 있지만 일부 기능에는 XAML 개발자가 코딩을 더 쉽게 수행할 수 있는 차원이 추가되었습니다.

XAML 코드 조각

코드 조각은 마우스 오른쪽 단추 클릭 상황에 맞는 메뉴 명령 코드 조각 삽입 또는 바로 가기 키 조합(Ctrl+K, Ctrl+X)을 사용하여 코드 파일에 삽입할 수 있는 재사용 가능한 코드의 작은 블록입니다. 우리는 IntelliSense 을 더욱 향상시켜 XAML 코드 조각을 표시할 수 있는 기능을 추가했습니다. 이 기능은 기본 제공 코드 조각뿐만 아니라 수동으로 추가하는 사용자 지정 코드 조각에서도 작동합니다. 일부 기본 XAML 코드 조각에는 #region, Column definition, Row definition, Setter및 Tag포함됩니다.

자세한 내용은 코드 조각 및 C# 코드 조각 페이지를 참조하세요.

XAML #region 지원

Visual Studio에서는 WPF, UWP, Xamarin.Forms및 .NET MAUI XAML 개발자가 #region 지원을 사용할 수 있습니다. Visual Studio 2019에서는 #region 지원을 지속적으로 개선합니다. 예를 들어 버전 16.4 이상에서는 #region 옵션이 <!를 입력하기 시작할 때 표시됩니다.

확장하거나 축소하려는 코드의 섹션을 그룹화하려는 경우 지역을 사용할 수 있습니다.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

지역에 대한 자세한 내용은 #region(C# 참조) 페이지를 참조하세요. 코드 섹션을 확장하고 축소하는 방법에 대한 자세한 내용은 개요 페이지를 참조하세요.

XAML 주석

개발자는 종종 주석을 사용하여 코드를 문서화하는 것을 선호합니다. 다음과 같은 방법으로 MainWindow.xaml 탭에 있는 XAML 코드에 주석을 추가할 수 있습니다.

• 메모 앞에 <!-- 입력한 다음 주석 다음에 --> 추가합니다.

• <! 입력한 다음 옵션 목록에서 !-- 선택합니다.

  

• 주석으로 둘러싸려는 코드를 선택한 다음 IDE의 도구 모음에서 주석 단추를 선택합니다. 작업을 되돌리려면 주석 제거 단추를 선택합니다.

  

• 주석으로 둘러싸려는 코드를 선택한 다음 Ctrl +Kctrl +C누릅니다. 선택한 코드의 주석 처리를 제거하려면 Ctrl Ctrl+K, Ctrl Ctrl+U키를 누릅니다.

MainWindow.xaml.cs 탭에 있는 C# 코드에서 주석을 사용하는 방법에 대한 자세한 내용은 설명서 주석 페이지를 참조하세요.

XAML 전구

XAML 코드에 표시되는 전구 아이콘은 코드를 리팩터링, 생성 또는 수정하는 데 사용할 수 있는 빠른 작업 일부입니다.

다음은 XAML 코딩 환경에 도움이 되는 몇 가지 예입니다.

• 불필요한 네임스페이스제거합니다. XAML 코드 편집기에서 불필요한 네임스페이스가 흐리게 표시된 텍스트에 표시됩니다. 불필요한 사용을 통해 커서를 가리키면 전구가 나타납니다. 드롭다운 목록에서 불필요한 네임스페이스 제거 옵션을 선택하면 제거할 수 있는 미리 보기가 표시됩니다.

  

• 네임스페이스 이름 바꾸기 . 네임스페이스를 강조 표시한 후 오른쪽 클릭 상황에 맞는 메뉴에서 사용할 수 있는 이 기능을 사용하면 설정의 여러 인스턴스를 한 번에 쉽게 변경할 수 있습니다. 메뉴 모음, 편집>리팩터>이름 바꾸기을(를) 사용하거나, Ctrl+R을 누르고, 다시 Ctrl+R 을 누르면 이 기능에 액세스할 수도 있습니다.

  마우스 오른쪽 단추 클릭 상황에 맞는 메뉴에서 XAML 코드 편집기의 네임스페이스 이름 바꾸기 옵션마우스 오른쪽 단추 클릭 상황에 맞는 메뉴를 사용하여 표시되는 XAML 코드 편집기의 네임스페이스 이름 바꾸기 옵션 스크린샷을

  자세한 내용은 코드 기호 이름 바꾸기 리팩터링 페이지를 참조하십시오.

UWP용 조건부 XAML

조건부 XAML은 XAML 태그에서 ApiInformation.IsApiContractPresent 메서드를 사용하는 방법을 제공합니다. API의 존재에 따라 코드 숨김을 사용하지 않고 마크업에서 속성을 설정하고 객체를 인스턴스화할 수 있도록 합니다.

자세한 내용은 조건부 XAML 페이지 및 데스크톱 앱(XAML Islands) 페이지의 호스트 UWP XAML 컨트롤을 참조하세요.

XAML 구조 시각화 도우미

코드 편집기에서 구조 시각화 도우미 기능은 코드에서 열린 태그 요소와 닫힌 태그 요소의 일치를 나타내는 세로 파선인 구조 안내선을 보여 줍니다. 이러한 세로선을 사용하면 논리 블록이 시작되고 끝나는 위치를 더 쉽게 확인할 수 있습니다.

자세한 내용은 탐색 코드 페이지를 참조하세요.

XAML용 IntelliCode

코드에 XAML 태그를 추가하는 경우 일반적으로 왼쪽 꺾쇠 괄호 <시작합니다. 해당 꺾쇠 괄호를 입력하면 인기 있는 여러 XAML 태그를 나열하는 IntelliCode 메뉴가 나타납니다. 코드에 빠르게 추가할 항목을 선택합니다.

IntelliCode 선택 항목은 목록의 맨 위에 표시되고 별표로 표시되므로 인식할 수 있습니다.

대한 IntelliCode 목록 스크린샷

자세한 내용은 IntelliCode 페이지의 개요를 참조하세요.

설정

Visual Studio IDE의 설정에 대한 자세한 내용은 모든 코드 편집기 페이지의 기능에 대해 참조하세요.

XAML 선택적 설정

옵션 대화 상자를 사용하여 XAML 코드 편집기 기본 설정을 변경할 수 있습니다. 설정을 보려면 도구>옵션>텍스트 편집기>XAML선택합니다.

대한 옵션 목록 스크린샷

참고

바로 가기 키를 사용하여 옵션 대화 상자에 액세스할 수도 있습니다. 방법은 다음과 같습니다. Ctrl+Q 눌러 IDE를 검색하고 옵션입력한 다음 enter누릅니다. 그런 다음 Ctrl+E 눌러 옵션 대화 상자를 검색하고, 텍스트 편집기 입력하고, 입력하고, XAML 입력한 다음, enter누릅니다.

바로 가기 키에 대한 자세한 내용은 Visual Studio 페이지에 대한 바로 가기 팁을 참조하세요.

유니버설 텍스트 편집기 옵션

XAML에 대한 옵션 대화 상자에서 다음 처음 세 항목은 Visual Studio IDE에서 지원하는 모든 프로그래밍 언어에 범용입니다. 이러한 옵션 및 사용 방법에 대해 자세히 알아보려면 다음 표의 연결된 정보를 참조하세요.

이름	추가 정보
일반	옵션 대화 상자: 모든 언어> 텍스트 편집기
스크롤 막대	옵션, 텍스트 편집기, 모든 언어, 스크롤 막대
탭	옵션, 텍스트 편집기, 모든 언어, 탭

XAML 관련 텍스트 편집기 옵션

다음 표에서는 XAML 기반 앱을 개발할 때 편집 환경을 향상시킬 수 있는 옵션 대화 상자의 설정을 나열합니다. 이러한 옵션 및 사용 방법에 대해 자세히 알아보려면 연결된 정보를 방문하세요.

이름	추가 정보
서식	옵션, 텍스트 편집기, XAML, 서식
기타	옵션, 텍스트 편집기, XAML, 기타

팁

기타 섹션의 Capitalize 이벤트 처리기 메서드 이름 설정은 XAML 개발자에게 특히 유용합니다. 이 설정은 새 설정이므로 기본적으로 해제되지만 코드에서 적절한 대/소문자 구분을 지원하도록 설정하는 것이 좋습니다.

다음 단계

디버그 모드에서 앱을 실행하는 동안 실시간으로 코드를 편집하는 방법에 대한 자세한 내용은 XAML 핫 다시 로드 페이지를 참조하세요.

참고

• Visual Studio 코드 편집기 기능
• UWP 앱의 XAML
• Xamarin.Forms 앱에서의 XAML
• .NET MAUI 앱의 XAML