WPF 및 Silverlight 디자이너 개요

업데이트: 2011년 3월

WPF 및 Silverlight Designer에서는 WPF 및 Silverlight 응용 프로그램을 만들기 위한 시각적 디자인 지원 기능을 제공합니다. 도구 상자에서 컨트롤을 끌어 오고 속성 창에서 속성을 설정하여 응용 프로그램의 사용자 인터페이스를 만들 수 있습니다. XAML 편집기에서 XAML을 직접 편집할 수도 있습니다. 다음 그림에서는 WPF 및 Silverlight Designer와 몇 가지 지원 창을 보여 줍니다.

WPF 및 Silverlight Designer를 처음 시작하면 데이터 소스 창과 문서 개요 창이 Visual Studio 왼쪽에 축소되어 나타납니다. 왼쪽에 탭을 표시하고 고정하면 이전 뷰를 볼 수 있어서 디자인 화면을 편리하게 사용할 수 있습니다.

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

• 디자인 뷰

• XAML 뷰

• 속성 창

• 데이터 소스 창

• 문서 개요 창

• 다양한 기능의 대화형 사용자 인터페이스 만들기

• Expression Blend와의 공동 작업

디자인 뷰

디자인 뷰는 WPF 및 Silverlight 컨트롤과 응용 프로그램을 만들기 위한 시각적 디자인 화면을 제공합니다. 디자인 뷰에는 현재 XAML 뷰에 있는 XAML이 렌더링됩니다. 디자인 화면에서 컨트롤을 변경하면 XAML 뷰가 업데이트되어 변경 내용이 적용됩니다. 디자인 뷰는 WPF 응용 프로그램의 창이나 페이지에 컨트롤을 정렬하는 데 사용할 수 있는 다양한 기능을 제공합니다. 다음 그림에서는 디자인 뷰의 몇 가지 기능을 보여 줍니다.

확대/축소

확대/축소 컨트롤을 사용하면 디자인 화면의 크기를 조정할 수 있습니다. **10%**에서 20x까지 확대/축소할 수 있습니다. 확대/축소 설정은 솔루션의 .suo 파일에 저장됩니다.

이동

디자인 화면을 확대하면 가로 또는 세로 스크롤 막대가 나타나 화면 밖에 있는 디자인 화면의 부분으로 이동하여 볼 수 있습니다. 스페이스바를 누른 상태로 디자인 화면을 끌어 이동합니다.

뷰에 맞춤

뷰에 맞춤 단추를 사용하면 디자인 화면을 디자인 뷰의 전체 화면 크기로 맞출 수 있습니다. 이 기능은 화면을 대폭 확대하거나 축소한 경우에 유용합니다.

모눈 레일

모눈 레일을 사용하면 Grid 컨트롤의 행과 열을 관리할 수 있습니다. 열과 행을 만들거나 삭제하고 상대 너비와 높이를 조정할 수 있습니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

모눈선

모눈선을 사용하면 Grid의 열 및 행의 너비와 높이를 제어할 수 있습니다. Grid 위쪽이나 왼쪽의 레일을 클릭하여 열이나 행을 새로 추가할 수 있습니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

모눈선 표시기

모눈선 표시기는 모눈 레일에 삼각형으로 표시됩니다. 모눈선 표시기나 모눈선 자체를 끌면 마우스를 이동할 때 인접한 열이나 행의 너비나 높이가 업데이트됩니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

이동 핸들

이동 핸들은 선택된 패널 컨트롤의 왼쪽 위에 표시되며 패널을 이동하는 데 사용할 수 있습니다. 이동 핸들을 클릭하고 디자인 화면의 원하는 위치로 컨트롤을 끕니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.

크기 조정 핸들

크기 조정 핸들은 선택된 컨트롤에 표시되며 컨트롤의 크기를 조정하는 데 사용할 수 있습니다. 컨트롤의 크기를 정확하게 조정할 수 있도록 컨트롤 크기를 조정할 때 해당 너비 및 높이 값이 표시됩니다.

여백 선

여백은 컨트롤 가장자리와 해당 컨테이너 가장자리 사이의 고정된 공간 크기를 나타냅니다. 여백 선을 클릭하여 컨트롤의 여백을 설정할 수 있습니다. 자세한 내용은 방법: WPF 디자이너에서 컨트롤의 여백 설정을 참조하십시오.

