XAML 편집

  • 아티클

일반적으로 사용되는 텍스트 편집기 프로그램으로 XAML(eXtensible Application Markup Language) 문서를 편집할 수 있지만, Microsoft Expression Blend를 사용할 경우 다음과 같은 장점이 있습니다.

  • Expression Blend에서는 XAML 문서를 간편하게 빌드하고 실행(F5 키)하여 변경 결과를 확인할 수 있습니다.

  • Expression Blend에서는 파일이 저장되거나 보기(디자인 보기 및 XAML 보기)가 전환될 때 결과 창의 구문 오류가 업데이트됩니다.

  • XAML 보기에서는 XAML 요소가 색으로 구분되어 쉽게 식별할 수 있습니다. 찾기 기능을 사용하여 특정 텍스트를 찾거나 이동기능을 사용하여 특정 줄로 이동할 수도 있습니다.

  • 디자인 보기에서는 응용 프로그램을 시각적으로 디자인할 수 있고 Expression Blend에서 XAML을 자동으로 생성해 줍니다. XAML 보기 기능을 사용하면 문서의 특정 요소에 대한 XAML로 빠르게 이동할 수도 있습니다.

[!참고]

Expression Blend의 XAML 보기를 이용하거나 텍스트 편집기를 이용해서 XAML 문서 편집을 시작하려면 XAML을 어느 정도 다룰 수 있어야 합니다. XAML을 직접 편집하면 응용 프로그램에서 구문 분석 오류가 발생할 수 있습니다. 이 오류를 해결해야만 Expression Blend 디자인 보기의 아트보드에 문서가 제대로 표시될 수 있고, 응용 프로그램을 빌드하고 실행할 수 있습니다.

이러한 점에 유의하면 디자인 보기와 XAML 보기 간 작업을 통해 XAML의 기본 사항을 효과적으로 익힐 수 있습니다.

[!참고]

Microsoft Visual Studio 2008에서도 XAML 문서를 편집할 수 있습니다. 이 프로그램에는 Expression Blend의 XAML 보기와 동일한 기능이 있습니다.

Expression Blend의 XAML 보기를 사용하여 XAML 편집

Expression Blend의 XAML 보기를 사용하여 Expression Blend 프로젝트의 XAML을 변경할 수 있습니다. Expression Blend 작업 영역에서 아트보드의 오른쪽에 표시되는 XAML 탭을 클릭하여 XAML 보기에 액세스합니다. XAML 보기에서 변경한 내용은 자동으로 디자인 보기에 업데이트됩니다.

XAML 보기 탭(디자인 보기 탭은 숨겨져 있음)

Cc294525.9c6c58bb-f156-4394-a4e2-dc30bfcb7369(KO-KR,Expression.30).png

XAML 보기에서는 워드 프로세싱 프로그램에서 하는 것처럼 새 요소의 코드를 입력하거나, 기존 코드를 선택한 후 잘라내거나 복사하거나 해당 코드에 내용을 붙여 넣을 수 있습니다. 다음 이미지는 XAML 보기에서 선택한 텍스트를 보여 줍니다.

XAML 보기에서 선택한 텍스트

Cc294525.200569f5-655e-43de-bd34-f0799678fec1(KO-KR,Expression.30).png

XAML 보기에서 수행할 수 있는 일반적인 클립보드 작업뿐만 아니라 편집 메뉴의 이동, 찾기, 다음 찾기 및 바꾸기 명령을 사용하여 XAML의 특정 줄로 이동하거나 텍스트를 찾아 바꿀 수 있습니다. 자세한 내용은 이 사용자 가이드의 찾기 및 바꾸기 및 특정 줄로 이동을 참조하십시오.

개별 컨트롤의 구문을 보려면 MSDN에서 컨트롤 라이브러리 항목을 참조하거나 MSDN의 클래스 라이브러리(WPF) 참조에서 XAML 요소 및 특성을 검색하십시오.

Expression Blend의 디자인 보기를 사용하여 XAML 편집

디자인 보기에서 작업하는 경우 XAML이 자동으로 생성됩니다. 디자인 보기에서는 도구 패널에서 새 요소를 추가하고, 해당 요소에 데이터를 바인딩하며 스타일을 지정하고 애니메이션 효과를 적용할 뿐 아니라 사용자 액션에 응답하도록 구성하는 등의 작업을 수행할 수 있습니다. 이처럼 디자인 보기에서 이루어지는 변경 사항은 XAML에 지속적으로 업데이트됩니다.

Expression Blend 작업 영역에서 아트보드의 오른쪽에 표시되는 디자인 탭을 선택하여 디자인 보기에 액세스합니다. 디자인 보기에서 변경한 내용은 자동으로 XAML 보기에 업데이트됩니다.

다음 이미지에서 왼쪽은 Expression Blend의 디자인 보기, 오른쪽은 XAML 보기를 보여 줍니다. 이 이미지에서 디자인 보기의 문서에 Rectangle 요소가 추가되자 사각형(rectangle)에 대한 XAML 코드가 XAML 보기에 생성되었음을 볼 수 있습니다.

Cc294525.b5f7566b-7d9a-4cff-a898-53b96c3bba7c(KO-KR,Expression.30).png

Expression Blend 디자인 보기와 XAML 보기 간 연계

디자인 보기에서 작업할 때 아트보드 또는 개체 및 타임라인 패널에서 요소를 마우스 오른쪽 단추로 클릭한 다음 XAML 보기를 클릭하면 해당 요소에 대한 XAML을 빠르게 볼 수 있습니다. 이렇게 하면 XAML 보기로 자동 전환되고 선택한 개체에 대한 XAML이 강조 표시되어 나타납니다.

Expression Blend의 디자인 보기에서 응용 프로그램 만들기에 대한 자세한 내용은 이 사용자 가이드의 개체 정렬, 도형 및 패스 그리기, 3D 개체 삽입 및 기타 관련 항목을 참조하십시오.