[C#] (강의) 4. 컨트롤 개요 (폼 배치)

m.cafe.daum.net/smbitpro/R7EG/10

4. 컨트롤 개요 (폼 배치)

컨트롤 개요 (1.폼 배치)

이번에는 컨트롤에 대해 간략히 살펴보기로 하자.

 

컨트롤은 응용 프로그램에 표시되는 구성 요소로 사용자와 상호작용을 할 수 있다.

컨트롤은 크게 .NET Framework에서 제공되는 컨트롤들과 사용자 정의 컨트롤, 사용자 지정 컨트롤로 구분할 수 있을 것이다.

 

.NET Framework에서는 다양한 컨트롤을 제공하고 있어 응용 프로그램 개발 비용을 줄여준다. 또한, 개발자는 목적에 따라 컨트롤을 만들어 사용할 수 있게 하고 있다.

 

일반적으로 개발자가 목적에 따라 컨트롤을 만들 때 다음과 같이 만든다.

사용자 정의 컨트롤은 보통 기존의 컨트롤을 합성하거나 기능의 변화를 주는 형태로 만든다.

사용자 지정 컨트롤은 Control 클래스로부터 파생하여 대부분의 그래픽 디자인과 기능 등을 만

든 컨트롤이다.

 

여기에서는 먼저 .NET Framework에서 제공되는 컨트롤들을 폼에 배치시키고 이들을 활용하는 기본 원리에 대해 살펴보자.

 

이를 설명하기 위해 회원 관리 프로그램을 예로 설명하려고 한다.

회원 관리 프로그램은 세 개의 폼(메인 폼과 회원 추가 폼, 설정 폼 메인 폼)과 4개의 클래스(회원 클래스, 설정 클래스, 프로그램 클래스, 전역데이터 클래스)로 구성할 것이다.

 

구성 요소 명	타입	설명
MainForm	폼	응용 프로그램의 메인 폼
InputForm	폼	회원 추가 폼
SettingForm	폼	리스트 뷰에 표시할 항목 설정 폼
Member	Class	회원 클래스
Setting	Class	설정 클래스(Singleton)
Program	static Class	응용 프로그램 진입점 클래스
GlobalData	static Class	응용 프로그램내의 개체 관리

 

다음은 회원 관리 프로그램을 구성하는 세 개의 폼의 화면 모습이다.

 

 

 

 

1. 폼 배치

Visual Studio 2008과 같은 통합 개발 환경에서는 간단하게 폼에 컨트롤을 배치할 수 있게 해 주고 있다. 도구 상자에 있는 컨트롤을 선택하여 폼 디자인 창에 원하는 위치에 갖다 놓는 작업만으로 이를 해결 해 준다.

 

1.1 MainForm 배치

응용 프로그램이 만들어지면서 자동으로 생성된 Form1의 속성의 Name을 MainForm이라 변경하고 폼의 Text 속성을 회원 관리 프로그램으로 변경을 하자.

 

이제 도구 상자에서 리스트 뷰를 선택하여 폼에 배치한 후 리스트 뷰 화면 표시 우측 상단의 화살표를 누르면 아래와 같은 화면이 뜰 것이다. 리스트 뷰의 속성 중 View에는 폴더의 보기 설정처럼 큰 아이콘 보기에서 자세히 보기 까지 5종류가 있다. 여기서는 Details로 하자. 그리고, 부모 컨테이너에서 도킹을 하자. 그러면 ListView의 Dock 스타일이 Fill로 변경이 된다.

 

 

  

 

도구 상자에서 MenuStrip을 선택하여 MainForm에 추가하자.

그리고, 아래 그림과 같이 기능, 설정, 추가를 입력하자.

기능(&M)이라 입력하면 아래와 같이 M밑에 언더 바가 표시되며 Alt + M을 누르면 해당 메뉴가 선택되어 진다.

설정과 추가뒤에 Ctrl+S와 Ctrl+A는 직접 입력한 것이 아니라 속성 창의 ShortcutKeys를 설정한 것이다.

 

  

응용 프로그램 제작 시 편의를 위해 컨트롤 이름을 변경하자. 컨트롤의 이름은 속성 창에서 (Name)항목을 변경하면 된다. 그리고, 해당 컨트롤을 소유한 Form의 코드에서 해당 명칭을 사용하게 된다.

컨트롤의 (Name)

컨트롤 명	속성 명	값
기능MToolStripMenuItem	(Name)	MainMenu
추가ToolStripMenuItem	(Name)	AddToolStripMenuItem
설정ToolStripMenuItem	(Name)	SettingToolStripMenuItem

 

이제 실행을 해 보면 배치한 형태의 MainForm이 표시되는 것을 확인할 수 있다.

 

경우에 따라서는 소스 코드에서 동적으로 컨트롤을 배치해야 하는 경우도 발생할 것이다. 이러한 경우에는 컨트롤 개체를 생성하고 속성을 설정한 후에 부모 컨트롤의 Controls속성의 Add메서드를 이용하면 된다. 다음은 폼 디자인을 이용하지 않고 동일한 디자인을 소스 코드에서 배치한 예이다.

 

public partial class MainForm : Form {     ListView listView;     MenuStrip menuStrip;     public MainForm()     {         InitializeComponent();         ListAdd();         MenuAdd();     }       //메뉴를 추가          private void MenuAdd()     {                    menuStrip = new MenuStrip();           ToolStripMenuItem MethodToolStripMenuItem = new ToolStripMenuItem("기능(&M)");         menuStrip.Items.Add(MethodToolStripMenuItem);           ToolStripMenuItem SettingToolStripMenuItem = new ToolStripMenuItem("설정");         SettingToolStripMenuItem.ShortcutKeys = Keys.Control | Keys.S;             MethodToolStripMenuItem.DropDownItems.Add(SettingToolStripMenuItem);           ToolStripMenuItem AddToolStripMenuItem = new ToolStripMenuItem("추가");         AddToolStripMenuItem.ShortcutKeys = Keys.Control | Keys.A;             MethodToolStripMenuItem.DropDownItems.Add(AddToolStripMenuItem);                         Controls.Add(menuStrip);     }       private void ListAdd()     {         listView = new ListView();         listView.Dock = DockStyle.Fill;         listView.View = View.Details;         Controls.Add(listView);     } }

 

Windows Form 응용 프로그램에 관련 학습을 시작하는 이들은 소스 코드로 화면 배치를 하는 연습을 게을리 하지 않는다면 시간이 지날수록 연습에 들어간 비용의 효과를 누릴 수 있을 것이다.

 

1.2 SettingForm 배치

프로젝트에 Setting 폼을 추가하자. 아래 그림 처럼 솔루션 탐색기의 프로젝트를 선택하여 오른쪽 마우스 버튼을 누르고 추가 è Windows Form 을 선택하여 새로운 폼을 추가할 수 있다.

 

 

SettingForm은 MainForm의 리스트 뷰에 표시할 컬럼 항목을 설정하는 역할을 수행한다.

이를 위해 SettingForm에는 표시할 항목들을 선택할 수 있도록 CheckedListBox를 배치하자.

CheckedListBox의 (Name)은 SettingBox라 명명하였다.

그리고 SettingBox의 Dock 속성을 Fill로 하여 SettingForm의 클라이언트 전체 영역에 SettingBox가 표시되게 하자.

SettingBox의 기본 항목을 추가하고 싶다면 아래 그림과 같이 SettingBox의 우측 상단의 화살표를 선택하여 항목 편집을 선택하여 항목을 추가하면 된다.

 

 

폼 디자인 창이 아닌 소스 코드에서 항목을 추가하는 코드를 작성하고 싶다면 다음 예제 코드와 같이 하면 된다.

public SettingForm() {     InitializeComponent();     ItemSetting(); }   private void ItemSetting() {     SettingBox.Items.Add("가");     SettingBox.Items.Add("가");     SettingBox.Items.Add("가"); }

 

예상대로 동작하는지를 확인하기 위해 MainForm의 생성자에 InitializeComponent(); 호출문 뒤에 다음 코드를 추가한 후에 동작 시키면 확인할 수 있을 것이다.

SettingForm settingForm = new SettingForm();

settingForm.Show(); 

 

1.3 InputForm 배치

프로젝트에 InputForm을 추가하자.

InputForm은 한 명의 회원 정보를 추가하기 위해 회원의 데이터를 입력할 수 있게 구성하여야 할 것이다. 아래의 형태로 폼을 배치시켜 보자.

 

  

폼 내의 여러 개의 컨트롤 요소들을 배치를 할 때에는 도구 상자의 컨테이너 탭에 있는 컨트롤로 기본 틀을 잡고 요소들을 배치를 하면 효과적으로 배치할 수 있다.

 

여기서는 TableLayoutPanel을 사용하자. TableLayoutPanel을 InputForm에 추가한 후 행과 열을 편집하자.

 

 

열은 2개이고 행의 개수는 8개로 하였다.

그리고, 각 열과 행의 넓이오 높이를 설정을 하자. 그리고, 해당 TablelayoutPanel의 Dock 속성 값을 Fill로 설정하면 InputForm의 클라인언트 전체 영역에 배치된다.

 

그리고, 나머지 요소들을 배치하자.

행,열	컨트롤 타입	컨트롤 명
0,1	Label	이름:
0,2	Label	나이:
0,3	Label	성별:
1,1	TextBox	textBoxOfName
1,2	NumericUpDown	numericUpDownOfAge
1,3	GroupBox	groupBoxOfGender
1,4	CheckBox	checkBoxOfMarried
1,5	CheckBox	checkBoxOfCar
1,6	SplitContainer	splitContainerForButtons

 

그리고, groupBoxOfGender에는 RadioButton을 두 개를 자식으로 배치하자.

이들의 이름은 radioButtonFemale , radioButtonMale이라 명명하였다. 그리고, radioButtonFemale의 Checked 속성의 값을 True로 변경하여 초기 화면에서 이를 초기 선택된 값으로 하였다.

 

splitContainerForButtons의 왼쪽과 오른쪽에는 각각 Button을 배치하자.

이들의 이름은 buttonOfConfirm‎와 buttonOfCancel이라 하였다.

 

그리고, 적절하게 Margin 속성과 Dock 속성 등을 변경하여 원하는 형태로 배치를 하자.

 

배치에 너무 많은 에너지를 쏟는 것은 생산적인 학습에 방해가 될 수도 있으니 적당한 수준에서 멈추는 선택을 하는 것은 중요하다.