* 개요

컴포넌트 위치, 크기, 배치와 관련된 Layout 속성에 대해 설명합니다.

* 상세 설명

컴포넌트의 속성창 Layout부분에 아래와 같은 속성들이 있습니다.

Location, Size, Anchor, Dock, PercentSize, MaximumSize, MinimumSize, LogicalSize, AutoScroll, AllowMove, AllowReSize, AllowMinimize, AllowMaximize, AllowDestroy

이 속성들을 잘 활용하면 컴포넌트 위치 설정이나 크기 설정과 배치를 편리하게 디자인할 수 있습니다.

1. Location

Location은 부모 컨테이너에서 해당 컴포넌트 왼쪽 상단 좌표를 나타냅니다. (단위:Pixel)

부모 컨테이너란 Board, Panel, VBox, HBox, GroupBox, TabControl, BoardView 같은 다른 컴포넌트들을 담을 수 있는 컴포넌트입니다.

다음 그림에서 파란점에서 빨간점까지의 X, Y위치가 Location 속성에 설정됩니다. Panel 위치가 변경되어도 Panel내의 컴포넌트들은 Location이 유지됩니다.

(스크립트)

Button2.Location = "20,40"; // Left(X),Top(Y)를 같이 설정 Button2.Left = "20"; // X좌표 Button2.Top = "40"; // Y좌표 Button2.Right = "20"; // 컴포넌트 오른쪽 라인의 X좌표. Left + Width 과 동일 Button2.Bottom = "40"; // 컴포넌트 하단의 Y좌표. Top + Height 과 동일

2. Size

컴포넌트의 너비, 높이 크기입니다. (단위:Pixel)

(스크립트)

Button2.Size = "100,20"; // Width, Height Button2.SetSize(100,20); // Width, Height Button2.Width = 100; Button2.Height = 20;

3. Anchor

앵커는 부모 컨테이너의 테두리에서 해당 컴포넌트의 상대 위치를 고정시키기 위한 방향을 나타냅니다.

부모 컨테이너의 크기를 변경할 경우 Anchor에 설정된 부모의 테두리에서 해당 컴포넌트와의 간격이 동일하게 유지됩니다.

"Top", "Bottom", "Left", "Right" 네가지 값 중에서 다중 선택이 가능합니다.

예를 들어, 보드 사이즈가 resize되면서 버튼들이 하단에 고정적으로 보여지기 위해 버튼의 Anchor값을 "Top, Left" 에서

"Bottom, Right"로 변경하면 보드 오른쪽 하단 좌표를 기준으로 버튼 위치가 유지됩니다.

(참고로, Document의 AutoAdjustSize속성값을 True로 설정하면 보드 resize가 가능합니다.)

(스크립트)

AnchorConst 값들의 조합으로 설정할 수 있으며 기본 값은 "Top,Left"입니다.

Button1.Anchor = "Top, Right";

4. Dock

Dock은 상위 컨테이너에 해당 컴포넌트가 도킹되는 위치로써 "NONE", "TOP", "LEFT", "BOTTOM", "RIGHT", "FILL" 중의 값을 설정할 수 있습니다.

화면이 resize 될 때 (Document의 AutoAdjustSize가 True여야 함) 각 속성에 대해 컴포넌트 Width, Height가 아래와 같이 변경됩니다.

Dock	Width	Height
NONE (default)	고정	고정
TOP	가변	고정
LEFT	고정	가변
BOTTOM	가변	고정
RIGHT	고정	가변
FILL	가변	가변

예를 들어 컴포넌트를 Docking한 경우에 화면 크기를 변경하면 Docking된 컴포넌트의 Width, Height가 아래와 같이 변경됩니다.

(스크립트)

DockConst 값으로 설정할 수 있으며 기본 값은 "None"입니다.

Label1.Dock = DockConst.Fill;

5. PercentSize

PercentSize는 컴포넌트의 상위 컨테이너에 대한 사이즈 비율입니다. 100%인 경우에는 컴포넌트의 너비와 높이가 상위 컨테이너와 같아집니다.

(스크립트)

width, height에 대한 % 값으로 설정할 수 있습니다.

Button1.PercentSize = "50, 100";

6. MaximumSize

컴포넌트의 최대 제한 크기입니다. PercentSize 속성값이 있어야 적용됩니다.

(스크립트)

width, height에 대한 pixel 값으로 설정할 수 있습니다. 

