연습: 디자인 타임에 Windows Forms에서 WPF 콘텐츠 정렬

아티클
08/09/2011

이 연습에서는 위치 고정 및 맞춤선 등의 Windows Forms 레이아웃 기능을 사용하여 WPF(Windows Presentation Foundation) 컨트롤을 정렬하는 방법을 보여 줍니다.

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

프로젝트를 만듭니다.
WPF 컨트롤을 만듭니다.
레이아웃 패널에서 WPF 컨트롤을 호스팅합니다.
맞춤선을 사용하여 WPF 컨트롤을 맞춥니다.
WPF 컨트롤을 고정 및 도킹합니다.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

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

Visual Studio 2010.

프로젝트 만들기

첫 번째 단계에서는 Windows Forms 프로젝트를 만듭니다.

참고

WPF 콘텐츠를 호스팅하는 경우 C# 및 Visual Basic 프로젝트만 지원됩니다.

프로젝트를 만들려면

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

WPF 컨트롤 만들기

WPF 컨트롤을 프로젝트에 추가하고 나면 폼에서 정렬할 수 있습니다.

WPF 컨트롤을 만들려면

프로젝트에 새 WPF UserControl을 추가합니다. 컨트롤 형식의 기본 이름인 UserControl1.xaml을 사용합니다. 자세한 내용은 연습: 디자인 타임에 Windows Forms에서 새 WPF 콘텐츠 만들기를 참조하십시오.
디자인 뷰에서 UserControl1이 선택되어 있는지 확인합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.
속성 창에서 Width 및 Height 속성의 값을 200으로 설정합니다.
Background 속성 값을 Blue로 설정합니다.
프로젝트를 빌드합니다.

레이아웃 패널에서 WPF 컨트롤 호스팅

WPF 컨트롤은 다른 Windows Forms 컨트롤과 같은 방식으로 레이아웃 패널에서 사용할 수 있습니다.

레이아웃 패널에서 WPF 컨트롤을 호스팅하려면

Windows Forms 디자이너에서 Form1을 엽니다.
도구 상자에서 TableLayoutPanel 컨트롤을 폼으로 끌어 옵니다.
TableLayoutPanel 컨트롤의 스마트 태그 패널에서 마지막 행 제거를 선택합니다.
TableLayoutPanel 컨트롤의 너비와 높이를 더 크게 조정합니다.
도구 상자에서 UserControl1을 두 번 클릭하여 TableLayoutPanel 컨트롤의 첫 번째 셀에 UserControl1의 인스턴스를 만듭니다.

UserControl1의 인스턴스는 새 ElementHost 컨트롤(elementHost1)에서 호스팅됩니다.
도구 상자에서 UserControl1을 두 번 클릭하여 TableLayoutPanel 컨트롤의 두 번째 셀에 또 다른 인스턴스를 만듭니다.
문서 개요 창에서 tableLayoutPanel1을 선택합니다. 자세한 내용은 문서 개요 창을 참조하십시오.
속성 창에서 Padding 속성 값을 10, 10, 10, 10으로 설정합니다.

ElementHost 컨트롤은 모두 새 레이아웃에 맞도록 크기가 조정됩니다.

맞춤선을 사용하여 WPF 컨트롤 맞추기

맞춤선을 사용하면 폼에서 컨트롤을 쉽게 맞출 수 있습니다. 즉, 맞춤선을 통해 WPF 컨트롤도 맞출 수 있습니다. 자세한 내용은 연습: 맞춤선을 사용하여 Windows Forms에서 컨트롤 정렬을 참조하십시오.

맞춤선을 사용하여 WPF 컨트롤을 맞추려면

도구 상자에서 UserControl1의 인스턴스를 폼으로 끌어 와서 TableLayoutPanel 컨트롤 아래 공간에 놓습니다.

UserControl1의 인스턴스는 새 ElementHost 컨트롤(elementHost3)에서 호스팅됩니다.
맞춤선을 사용하여 elementHost3의 왼쪽 가장자리를 TableLayoutPanel 컨트롤의 왼쪽 가장자리에 맞춥니다.
맞춤선을 사용하여 elementHost3을 TableLayoutPanel 컨트롤과 같은 너비로 맞춥니다.
컨트롤 간에 가운데 맞춤선이 나타날 때까지 elementHost3을 TableLayoutPanel 컨트롤 쪽으로 이동합니다.
속성 창에서 Margin 속성 값을 20, 20, 20, 20으로 설정합니다.
가운데 맞춤선이 다시 나타날 때까지 elementHost3을 TableLayoutPanel 컨트롤의 반대쪽으로 이동합니다. 그러면 가운데 맞춤선이 여백이 20임을 나타냅니다.
elementHost3을 왼쪽 가장자리가 elementHost1의 왼쪽 가장자리와 맞춰질 때까지 오른쪽으로 이동합니다.
elementHost3의 너비를 오른쪽 가장자리가 elementHost2의 오른쪽 가장자리에 맞춰질 때까지 변경합니다.

WPF 컨트롤 고정 및 도킹

폼에서 호스팅되는 WPF 컨트롤에서는 다른 Windows Forms 컨트롤과 동일한 위치 고정 및 도킹 동작을 사용할 수 있습니다.

WPF 컨트롤을 고정 및 도킹하려면

elementHost1을 선택합니다.
속성 창에서 Anchor 속성을 Top, Bottom, Left, Right로 설정합니다.
TableLayoutPanel 컨트롤의 크기를 더 크게 조정합니다.

elementHost1 컨트롤이 셀을 채우도록 크기를 조정합니다.
elementHost2를 선택합니다.
속성 창에서 Dock 속성 값을 Fill로 설정합니다.

elementHost2 컨트롤이 셀을 채우도록 크기를 조정합니다.
TableLayoutPanel 컨트롤을 선택합니다.
Dock 속성 값을 Top으로 설정합니다.
elementHost3을 선택합니다.
Dock 속성 값을 Fill로 설정합니다.

elementHost3 컨트롤의 크기가 조정되어 폼의 나머지 공간이 채워집니다.
폼의 크기를 조정합니다.

세 ElementHost 컨트롤의 크기가 모두 적절하게 조정됩니다.

자세한 내용은 방법: TableLayoutPanel 컨트롤의 자식 컨트롤 고정 및 도킹을 참조하십시오.

참고 항목

다음을 통해 공유