[깅깅의 C# 독학] 9.C# - 패널 : 플로우 레이아웃 패널 , 테이블 레이아웃 패널

이번에는 패널(panel)에 대해 다루려고 한다. 패널은 컨트롤을 배치하는 기능을 가지고 있다.

배치 방법에는 두 가지가 있는데 그 중 플로우 레이아웃 패널을 먼저 적어보려한다.

 

 

[플로우 레이아웃 패널(FlowLayoutPanel)]

버튼 5개를 플로우 레이아웃 패널로 배치해보자.

플로우 레이아웃 패널에 배치하는 것은 아주 쉽다. 반복문을 써서 버튼들의 부모를 패널로 지정해두면 된다. 여기서 Dock 프로퍼티를 볼 수 있는데 이것은 '배치되는 컨트롤에 어떻게 도킹할 것인지'를 설정하는 프로퍼티이다. DockStyle.Fill은 부모 크기에 가득 채워 도킹하겠다는 것이다. 위 코드에서 flp의 부모는 폼이니, 폼 크기만큼 가득 채워 도킹하겠다는 것이다.

실행결과

버튼만 보면 '도대체 어딜 봐서 폼 크기만큼 가득 채운 거지?' 라고 생각할 수 있겠지만 버튼이 중요한게 아니다. 패널이 보이지 않아서 그렇지 패널 자체는 폼 크기에 가득 채워져 있는 상태이다.

 

플로우 레이아웃 패널은 컨트롤을 직접 나열하며 컨트롤은 왼쪽부터 오른쪽으로 나열된다. 도킹스타일에는 Fill 외의 설정들도 있다.

 

만일 버튼이 20개고 DockStyle.Top 으로 설정하면 밑에 부분이 잘리고 만다. 하지만 DockStyle.Fill로 하면 패널이 폼의 크기 가득 채우기 때문에 모두 보일 것이다.

 

Dock와 비슷한 프로퍼티, Anchor도 있다. Anchor는 컨트롤의 끝을 부모 컨트롤 안의 어느 끝에 고정할지 지정한다. 이게 정확히 어떤걸 구현하는 건지 모르겠어서 찾아보았다. 다음 문서를 보면 Dock와 함께 Anchor를 확실히 알 수 있을 것이다!

https://learn.microsoft.com/ko-kr/dotnet/desktop/winforms/controls/how-to-dock-and-anchor?view=netdesktop-8.0

컨트롤을 도킹하고 고정하는 방법 - Windows Forms .NET

이 문서에서 AnchorStyles.None 이 언급되지 않았는데, None을 설정하면 컨트롤의 끝이 고정되지 않고 중앙에 배치된다. 문서 속에 중앙은 All로 되어있는데 참고로 AnchorStyles 열거체에는 All이 정의되어있지 않다. 중앙 배치는 None을 기억하길!

 

또한 문서에서 보면 알 수 있듯 Dock와 Anchor는 패널 뿐 아니라 모든 컨트롤에 정의되어있는 프로퍼티다. 즉, 라벨이나 버튼에도 직접 도킹스타일이나 앵커스타일을 지정할 수 있단 것!

 

 

[테이블 레이아웃 패널(TableLayoutPanel)]

이번에는 격자형으로 배치할 수 있는 테이블 레이아웃 패널을 사용해보자. 버튼 6개를 3x2로 배치해볼 것이다.

플로우 형식에서 행렬을 정해주는 코드 두 줄만 추가된다. 열은 ColumnCount로, 행은 RowCount로 설정한다. C#의 행과 열은 다음과 같이 지정된다.

(→행) / (↓열)	1열	2열	3열
1행	1행 1열	1행 2열	1행 3열
2행	2행 1열	2행 2열	2행 3열

 

실행결과

컨트롤을 여러 개 행렬에 걸치도록 하고 싶다면 setColumnSpan() 메서드와 setRowSpan() 메서드를 사용하면 된다. 이를 활용하면 자유로운 배치가 가능할 것이다. 

        tlp.SetColumnSpan(bt[0], 2); // 2열에 걸침
        tlp.SetRowSpan(bt[0], 2); // 2행에 걸침

 

참고로 컨트롤의 크기까지 늘어나진 않으니, 걸쳐진 행렬에 컨트롤의 크기까지 채우고 싶다면 해당 컨트롤의 도킹스타일을 Fill로 설정하면 된다.

 

여기까지 패널의 두가지 배치법 - 플로우 레이아웃 패널과 테이블 레이아웃 패널에 대해 알아보았다. 다음에는 컨트롤의 설정과 구조체 정리를 한 뒤, 버튼의 종류에 대해서 다뤄보겠다!

 

그리고.. 퀘스트는.. 다음 퀘스트가 사깅꾼을 잡는 것인데 그건 게임 프로젝트로 다루는게 좋을 것 같아서 그 때까지 생략하겠다.

 

요약

---

1. 플로우 레이아웃 패널(FlowLayoutPanel)은 컨트롤을 왼쪽부터 오른쪽으로 나열한다.

2. 테이블 레이아웃 패널(TableLayoutPanel)은 열, 행의 수를 지정해 격자형으로 배치한다.

3. 컨트롤에는 배치방법을 지정하는 Dock, Anchor 프로퍼티가 있으며

둘의 열거체는 DockStyle과 AnchorStyles이다.

---