여백 스텁

선택한 컨트롤의 여백이 0으로 설정된 경우 컨트롤에 여백 스텁이 나타납니다. 여백 스텁을 클릭하여 컨테이너의 해당 가장자리로까지의 여백 거리를 설정합니다. 자세한 내용은 방법: WPF 디자이너에서 컨트롤의 여백 설정을 참조하십시오.

맞춤선

맞춤선을 사용하면 서로를 기준으로 컨트롤을 맞출 수 있습니다. 맞춤선을 사용하는 경우 다른 컨트롤을 기준으로 컨트롤을 끌 때 일부 컨트롤의 가장자리와 텍스트가 가로 또는 세로로 맞춰지면 맞춤선이 표시됩니다. 자세한 내용은 방법: 텍스트 기준선 및 여백에 맞추기를 참조하십시오.

정보 표시줄

디자인 뷰 위쪽에 정보 표시줄이 나타나고 디자인 뷰에 렌더링 문제에 대한 정보가 표시됩니다. 일부 경우 정보 표시줄을 클릭하여 문제에 대한 추가 정보를 볼 수 있습니다. 다음 그림은 정보 표시줄을 확대해서 표시한 것입니다.

크기 조정 막대

열이나 행이 두 개 이상 있는 Grid 컨트롤의 모눈 레일로 마우스 포인터를 이동하면 레일 바깥쪽에 크기 조정 막대가 나타납니다. 크기 조정 막대를 사용하면 Grid 행 및 열에 대해 고정, 별표 및 자동 크기 조정 옵션을 설정할 수 있습니다. 자세한 내용은 방법: Grid 컨트롤에서 행과 열 크기 지정을 참조하십시오.

루트 크기 조정 태그

디자인 뷰에서 창을 선택하면 창의 오른쪽 아래에 루트 크기 조정 태그가 나타납니다. 루트 크기 조정 태그를 사용하면 창의 루트 크기를 자동과 고정 간에 전환할 수 있습니다. 자세한 내용은 디자인 타임 특성을 참조하십시오.

XAML 뷰

XAML(Extensible Application Markup Language)은 응용 프로그램 사용자 인터페이스를 지정하는 데 사용할 수 있는 선언적이며 XML에 기반을 둔 구문을 제공합니다. WPF 및 Silverlight Designer는 응용 프로그램의 렌더링된 XAML 태그에 대한 XAML 뷰 및 이와 동기화된 디자인 뷰를 제공합니다. XAML 뷰에는 IntelliSense, 자동 서식, 구문 강조 표시 및 태그 탐색 기능이 포함됩니다. 다음 그림에서는 XAML 뷰의 몇 가지 기능을 보여 줍니다.

분할된 뷰 구분선

분할된 뷰 구분선을 사용하면 디자인 뷰 및 XAML 뷰의 상대적 크기를 제어할 수 있습니다. 뷰를 서로 바꾸거나 가로로 분할할지 또는 세로로 분할할지 제어할 수 있으며 세로 또는 가로로 분할된 뷰를 축소할 수 있습니다. 자세한 내용은 분할된 뷰: WPF 디자인 화면과 XAML을 동시에 보기를 참조하십시오.

태그 확장 IntelliSense

