연습: 절대 위치를 기반으로 하는 레이아웃 만들기
절대 위치 지정 방법에서는 부모 요소를 기준으로 한 정확한 위치를 지정하여 자식 요소를 정렬합니다. 예를 들어 패널을 기준으로 컨트롤의 맨 왼쪽 위 좌표를 지정하여 패널에 컨트롤을 정렬합니다. 자세한 내용은 절대 및 동적 위치를 사용하는 레이아웃을 참조하십시오.
WPF Designer for Visual Studio에서는 절대 위치를 지원하는 Canvas 패널 컨트롤을 제공합니다. Canvas 패널 컨트롤을 사용하여 응용 프로그램에서 요소의 절대 위치를 지정할 수 있습니다.
중요
가능하면 동적 레이아웃을 사용하는 것이 좋습니다. 동적 레이아웃은 가장 유연할 뿐 아니라 지역화되는 경우와 같이 내용이 변경될 경우 적절히 조정되고 최종 사용자가 사용 환경을 가장 잘 제어할 수 있게 해 줍니다. 동적 레이아웃의 예제를 보려면 연습: WPF Designer를 사용하여 크기를 조정할 수 있는 응용 프로그램 만들기 및 연습: 동적 레이아웃 만들기를 참조하십시오.
이 연습에서는 다음 작업을 수행합니다.
WPF 응용 프로그램을 만듭니다.
응용 프로그램에 Canvas 패널 컨트롤을 추가합니다.
패널에 컨트롤을 추가합니다.
레이아웃을 테스트합니다.
다음 그림에서는 응용 프로그램의 모양을 보여 줍니다.
.png "절대 위치를 기반으로 하는 레이아웃")
참고
표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.
사전 요구 사항
이 연습을 완료하려면 다음 구성 요소가 필요합니다.
- Visual Studio 2010
프로젝트 만들기
첫 번째 절차는 응용 프로그램의 프로젝트를 만드는 것입니다.
프로젝트를 만들려면
Visual Basic 또는 Visual C#에서 AbsoluteLayout이라는 새 WPF 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 WPF 응용 프로그램 프로젝트 만들기를 참조하십시오.
참고
이 연습에서는 코드를 작성하지 않습니다. 프로젝트에서 선택한 언어는 응용 프로그램의 코드 숨김 페이지에 사용되는 언어입니다.
WPF Designer에 MainWindow.xaml이 열립니다.
디자인 뷰에서 창을 선택합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.
속성 창에서 Window에 대해 다음 속성을 설정합니다.
Property
값
Width
400
Height
200
팁
크기 조정 핸들을 사용하여 디자인 뷰의 창 크기를 조정할 수도 있습니다.
(선택 사항) 창의 크기를 잠그려면 다음 방법 중 하나를 사용합니다.
파일 메뉴에서 모두 저장을 클릭합니다.
패널 컨트롤 추가
기본적으로 새 WPF 응용 프로그램에는 Grid 패널을 사용하는 Window가 들어 있습니다. 절대 위치를 기반으로 한 레이아웃을 만들려면 Canvas 패널을 사용해야 합니다. 이 절차에서는 기본 Grid를 제거하고 Canvas를 추가합니다.
패널 컨트롤을 추가하려면
디자인 뷰에서 모눈을 선택합니다.
Delete 키를 눌러 Grid를 삭제합니다.
속성 창에서 Canvas의 Height 속성을 Auto로 설정합니다.
속성 창에서 Canvas의 Width 속성을 Auto로 설정합니다.
파일 메뉴에서 모두 저장을 클릭합니다.
패널에 컨트롤 추가
이제 패널에 컨트롤을 추가하고 Canvas의 연결된 속성 Left 및 Top을 사용하여 컨트롤의 절대 위치를 지정합니다.
패널에 컨트롤을 추가하려면
속성 창에서 Label에 대해 다음 속성을 설정합니다.
Property
값
Content
이름:
Canvas.Left
20
Canvas.Top
20
Width
120
Height
23
속성 창에서 Label에 대해 다음 속성을 설정합니다.
Property
값
Content
암호:
Canvas.Left
20
Canvas.Top
60
Width
120
Height
23
속성 창에서 TextBox에 대해 다음 속성을 설정합니다.
Property
값
Canvas.Left
160
Canvas.Top
20
Width
200
Height
23
속성 창에서 TextBox에 대해 다음 속성을 설정합니다.
Property
값
Canvas.Left
160
Canvas.Top
60
Width
200
Height
23
속성 창에서 Button에 대해 다음 속성을 설정합니다.
Property
값
Content
OK
Canvas.Left
196
Canvas.Top
120
Width
75
Height
23
속성 창에서 Button에 대해 다음 속성을 설정합니다.
Property
값
Content
Cancel
Canvas.Left
283
Canvas.Top
120
Width
75
Height
23
파일 메뉴에서 모두 저장을 클릭합니다.
레이아웃 테스트
마지막으로, 응용 프로그램을 실행하고 컨트롤이 절대 위치를 기준으로 하는지 확인합니다.
레이아웃을 테스트하려면
(선택 사항) 이전 단계에서 창의 크기를 잠근 경우 이 절차를 수행하려면 잠금을 해제해야 합니다. 속성 창에서 Window에 대해 다음 속성을 설정합니다.
Property
값
MinWidth
0
MinHeight
0
MaxWidth
Infinity
MaxHeight
Infinity
ResizeMode
CanResize
디버그 메뉴에서 디버깅 시작을 클릭합니다.
응용 프로그램이 시작되고 창이 열립니다.
창의 크기를 조정합니다.
컨트롤이 절대 위치를 기반으로 하며 크기 또는 위치가 변경되지 않습니다.
창을 닫습니다.
종합
완성된 MainWindow.xaml 파일은 다음과 같습니다.
<Window x:Class="MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
<Canvas Height="Auto" Name="Canvas1" Width="Auto">
<Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
<Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
<TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
<TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
<Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
<Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
</Canvas>
</Window>