Button1.SetProperty(PropertyNameConst.MaximumSize, "20,20");

7. MinimumSize

컴포넌트의 최소 제한 크기입니다. PercentSize 속성값이 있어야 적용됩니다.

(스크립트)

width, height에 대한 pixel 값으로 설정할 수 있습니다.

Button1.SetProperty(PropertyNameConst.MinimumSize, "20,20");

8. LogicalSize

Board, Hnavigator,Panel,TabPanel,VNavigator 컴포넌트의 스크롤 가능한 내부 크기를 나타냅니다.

Board의 Size속성이 "100, 200" (width, height) 이고 LogicalSize가 "300, 100" (width, height) 라면 보여지는 보드 사이즈는 100,200이지만 스크롤로 볼 수 있는 영역은 300, 100 입니다.  

LogicalSize 속성값이 Size 속성값 보다 크면 AutoScroll속성을 True로 주지 않아도 스크롤이 생깁니다.

(스크립트)

width, height에 대한 pixel 값으로 설정할 수 있습니다. 기본값 "0,0" 이며 "0,0"인 경우 Size를 따라갑니다.

Board1.LogicalSize = "1000,600";

9. AutoScroll

Board, Hnavigator,Panel,TabPanel,VNavigator 컴포넌트의 경계선 바깥에 위치한 자식 컴포넌트 까지 사용자가 스크롤하여 볼 수 있을지 여부를 설정합니다.

AutoScroll 속성 값이 true일 경우 자식 컴포넌트의 위치 또는 크기가 변경되면 보드의 LogicalSize 속성 값도 자동으로 변경됩니다. 이때 자식 컴포넌트의 Location과 Size를 더한 값 중 가장 큰 값이 보드의 LogicalSize로 자동 설정됩니다.

AutoScroll 속성 값을 false에서 true로 변경하면 자식 컴포넌트의 Location과 Size를 더한 값이 보드의 크기보다 크면 보드의 LogicalSize를 늘려줍니다.

AutoScroll 속성 값을 true에서 false로 변경하면 보드의 LogicalSize를 변경하지 않으며 이후 자식 컴포넌트의 위치나 크기가 변경되어도 보드의 LogicalSize는 변경되지 않습니다.

(스크립트)

Board1.AutoScroll = true;

10. AllowMove,AllowReSize,AllowMinimize,AllowMaximize,AllowDestroy

BoardView, GroupBox, HBox, Panel, VBox 컴포넌트의 AllowMove 속성 값을 true로 설정하면 Dock 속성 값이 "None"으로 변경되고, 상단에 타이틀 바를 가진 창 형태로 표시됩니다. MDI 형태로 구현할 때도 사용되는 속성입니다.

AllowMove 속성 값을 false로 변경하면 AllowDestroy, AllowMaximize, AllowMinimize, ShowSystemMenu 속성 값이 false로 변경됩니다.

예를 들어 Panel에 AllowMode 속성을 true로 설정한 경우 아래와 같이 타이틀 바가 생기면서 이동가능한 상태가 됩니다.

AllowReSize 속성 값을 true로 변경하면 컴포넌트의 AllowMove가 true인 경우 사용자가 컴포넌트 크기를 조정할 수 있도록 설정하며, 이동 가능한 상태임을 나타내기 위해 테두리가 굵게 표시됩니다.

AllowMaximize 속성 값을 true로 변경하면 AllowMove 속성 값이 true로 변경되며, 컴포넌트가 별도의 창으로 뜰 때 최대화 아이콘이 활성화되어 표시됩니다.

AllowMinimize 속성 값을 true로 변경하면 AllowMove와 ShowSystemMenu 속성 값이 true로 변경되며, 컴포넌트가 별도의 창으로 뜰 때 최소화 아이콘이 활성화되어 표시됩니다.

AllowDestroy 속성 값을 true로 변경하면 AllowMove와 ShowSystemMenu 속성 값이 true로 변경되며, 컴포넌트가 별도의 창으로 뜰 때 닫기 아이콘이 활성화되어 표시됩니다. 사용자가 닫기 아이콘을 클릭하면 OnPreFinalize와 OnFinalize 이벤트가 호출된 후 컴포넌트가 삭제됩니다.

(스크립트)

Panel1.AllowMove = true; Panel1.AllowReSize = true; Panel1.AllowMinimize = true; Panel1.AllowMaximize = true; Panel1.AllowDestroy = true;