연습: WPF Designer에서 XAML 편집

아티클
08/20/2008

업데이트: 2007년 11월

Windows Presentation Foundation(WPF) Designer for Visual Studio에서는 Visual Studio의 다른 언어 편집기와 기능이 비슷한 XAML 편집기를 제공합니다. 이 항목에서는 IntelliSense 및 개요 등의 기능을 사용하는 방법을 보여 줍니다.

이 연습에서는 다음 작업을 수행합니다.

WPF 프로젝트를 만듭니다.
리소스를 만듭니다.
구문 강조 표시를 봅니다.
태그 탐색을 사용합니다.
개요를 사용합니다.
IntelliSense를 사용합니다.
중괄호 일치를 사용합니다.
자동 서식을 사용합니다.

참고:
실제 설정이나 버전에 따라서 화면에 나타나는 대화 상자와 메뉴 명령이 도움말의 설명과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 Visual Studio 설정을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2008.

프로젝트 만들기

첫 번째 단계로 호스트 응용 프로그램에 대한 프로젝트를 만듭니다.

프로젝트를 만들려면

Visual Basic 또는 Visual C#에서 XamlEditing이라는 새 WPF 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 WPF 응용 프로그램 프로젝트 만들기를 참조하십시오.

WPF Designer에 Window1.xaml이 열립니다.

리소스 만들기

WPF 응용 프로그램에서는 리소스를 사용하는 경우가 많습니다. WPF Designer에서는 축소 가능한 리소스 섹션을 제공하며, 문서 개요 창에서 이러한 리소스 섹션을 탐색할 수 있습니다.

리소스를 만들려면

WPF Designer에서 Window1.xaml을 엽니다.

XAML 뷰에서 Window1의 여는 태그 뒤에 다음 XAML 태그를 삽입합니다.

이 XAML에서는 색 스펙트럼이 있는 선형 그라데이션 브러시를 만듭니다.

<Window.Resources>
    <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

구문 강조 표시

WPF Designer에서는 XAML 코드를 읽기 쉽도록 구문에 따라 텍스트에 색을 칠합니다.

구문 강조 표시를 보려면

XAML 뷰에서 기본 <Grid> 요소를 다음 텍스트로 바꿉니다.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
요소, 속성 및 속성 값에 각각 고유한 색이 사용됩니다. 또한 태그 확장이 Background 속성에 바인딩됩니다. 디자인 뷰에서 모눈 배경도 업데이트됩니다.

XAML 요소와 특성의 색만 변경할 수 있습니다. 자세한 내용은 방법: XAML 뷰 설정 변경을 참조하십시오.

태그 탐색

태그 탐색기를 사용하여 태그 사이를 이동할 수 있습니다. 문서 개요 뷰를 사용하여 탐색할 수도 있습니다. 자세한 내용은 WPF 문서의 요소 계층 탐색을 참조하십시오.

태그 탐색기를 사용하려면

XAML 뷰에서 <Grid> 요소의 여는 태그를 클릭합니다.
WPF Designer 아래쪽에서 태그 탐색기를 찾습니다. 여기에 Grid (grid1)Window/Grid가 표시됩니다.
태그 탐색기에서 마우스 포인터를 Window 요소에 올려 놓습니다.

Window1의 렌더링된 축소판 그림이 나타납니다.
태그 탐색기에서 Window 하이퍼링크를 클릭합니다.

XAML 뷰에서 Window1의 여는 태그가 강조 표시됩니다.
XAML 뷰에서 <Window.Resources> 태그를 클릭합니다.

태그 탐색기에 <Window.Resources> 요소에 대한 XAML 트리 계층 구조가 표시됩니다.
태그 탐색기에서 리소스 왼쪽에 있는 다음 선택 화살표를 클릭합니다.

XAML 뷰에서 <LinearGradientBrush> 요소가 선택됩니다.

개요

WPF Designer에서는 축소 가능한 개요를 완벽하게 지원합니다.

개요를 사용하려면

XAML 뷰에서 <Window.Resources> 요소로 스크롤합니다.
여는 태그 왼쪽에 있는 축소 단추를 클릭합니다.

<Window.Resources> 요소가 한 줄로 축소됩니다.
여는 태그 왼쪽에 있는 확장 단추를 클릭합니다.

<Window.Resources> 요소가 원래 상태로 확장됩니다.

IntelliSense

WPF Designer에서는 IntelliSense를 완벽하게 지원합니다.

IntelliSense를 사용하려면

grid1 요소에서 <Gr을 입력합니다.

Grid 클래스가 선택된 상태로 IntelliSense 목록이 나타납니다.
Tab 키를 눌러 여는 태그를 완성합니다.
.c를 입력합니다. 이때 마침표도 입력해야 합니다.

Children 속성이 선택된 상태로 IntelliSense 목록이 나타납니다.
아래쪽 화살표 키를 사용하여 ColumnDefinitions 속성으로 스크롤합니다.
Tab 키를 눌러 태그를 완성합니다.

사용자 지정 형식에 Intellisense를 사용하는 방법에 대한 자세한 내용은 방법: 네임스페이스를 XAML로 가져오기를 참조하십시오.

중괄호 일치

요소 내에서 중괄호 일치 기능을 사용하여 탐색할 수 있습니다.

중괄호 일치를 사용하려면

XAML 뷰에서 <LinearGradientBrush> 여는 태그 안쪽을 클릭합니다.
Ctrl+]를 누릅니다.

커서가 여는 태그 끝으로 이동합니다.
Ctrl+]를 다시 누릅니다.

커서가 닫는 태그의 시작 부분으로 이동합니다.
<LinearGradientBrush> 요소의 닫는 태그에서 닫는 꺾쇠괄호('>')를 삭제합니다. '>'를 입력하여 닫는 태그를 완성합니다.

XAML 뷰에서 여는 태그와 닫는 태그가 강조 표시됩니다.

자동 서식

Ctrl+KD를 눌러 XAML의 서식을 지정하고 자동 서식 설정을 지정할 수 있습니다. 자세한 내용은 방법: XAML 뷰 설정 변경을 참조하십시오.

자동 서식을 사용하려면

XAML 뷰에서 네 개의 <GradientStop> 요소를 선택합니다.
Shift+Tab을 누릅니다.

네 개의 요소 선언이 왼쪽으로 이동합니다.
Ctrl+KD를 누릅니다.

네 개의 요소 선언이 들여쓰기됩니다. XAML이 다르게 변경될 수도 있습니다.
첫 번째 <GradientStop> 태그에서 Color 특성 앞에 있는 공간을 클릭합니다. Enter 키를 눌러 새 줄을 시작합니다.
Offset 특성 앞에 있는 공백을 클릭하고 Enter 키를 눌러 새 줄을 시작합니다.
Ctrl+KD를 누릅니다.

새 줄에서 특성이 그대로 유지됩니다.
Color 특성 앞에 공백 네 개를 삽입하고 Ctrl+KD를 누릅니다.

Color 특성의 위치가 변경되지 않습니다.

참고 항목

다음을 통해 공유