VB.Net 윈도우 폼 응용 제작하기

윈도우 폼(Windows Forms) 응용 프로그램을 본격적으로 다루기에 앞서 전형적인 윈도우폼과 관련된 용어를 정리할 필요가 있습니다.

위의 그림은 비주얼스튜디오의 모습으로 전형적인 사각 형태의 윈도우 폼 응용입니다. 창(Window) 상단은 제목줄(Title bar) 또는 캡션바(Caption bar)로 불리며 마우스로 드래그하여 창이동에 쓰이기도 하고 더블클릭하여 창을 최대화하거나 최대화 상태에서 원래 크기로 복귀할 수도 있습니다. 제목줄 우측에 있는 최소화, 최대화, 닫기 버튼이 있는 곳을 컨트롤 박스(Control Box)라 합니다. 테두리는 단순히 창의 경계선 역할에서 끝나지 않고 경계선의 종류에 따라 창의 크기를 변경하는데 사용되기도 합니다. 창 속성에서 컨트롤 박스를 보일지 여부와 경계선의 종류를 설정할 수 있습니다. 제목 아래로 메뉴바와 툴바가 배치됩니다. 물론 메뉴바와 툴바는 프로그래머가 설정해야 표시되는 요소입니다.

윈도우 폼 응용의 개발을 시작하는 방법은 VB.Net 첫 응용 프로그램 만들기에서 이미 한번 다루었습니다. 아직 첫 응용 프로그램 만들기를 하지 않았다면 포스팅을 참조해서 해당 과정을 거치는 것이 좋습니다. 아래의 글은 VB.Net 첫 응용 프로그램 만들기를 배경으로 합니다. 중요한 사항을 리뷰하면 우선 프로젝트를 시작할 때 프로젝트 템플릿에서 윈도우 폼 응용(Windows Forms Application)을 선택하는 것으로 프로젝트를 시작합니다. 프로젝트를 일단 저장한 다음에는 F5 단축키를 눌러서 프로그램을 실행시킬 수 있습니다. 창내에 버튼과 같은 컨트롤을 추가하는 방법은 우선 *.vb로 되어 있는 소스 코드 더블 클릭하거나 우측마우스 팝업 메뉴>디자이너 보기(View Designer)로 디자이너 화면을 띄웁니다. 툴박스에서 추가할 컨트롤을 끌어다가 디자이너 창에 놓는 방식으로 컨트롤을 추가하면 됩니다. 

버튼을 눌렀을 때와 같이 다양한 이벤트를 처리하는 루틴을 이벤트 처리 루틴이라 하며 버튼을 클릭을 했을 때 처리하는 루틴은 버튼을 더블클릭하는 것으로 추가 할 수 있습니다. 이처럼 특정 컨트롤을 더블클릭하면 해당 컨트롤의 기본 이벤트(Default event)를 처리하는 루틴을 추가하고 해당 코드로 이동합니다. 이미 해당 이벤트를 처리하는 루틴이 있다면 추가하지 않고 해당 루틴으로 이동합니다. 버튼의 경우에는 Click 이벤트가 기본이었지만 텍스트박스는 TextChanged 이벤트가 기본 이벤트로 설정되어 있는 등 컨트롤 별로 기본 이벤트는 다르게 설정되어 있습니다. 기본 이벤트가 아닌 다른 이벤트를 추가하고 싶을 경우에는 일단 컨트롤에 대한 이벤트 처리 루틴으로 이동한 다음 아래의 그림과 같이 해당 컨트롤에 대해서 추가하고 싶은 이벤트를 코드 편집창 우측 상단에 있는 이벤트 리스트에서 골라 선택하면 됩니다. 이때도 해당 이벤트에 대한 처리 루틴이 기존에 있으면 해당 루틴으로 이동하고 없으면 추가합니다. 참고로 코드 편집창 좌측 상단은 현재 폼(Forms)에 속해있는 컨트롤 목록입니다.

툴박스에서 디자이너 창에 컨트롤의 끌어다 놓거나 이미 추가한 컨트롤을 선택하면 아래의 그림과 같이 컨트롤 주변으로 점선이 표시되면서 변형이 가능한 부분에 대하여 작은 사각형이 표시됩니다. 버튼 같은 경우에는 각 모서리와 상하좌우에 핸들이 표시되었으므로 어떤 방향으로도 확대/축소 변형이 가능하다는 의미입니다. 이런 변형을 위한 핸들은 컨트롤별로 옵션에 따라 다르게 표시되므로 참조해서 화면을 구성합니다. 컨트롤의 이동은 마우스 커서가 십자화살표인 상태에서 끌어다놓기(Drag & Drop) 방식으로 하거나 정밀하게 움직일 때는 키보드 화살표로 이동할 수 있습니다. 

