C# 테이블 레이아웃을 이용한 입력 양식 만들기

웹 페이지에서 다양한 서식을 개발자가 의도하는대로 화면에 표시하려면 통상 HTML 태그 중에서 <table> 태그를 활용해서 테이블 형태로 페이지를 작성합니다. 행은 <tr> 열은 <td> 태그를 사용하여 표현하죠. 윈도우 폼에서도 웹페이지의 테이블 형태로 표현하는 것과 같은 방식을 사용할 수 있는데 테이블 레이아웃을 사용하는 것입니다. HTML 처럼 폭 지정을 백분율로도 할 수 있고 고정값으로 설정하거나 자동 조정하도록 할 수도 있습니다. 폭을 자동 조정해주므로 다국어 언어를 적용하더라도 양식이 크게 흐트러지지 않고 실행되도록 할 수 있습니다. 비주얼스튜디오의 오프라인 매뉴얼 중에 "연습: 데이터를 입력할 수 있는 크기 조정 가능한 Windows Form 만들기" 참조해서 진행했습니다.

상단의 .NET Framework 4를 확인하면 XP 이상에서 프로그램을 실행 시킬 수 있습니다. 템플릿 창에서 "Windows Forms 응용 프로그램"를 선택하고 이름에 DataInputTutorial를 입력 합니다. 하단의 "솔루션용 디렉터리 만들기"를 체크하면 입력한 이름의 솔루션 폴더를 만들고 그 아래에 프로젝트를 생성합니다.

디자인 창에서 폼의 크기를 적당하게 확대하고 도구상자에서 TableLayoutPanel를 끌어다가 디자인 창에 놓아서 테이블 레이아웃을 폼에 추가합니다.

테이블 레이아웃을 폼에 추가한 다음에는 컨트롤이 선택된 상태에서 속성창에서 행과 열의 개수를 입력하고 Dock에 "Fill"을 선택하여 폼의 크기에 꽉차도록 테이블 레이아웃의 크기가 자동 조정되도록 합니다.

테이블 레이아웃 컨트롤 우측 상단의 화살표를 클릭하고 "행 및 열 편집"를 선택하여 "열 및 행 스타일" 대화 상자를 엽니다.  "열 및 행 스타일" 대화 상자에서 "표시"를 열로 선택하고 Column1, Column3은 백분율 25%, 나머지 열은 백분율 50%로 설정합니다.

"열 및 행 스타일" 대화 상자에서 "표시"를 행으로 선택하고 맨 아래 행은 메모를 것이므로 백분율 80%으로 설정하고 나머지 행은 절대값으로 30을 입력합니다. 여러행을 한번에 수정하려면 Shift키를 누르고 범위 선택하거나 Ctrl키를 누르고 다중 선택해서 작업하면 됩니다. 수정후 화면은 위와 같습니다.

도구상자에서 레이블(Label) 컨트롤을 끌어다가 첫번째 셀에 놓습니다. 테이블 레이아웃의 셀 단위로 자동 배치됩니다.

추가한 레이블 컨트롤의 속성창에서 Anchor(배치 기준점)를 우측 기준 배열(Right)로 설정하고, AutoSize는 true로 Text에는 항목명 "성명"을 입력합니다. 폰트를 적절하게 조절합니다.

텍스트 입력 상자(TextBox) 컨트롤을 끌어다가 두번째 셀에 놓습니다.

추가한 텍스트 입력 상자 컨트롤의 속성창에서 Anchor(배치 기준점)를 좌우측 기준 배열(Left, Right)로 설정하면 텍스트 상자가 셀에 꽉찹니다. 테이블 레이아웃에 추가된 컨트롤 들의 속성 창을 보면 컬럼이 배치된 셀을 row, column 속성으로 조정할 수 있도록 하고 있을 뿐만 아니라 RowSpan, ColumnSpan 속성으로 행 또는 열의 확장을 지정할 수 있는데 위의 그림처럼 ColumnSpan을 3으로 입력하면 연속된 3개의 셀을 하나의 셀로 만들어 줍니다.

새롭게 추가한 레이블과 텍스트 입력 상자 컨트롤을 Ctrl키를 누른 상태에서 끌어다가 놓기하여 필요한 항목들을 복사한 다음 표시 내용과 항목 이름, ColumnSpan 등을 조정합니다.

성별은 TextBox 컨트롤 대신 ComboBox 컨트롤을 추가하고 Anchor를 Left로 설정합니다. 기본적인 데이터를 입력하려면 Items를 클릭하여 문자열 컬렉션 편집기에서 줄단위로 입력하면 됩니다.

핸드폰 번호와 자택 전화는 maskedTextBox 컨트롤을 추가하고 Anchor를 Left로 설정합니다. 폰트 설정등을 수행합니다. 추가한 maskedTextBox 컨트롤의 우측 상단에 있는 스마트 태그를 클릭하여 입력 마스크 설정창에서 "휴대폰 번호" 마스크와 "전화 번호" 마스크를 선택하면 간편하게 입력 양식에 맞는 입력을 받도록 할 수 있습니다.

메모 입력을 위한 항목은 richTextBox 컨트롤을 추가하고 ColumnSpan을 조정하고 Dock을 Fill로 설정하여 셀 전체를 컨트롤이 사용하도록 설정합니다.

마지막으로 항목 이름을 표시하고 있는 첫번째와 세번째 열에 대해서 "열 및 행 스타일" 대화 상자에서 "크기 자동 조정"으로 설정합니다.

모든 작업이 끝나면 프로그램을 실행시켜서 폼의 크기 변경에 테이블 레이아웃이 어떻게 반응하는지 확인합니다.