표준 언어 IntelliSense 외에도 XAML 뷰는 태그 확장에 대한 IntelliSense를 지원합니다. XAML 뷰에서 왼쪽 중괄호({)를 입력하면 IntelliSense는 사용할 수 있는 태그 확장을 표시합니다. 목록에서 태그 확장을 선택하면 IntelliSense는 사용할 수 있는 특성을 표시합니다. 자세한 내용은 연습: WPF Designer에서 XAML 편집을 참조하십시오.

태그 탐색기

태그 탐색기는 XAML 뷰 아래에 나타나며 XAML 뷰에서 현재 선택된 태그의 부모 태그로 이동하는 데 사용할 수 있습니다. 태그 탐색기에서 태그 위로 마우스 포인터를 이동하면 해당 요소에 대한 축소판 그림이 미리 보기로 표시됩니다. 연습: WPF Designer에서 XAML 편집.

확대/축소

확대/축소 컨트롤을 사용하면 XAML 뷰의 크기를 조정할 수 있습니다. **20%**에서 **400%**까지의 범위 내에서 확대/축소할 수 있습니다.

속성 창

속성 창을 사용하면 디자인 뷰에서 컨트롤에 속성 값을 설정할 수 있습니다. 다음 그림에서는 속성 창의 예를 보여 줍니다.

속성 창의 위쪽에는 다양한 옵션이 있습니다. 현재 선택된 컨트롤의 이름을 변경하려면 이름 상자에 커서를 놓고 이름을 입력합니다. 속성 창의 오른쪽 위에는 현재 선택된 컨트롤의 축소판 그림이 미리 보기로 표시됩니다. 속성을 범주별로 또는 사전순으로 나열하려면 항목별 단추 또는 사전순 단추를 클릭합니다. 속성을 소스별로 정렬하려면 속성 소스별 정렬 단추를 클릭합니다. 컨트롤의 이벤트 목록을 보려면 이벤트 단추를 클릭합니다. 속성을 검색하려면 검색 상자에 속성 이름 입력을 시작합니다. 입력하는 동안 속성 창에는 검색 내용과 일치하는 속성이 표시됩니다.

첫 번째 열에서 속성 이름 오른쪽에 속성 표식이 있습니다. 속성 마커는 속성에 데이터 바인딩이나 리소스가 적용되었는지 여부를 표시합니다. 속성 표식을 클릭하여 데이터 바인딩 작성기 또는 리소스 선택기를 열거나 리소스 정의를 탐색할 수 있습니다. 다음 그림에서는 스타일의 속성 표식을 클릭할 때 사용할 수 있는 옵션을 보여 줍니다.

데이터 바인딩 작성기

데이터 바인딩 작성기를 사용하면 XAML을 입력하지 않고 데이터 바인딩을 만들 수 있습니다. 리소스, 데이터 컨텍스트 및 요소 속성에 대한 바인딩을 만들 수 있습니다. 값 변환기를 적용할 수도 있습니다. 자세한 내용은 연습: WPF Designer를 사용하여 데이터 바인딩 만들기 및 연습: DesignInstance를 사용하여 디자이너의 데이터에 바인딩을 참조하십시오.

여백 편집기

여백 편집기를 사용하면 각 여백 설정을 확인하고 해당 설정이 컨트롤의 배치에 주는 영향을 확인할 수 있습니다. 여백 편집기를 사용하여 한 컨트롤의 여백을 변경하거나 여러 컨트롤의 여백을 편집할 수도 있습니다. 자세한 내용은 방법: WPF 디자이너에서 컨트롤의 여백 설정을 참조하십시오.

리소스 선택기

리소스 선택기를 사용하면 리소스를 찾아서 속성 창의 속성에 할당할 수 있습니다. 하드 코딩된 값을 리소스로 추출하여 쉽게 재사용할 수도 있습니다. 자세한 내용은 리소스 사용을 참조하십시오.

브러시 편집기

브러시 편집기를 사용하면 속성 창에서 다양한 종류의 브러시를 만들 수 있습니다. 자세한 내용은 방법: 브러시 편집기를 사용하여 브러시 만들기를 참조하십시오.

데이터 소스 창

데이터 소스 창을 사용하여 WPF 응용 프로그램에 데이터를 손쉽게 통합할 수 있습니다. 데이터 연결을 설정할 때 데이터 테이블을 디자인 화면으로 끌어 오면 비즈니스 논리 및 데이터 바인딩이 자동으로 생성됩니다. 개체, ADO.NET 데이터 집합, 엔터티 데이터 모델 또는 서비스에 바인딩할 수 있습니다. 자세한 내용은 Visual Studio에서 데이터에 WPF 컨트롤 바인딩을 참조하십시오.

문서 개요 창

문서 개요 창은 XAML 문서에 대한 계층 구조 보기를 제공합니다. 문서 개요 창을 사용하여 XAML 요소를 미리 보거나 선택하거나 삭제할 수 있습니다. 다음 그림에서는 속성 창의 예를 보여 줍니다.

자세한 내용은 WPF 문서의 요소 계층 탐색을 참조하십시오.

다양한 기능의 대화형 사용자 인터페이스 만들기

WPF에서 Window와 Page 클래스는 사용자에게 정보를 표시하는 데 사용할 수 있는 시각적 화면입니다. 일반적으로 Window에 컨트롤을 추가하고 마우스 클릭이나 키 누름 등과 같은 사용자 동작에 대한 응답을 개발하는 방식으로 WPF 응용 프로그램을 만듭니다. 컨트롤은 데이터를 표시하거나 데이터 입력을 받아들이는 개별적인 UI(사용자 인터페이스) 요소입니다.

사용자가 Window 또는 창의 컨트롤 중 하나에 대해 어떤 동작을 수행하면 이벤트가 발생합니다. 응용 프로그램에서는 이벤트 발생 시 이벤트에 응답하고 이를 처리합니다. 자세한 내용은 방법: 단순한 이벤트 처리기 만들기를 참조하십시오.

WPF에는 텍스트 상자, 단추, 드롭다운 목록, 라디오 단추, 심지어는 웹 페이지에 이르기까지 창에 추가할 수 있는 다양한 컨트롤이 포함되어 있습니다. 창에 사용할 수 있는 모든 컨트롤의 목록을 보려면 컨트롤 라이브러리를 참조하십시오. 기존 컨트롤 중에 적합한 컨트롤이 없는 경우 WPF에서는 UserControl 및 Control 클래스를 사용하여 사용자 지정 컨트롤을 직접 만들 수 있도록 지원합니다.

WPF 및 Silverlight Designer의 끌어서 놓기 기능을 사용하면 간편하게 WPF 응용 프로그램을 만들 수 있습니다. 마우스 포인터로 컨트롤을 선택한 다음 창의 원하는 위치에 추가하기만 하면 됩니다. 디자이너의 맞춤선 및 연속 확대/축소 등의 도구를 사용하면 컨트롤을 쉽게 정렬할 수 있습니다.

마지막으로 사용자 지정 UI 요소를 만들어야 하는 경우에는 선, 원 및 기타 도형을 창에서 렌더링할 때 선택할 수 있는 다양한 클래스가 포함된 System.Windows.Media 및 System.Windows.Shapes 네임스페이스를 사용합니다.

창과 컨트롤 만들기에 대한 도움말

이러한 기능을 사용하는 방법에 대한 단계별 정보를 보려면 다음 도움말 항목을 참조하십시오.

설명	도움말 항목
Visual Studio를 사용하여 새 WPF 응용 프로그램 만들기	방법: 새 WPF 응용 프로그램 프로젝트 만들기
창에서 컨트롤 사용	방법: 디자인 화면의 요소 선택 및 이동
컨트롤에 대한 이벤트 처리기 만들기	방법: 단순한 이벤트 처리기 만들기
창과 해당 창의 컨트롤에서 이벤트 처리	방법: 연결된 이벤트 사용
WPF 또는 Silverlight 레이아웃 탐색	WPF 문서의 요소 계층 탐색
동적 레이아웃 만들기	WPF Designer의 레이아웃
사용자 지정 WPF 컨트롤 만들기	방법: WPF UserControl 라이브러리 프로젝트 만들기
데이터 바인딩 만들기	WPF Designer에서 데이터 바인딩

Expression Blend와의 공동 작업

WPF에서는 콘텐츠와 콘텐츠에 대한 표현이 엄격하게 분리되므로 소프트웨어 개발자와 그래픽 디자이너는 응용 프로그램의 모양과 동작에 대한 작업을 공동으로 진행할 수 있습니다. WPF 및 Silverlight Designer는 소프트웨어 개발자에 맞게 최적화되어 있고 Expression Blend는 그래픽 디자이너에 맞게 최적화되어 있습니다. 자세한 내용은 Expression Blend와의 공동 작업을 참조하십시오.

참고 항목

개념

Windows Forms 개발자를 위한 WPF Designer

Expression Blend와의 공동 작업

기타 리소스

WPF Designer

컨트롤 라이브러리

WPF의 XAML

변경 기록

날짜	변경 내용	이유
2011년 3월	속성 창과 여백 편집기에 대한 정보를 업데이트했습니다.	향상된 기능 관련 정보