특정 컨트롤을 선택한 상태에서는 아래의 그림과 같이 속성창을 통해서 해당 컨트롤에 대한 다양한 속성을 확인 및 설정할 수 있고, 다양한 이벤트에 대한 이벤트 처리 루틴도 관리할 수 있습니다.

속성창 맨 상단에 있는 콤보박스를 통해서 다른 컨트롤을 선택하여 다룰수도 있습니다. 콤보박스 바로 아래에 있는 속성창 버튼과 이벤트창 버튼으로 속성창의 내용을 전환시킬 수 있으며 각 속성 및 이벤트의 각 항목를 선택하면 맨 하단에 해당 속성과 이벤트에 대한 설명을 볼 수 있으므로 별도의 매뉴얼이 없더라도 각 컨트롤 별로 필요한 내용을 적절하게 설정해서 사용할 수 있습니다. 이벤트 창의 경우 원하는 이벤트의 우측 칸에서 더블클릭하면 해당 이벤트에 대한 처리 루틴을 추가하여 코드를 작성할 수 있도록 해당 코드 편집 위치로 이동 시켜 줍니다. 앞서 언급한 이벤트 추가 방법은 코드 편집창에서 수행한 것이라면 속성>이벤트창에서 이벤트를 추가하는 방법은 디자이너 편집 상태에서 이벤트를 추가하는 방법입니다.

속성창과 이벤트 창에서 유의해서 볼 사항은 좌측 열이 항목의 이름 우측 열이 항목의 값인데 항목 값 중에는 다른 값과 달리 굵게 표시된 사항들이 있습니다. 이 항목들은 각 컨트롤의 기본값에서 변경이 있었다는 의미이므로 작업에 참고하시면 되겠습니다. 속성창에서 "Text" 항목의 값을 바꾸어 버튼의 텍스트를 수정하고 F5로 프로그램을 실행시켜 봅니다.

■ 컨트롤 편집과 레이아웃 조정하기

컨트롤 이동 및 크기 조정은 앞서 설명한 바와 같습니다. 기존 컨트롤과 같은 형태로 컨트롤을 복사하고 싶으면 컨트롤을 선택한 상태에서 복사(Ctrl+C)/붙여넣기(Ctrl+V)하거나 Ctrl키를 누른 상태에서 마우스로 끌어다 놓기로 복사하면 됩니다. 컨트롤을 복사하면 복사이후 위치와 이름 뿐만아니라 이벤트가 정상적으로 연결되었는지도 꼭 확인해야 합니다.

컨트롤 복사 및 붙여넣기는 단일 컨트롤이 아닌 여러 컨트롤을 대상으로도 수행할 수 있습니다. 여러 컨트롤을 한번에 선택하는 방법은 마우스로 컨트롤이 없는 폼의 바탕을 드래그하여 범위를 지정하여 선택하는 방법과 Shift키를 누른 상태에서 컨트롤을 연속적으로 클릭하여 선택하는 방법이 있습니다. 여러 컨트롤을 추가한 경우 컨트롤의 배치를 레이아웃에 맞게 조정할 수 있는데 레이아웃 조정과 관련된 기능은 레이아웃 툴바에 있는데 비주얼스튜디오 현재 화면에 보이지 않는 경우에는 Tools>Customize...메뉴를 통해서 아래의 그림과 같이 Toolbars 탭에 있는 Layout을 체크하면 컨트롤들의 레이아웃을 조정할 수 있습니다.

레이아웃 툴바가 적용된 화면은 아래와 같습니다.

레이아웃의 적용 방법은 오피스 문서에서 사용하는 방법과 크게 다르지 않으므로 대상 컨트롤 들을 적절하게 선택하여 원하는 배열을 적용하면 됩니다. 오피스 문서에는 없고 윈도우 폼과 밀접하게 연관되는 기능중의 하나가 바로 "탭 순서 수정"입니다. 

윈도우 폼에서 탭(Tab)키로 이동할 수 있는 컨트롤을 지정할 수 있고 이들 간에 이동 순서가 있는데 작업을 하다보면 이 순서가 틀어 질 수 있고 속성 창에서 숫자로 일일이 수정하기란 쉬운 일이 아닙니다. 이런 상황에서는 레이아웃 툴바의 탭 순서 수정 기능을 열고 첫 순서부터 차례대로 번호를 클릭하면 차례로 번호를 다시 부여해 줍니다.