IT정보공유/C#

C# TableLayoutPanel 을 이용한 2x2, 3x3, 4,4 등 행과 열 동일한 사이즈로 격자구성 방법

알지오™ 2018. 8. 31.


바둑판 배열이라고 해야하나요?

아래 사진 처럼 표형태로 Panel을 동일한 사이즈로 균등하게 나열하고 싶을 때는 TableLayoutPanel 을 이용하면됩니다.



그럼 이제 코딩으로 어떻게 셋팅하는지 알아보도록 하겠습니다.

우선 테이블 레이아웃을 지정할 때는 아래의 코드처럼 SetCellPosition()함수를 이용하시면 되겠습니다.

3x3 사이즈로 9개의 칸으로 구성된 테이블 레이아웃을 만들겁니다.


테이블 레이아웃의 각 행(Row)과 열(Column)은 인덱스로 지정해줄 수 있고, 

각 행과 열은 TableLayoutPanelCellPosition 을 이용해 지정해 줄 수 있습니다.

그러면 해당 컨트롤이 원하는 행열에 따악 하고 얹어지는 겁니다.




위 사진 처럼 3x 배열을 만드려면 아래의 코드처럼 행과 열의 크기를 지정해 주어야 합니다.



tableLayoutPanelEx1.RowCount = 3;

tableLayoutPanelEx1.ColumnCount = 3;

tableLayoutPanelEx1.RowStyles.Add(new RowStyle(SizeType.Percent, (float)33.3));

tableLayoutPanelEx1.RowStyles.Add(new RowStyle(SizeType.Percent, (float)33.3));

tableLayoutPanelEx1.RowStyles.Add(new RowStyle(SizeType.Percent, (float)33.3));

tableLayoutPanelEx1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, (float)33.3));

tableLayoutPanelEx1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, (float)33.3));

tableLayoutPanelEx1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, (float)33.3));




RowStyles와 ColumnStyles 은 UI 컨트롤을 살펴보시면 알겠지만, 

각 행과열의 크기 비율을 고정(Fixed)으로 할지, 아니면 유동적(Percent)으로 퍼센티지를 이용하여 배분할지를 설정하는 플래그 이며

동적으로 행과열을 바꿀 필요가 있을 경우엔 위 코드처럼 코딩으로 처리할 수 있습니다.


Button lsControl = new Button(); //이거는 등록하실 컨트롤을 선언하거나 하세요.

int iRowIdx = 1;
int iColIdx = 1;

TableLayoutPanelCellPosition cp = new TableLayoutPanelCellPosition(iColIdx, iRowIdx);
tableLayoutPanelEx1.Controls.Add(lsControl);
tableLayoutPanelEx1.SetCellPosition(lsControl, cp);
lsControl.Dock = DockStyle.Fill;



이렇게 하면 생성된 버튼이 3x3 행렬의 정 가운데에 딱 배치가 되는거죠.


RowStyles와 ColumnStyles을 잘 설정하면 원하는 크기가 다른 모양으로도 조정하실 수 있을거에요.


댓글

💲 추천 글