WPF Designer 개요

업데이트: 2007년 11월

이 항목에서는 Windows Presentation Foundation(WPF) Designer for Visual Studio에 대해 설명합니다. WPF는 Windows Forms과 같은 이전의 뷰 기술과는 다른 Windows Vista용 사용자 인터페이스 기술입니다.

WPF Designer는 Windows Forms 디자이너와 비슷한 시각적 디자인을 지원합니다. 도구 상자에서 컨트롤을 끌어 오고 속성 창에서 속성을 설정하여 응용 프로그램의 사용자 인터페이스를 만들 수 있습니다. XAML 편집기에서 XAML을 직접 편집할 수도 있습니다.

WPF Designer 창

WPF Designer에는 XAML 문서를 표시하고 편집하는 데 사용하는 여러 개의 창이 있습니다. 다음 그림에서는 WPF Designer의 몇몇 창을 보여 줍니다.

디자인 뷰

디자인 뷰는 WPF 컨트롤 및 응용 프로그램을 만들기 위한 시각적 디자인 화면을 제공합니다. 디자인 뷰에는 현재 XAML 뷰에 있는 XAML의 렌더링된 표현이 나타납니다.

도구 상자에서 컨트롤을 끌어 디자인 화면에 가져다 놓을 수 있으며 컨트롤을 끌어서 배치할 수 있습니다. 몇 가지 디자인 기능을 사용하면 컨트롤을 원하는 위치에 정확히 배치할 수 있습니다. 디자인 화면에서 컨트롤을 변경하면 XAML 뷰가 업데이트되어 변경 내용이 적용됩니다. 자세한 내용은 방법: WPF 창에 컨트롤 추가 및 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.

XAML 뷰

XAML 뷰는 IntelliSense, 자동 서식, 구문 강조 표시 및 태그 탐색을 비롯하여 XAML 문서에 대한 완전한 편집 환경을 제공합니다. XAML을 편집하면 디자인 뷰가 업데이트되어 변경 내용이 적용됩니다.

자세한 내용은 연습: WPF Designer에서 XAML 편집을 참조하십시오.

속성 창

속성 창을 사용하면 디자인 뷰에서 컨트롤에 속성 값을 설정할 수 있습니다.

속성 창에 액세스하려면 보기 메뉴를 열고 속성 창을 선택하거나 Ctrl+W, P 또는 F4를 누릅니다. 디자인 뷰에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 바로 가기 메뉴에서 속성을 클릭해도 됩니다. 속성 창에는 현재 선택된 컨트롤의 축소판 그림이 미리 보기로 표시됩니다.

속성을 검색하려면 속성 창의 맨 위에 있는 검색 상자에 속성 이름 입력을 시작합니다. 입력하는 동안 속성 창에는 검색 내용과 일치하는 속성이 표시됩니다. 검색을 제거하고 선택한 개체의 속성을 모두 표시하려면 지우기를 클릭합니다.

Visual Studio 2008 서비스 팩 1부터는 속성을 사전순 또는 범주별으로 정렬할 수 있습니다. 속성을 사전순으로 정렬하려면 속성 창의 맨 위에 있는 사전순 단추를 클릭합니다. 속성을 범주별로 정렬하려면 속성 창의 맨 위에 있는 항목별 단추를 클릭합니다.

문서 개요 창

문서 개요 창은 XAML 문서에 대한 계층 구조 보기를 제공합니다. 문서 개요 창을 사용하여 XAML 요소를 미리 보거나 선택하거나 삭제할 수 있습니다. 문서 개요 창에 액세스하려면 보기 메뉴를 열고 다른 창을 가리킨 다음 문서 개요를 선택하거나 Ctrl+Alt+T를 누릅니다. 자세한 내용은 WPF 문서의 요소 계층 탐색을 참조하십시오.

도구 상자

도구 상자에는 디자인 화면에 끌어 올 수 있는 컨트롤이 있습니다. 도구 상자 창에 액세스하려면 보기 메뉴를 열고 도구 상자를 선택하거나 Ctrl+Alt+X를 누릅니다.

디자인 뷰의 기능

디자인 뷰는 WPF 응용 프로그램의 창이나 페이지에 컨트롤을 정렬하는 데 사용할 수 있는 다양한 기능을 제공합니다. 다음 그림에서는 디자인 뷰의 몇 가지 기능을 보여 줍니다.

확대/축소 컨트롤

확대/축소 컨트롤을 사용하면 디자인 화면의 크기를 제어할 수 있습니다. 10%에서 20x까지 확대/축소할 수 있습니다.

뷰에 맞춤

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

모눈 레일

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

모눈선

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

모눈선 표시기

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

이동 핸들

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

크기 조정 핸들

크기 조정 핸들은 선택된 컨트롤에 표시됩니다. 크기 조정 핸들을 클릭하고 끌어 선택된 항목의 크기를 변경할 수 있습니다. 컨트롤의 크기를 정확하게 조정할 수 있도록 컨트롤 크기를 조정할 때 해당 너비 및 높이 값이 표시됩니다.

여백 선

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

여백 스텁

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

맞춤선

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

XAML 뷰의 기능

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

자세한 내용은 분할된 뷰: WPF 디자인 화면과 XAML을 동시에 보기를 참조하십시오.

분할된 뷰 구분선

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

태그 탐색기

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

다양한 대화형 사용자 인터페이스 작성

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

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

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

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

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

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

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

Expression Blend와의 공동 작업

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

응용 프로그램을 클라이언트 컴퓨터에 배포

응용 프로그램을 작성한 다음에는 사용자에게 보내 사용자 클라이언트 컴퓨터에서 이를 설치하고 실행할 수 있도록 해야 합니다. ClickOnce 기술을 사용하면 클릭 몇 번으로 Visual Studio 내에서 응용 프로그램을 배포하고 사용자에게 웹이나 파일 공유의 응용 프로그램으로 연결되는 URL을 제공할 수 있습니다. ClickOnce는 응용 프로그램의 모든 요소와 종속성을 관리하고 응용 프로그램이 클라이언트 컴퓨터에 제대로 설치되도록 합니다.

사용자가 네트워크에 연결되어 있을 때만 실행되거나 온라인과 오프라인에서 모두 실행되도록 ClickOnce 응용 프로그램을 구성할 수 있습니다. 응용 프로그램이 오프라인 작업을 지원해야 한다고 지정하면 ClickOnce에서 사용자의 시작 메뉴에 해당 응용 프로그램에 대한 링크를 추가합니다. 그러면 사용자는 URL을 사용하지 않고도 해당 응용 프로그램을 열 수 있습니다.

응용 프로그램을 업데이트하면 새 배포 매니페스트와 응용 프로그램의 새 복사본을 웹 서버나 파일 공유에 게시해야 합니다. 그러면 ClickOnce에서 사용 가능한 업데이트를 감지하고 사용자 설치를 업그레이드합니다. 이전 어셈블리를 업데이트하는 데는 사용자 지정 프로그래밍이 필요하지 않습니다. 자세한 내용은 WPF 응용 프로그램 배포를 참조하십시오.

ClickOnce 응용 프로그램 배포

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

참고 항목

개념

Windows Forms 개발자를 위한 WPF Designer

ClickOnce 배포 개요

응용 프로그램 설정 개요

Expression Blend와의 공동 작업

기타 리소스

WPF 디자이너

컨트롤 라이브러리

XAML