Chap2. WPF 기초2 : Panel(StackPanel, WrapPanel, Canvas, DockPanel)

Chap2. WPF 기초2 : Panel

안녕 하십니까? OpenSG.Net B/S팀 장태호 라고 합니다.

 이 번 글에서는 주요 Panel(Grid 제외)을 소개 하고 특이점 및 속성을 적어 볼까 합니다.

1.     StackPanel

Stack이란 단어의 뜻을 찾아 보면, ‘쌓다’라는 동사를 찾아 볼 수 있다. 
그럼 이제부터 소개 할 StackPanel은 바로 이 ‘쌓다’와 관련성이 깊다.

           
                                       [Chap2. 그림1 ]
   
  그림 1. Window에 StackPanel올려 그 위에 5개의 각기 다른 속성을 가진 Button이 배치 해보았다. 해당 화면을 

통 StackPanel의 특성을 알아 보자. 그림1의 StactPanel의 크기는 설정 하지 않았고, Orientation 속성을 Vertical로 설
정 되었다. 이는 Panel에 속해 있는 객체들을 위에서 아래로 배열 하겠다는 의미이다. 그럼 Width와 Height의 값은 어떻게
설정 될까? 그림1. 의 ‘1’버튼을 주목하자. Width가 ‘1’에 따라 정의 되어있으면 알 수 있다. 이에 대한 이유는 버튼의 
width와 좌우 Margin 값의 합이 다른 버튼에 비해 가장 큰 ‘1’버튼에 따라 Panel의 width값이 정의 된 것이다. 
Orientation 속성이 Horizontal의 경우는 버튼 Height와 상하 Margin에 따라 Height가 정의 된다.

2.     WrapPanel

Wrap이란 단어를 찾아보면 ‘싸다’,’포장하다’라는 의미를 가지고 있다. WrapPanel을 보면 StackPanel과 유사하지만 차이
점을 가지고 있다. WapPanel 특징과 StackPanel과의 차이점을 알아 보자.

                           

                                                           [Chap2. 그림2 ]

                                                         

그림2. 는 window에 WrapPanel을 올리고, 그 위에 버튼 11개를 번호 순서대로 배치해 보았다. Form과 panel
은 Stretch를 설정 하였고, Margin값은 각각 10을 할당했으며, Orientation을 Horizontal로 설정했다. 
그림2. 같은 순으로 버튼이 좌에서 우로 공간이 맞이 않을 때에는 아래로 차곡차곡 배치 되는 것을 볼 수 있다.

  

3.     StackPanel과 WrapPanel 차이점

그림1, 그림2 에 보이는 것 같이 Control의 배치에 차이를 보인다. StackPanel은 Orientation의 값에 따라 한 방향으로 적재 되
는 반면, WrapPanel의 경우 객체가 배치 될 공간이 모자라는 경우 다른 방향으로 넘어가 다시 배치되는 것을 알 수있다.

       

                                                         [ Chap2. 그림3 ]

               

                                                    [ Chap2. 그림4 ]

또 다른 차이점을 보자 그림3. 은 그림1. StackPanel의 크기를 변경, 그림4. 는 그림2. WrapPanel의 크기를 변경 된 모습니
다. 위 그림에서 보이는 것처럼 차이점은 크기를 변경 했을 경우 StackPanel의 경우 객체의 위치가 바뀌지 않아 결국 화면을 벗
어나지만 Wrap의 경우 배치 룰에 따라 재배치 되는 것을 볼 수 있다.

1)     주요 속성

①     Orientation : 구성 요소(Element)들의 쌓일 방향을 설정한다.

4.     Canvas

 Canvas는 디자인 시에 설정한 위치대로 항목들을 정확하게 배치시키는 윈폼과 유사한 기본적인 패널이다. 타 패널의 Cell
의 Margin, Alignment에 의해 위치를 정의하던 방식과 달리 객체의 좌표를 가지고 있다. Canvas에 선언되어 있는 순서는 좌표
를 결정 한 것과 문관 화면 좌표 속성에 의해 배치 된다. 만약, Canvas Control의 자식 개체에 첨부 속성을 위치가 지정되어 있
지 않다면 그 개체는 제일 왼쪽에 위치 하게 된다.

ü  주 : HorizontalAlignment, VerticalAlignment의 값 존재하기는 하지만 무 의미  하다.

                                                           [ Chap2. 그림5 ]

그리고 그림4. 와 같이 Canvas의 사이즈를 작게 조절 했을 경우 Control이 Canvas를 벗어 나는 경우가 생 긴다.

1)     주요 속성

①     Canvas.Left : Control 좌측으로 거리

②     Canvas.Top : Control 상단으로 거리

③     Canvas.Right : Control 우측으로 거리

④     Canvas.Buttom : Control 하단으로 거리

5.     DockPanel

일반 윈폼 응용프로그램에서 Dock의 속성을 자져 온 Panel이다. Panel의 이름에서 알 수 있듯이 Dock이란 기능에 초점을 맞
춘 Panel이다. Dock의 사전적 의미는 ‘부두’, ‘항’의 의미를 가진다. 실제 Dock이란 기능을 보면 Left, Right, Top, Bottom 의 값에
 따라 해당 패널에 설정 값에 위치 하게 된다.

                      

                                                                 [ Chap2. 그림6 ]

             

                                                     [ Chap2. 그림7 ]

그림5. DockPanel을 사용해 Control를 Docking 해 보았다. 그림6. 에서 Docking 방향과 컨트롤 도킹 순서를 숫자로 표현해 놓
았다. 보는 것과 같이 Dock이란 속성을 사용하면, 해당 Control을 각 방향에 따라 Docking 되는 것을 확인 할 수 있다.

1)     주요 속성

①     DockPanel.Dock : Docking 방향을 설정.

6.     Summary

복잡한 UI를 만들게 된다면 여러 개의 패널컨트롤들을 잘 섞어서 사용해야 한다. 패널 컨트롤은 컨트롤 들을 어떻게 배치해야
되는 결정 해야 한다.

Canvas	디자인 시 설정 한 위치대로 항목들을 정확하게 배치시키는 가장 기본적 패널이다.
DockPanel	패널에서 지정한 방향으로 항목들을 위치시킨다. (TOP, Bottom, Left, Right)
Grid	표를 설정하여 그 표 안에 항목을 배치시키고 그 배율을 유지시킨다.
StackPanel	가로 또는 세로 방향으로 항목들을 일렬로 정렬한다.
Wrap Panel	항목들을 왼쪽에서 오른쪽으로 순차적으로 배치시키고, 크기가 벗어나게 되면 다음줄로 바꿔 배치한다. Orientation 속성 값에 따라 순서가 위에서 아래 또는 오른쪽에서 왼쪽으로 지정할 수 있다.

                                     [Chap2. 표1]

TaeHo, Chang  
OpenSG.net Corporation 

BS Team,  Assistant Manager

Programmer 

Tel. 07048919612
Fax. +82 41 543 2613 
Mobile : +82 10 50580346 
E-mail : gomth@opensg.net