[C/C#] GUI프로그래밍 #3 컨트롤 및 대화상자 실습

Button, TextBox, Label, ProgressBar, Timer, PictureBox, Menu 실습

실습을 진행하기 앞서 지난 시간에 만든 Form2(자식윈도우)를 삭제한다.

Form2.cs 삭제

Form2.cs와 관련된 디자인, Designer.cs모두 삭제된다.

더불어 Form1.cs의 Button이나 MenuStrip, Textbox 모두 삭제해준다.

관련된 코드 역시 삭제해준다. 

Form1.cs와 Form1.Designer.cs 코드 삭제

Button을 누를 때 마다 label의 값을 1씩 증가시키는 동작을 구현하고 싶다!

Label

Label의 값은 String, 1씩 증가시키는 것은 Int 형이기 때문에 .ToString()을 이용해 문자열로 변환시켜줬다.

실습 실행 결과

ProgressBar

ProgressBar는 Value에 따라 시각적으로 얼마나 채워지는 지 확인할 수 있고, Label은 Font크기를 조정할 수 있다.

ProgressBar의 Value를 Click 버튼을 누를 때 마다 변하는 것을 확인하기 위해 위와 같이 코드를 작성했다. 

 

TextBox를 생성해서 Text를 입력하면 Label의 Text와 ProgressBar의 Value도 변경.

 TextBox에 입력한 문자열을 정수값으로 변환해 ProgressBar의 Value를 변경하는 과정이 필요 -> Convert.ToInt32를 이용해 String을 Int로 변경했다. (C언어의 경우 atoi)

 

예외 처리

0과 100을 넘어서는(Value의 설정한 최소 최대) 혹은 정수로 변환할 수 없는 a와 같은 문자열이나 아무것도 입력하지 않을 경우 발생하는 오류를 처리하기 위해 try catch구문을 사용했다. 값을 벗어나는 경우 MessageBox.Show(ex.Message)로 

 

Timer

 Click을 누르면 Timer의 Tick이 활성화 > Tick의 interval이 100(100ms, 0.1초)으로 설정 > 0.1초 마다 m_steps의 값이 1씩 증가, 100을 넘어서면 Tick을 비활성화

Timer는 리소스를 많이 잡아먹기 때문에 Form을 종료할 때 Timer가 활성화 되어있을 수 있기 때문에 Form을 종료할 때 Timer를 비활성화 해주는 코드를 작성해준다.

PictureBox

도구 상자에서 PictureBox를 가져온다. 속성의 SizeMode에 따라 image가 변경된다.

왼쪽 순서대로 StretchImage Normal AutoSize

사진 파일의 크기가 512 x 512 의 크기일 경우

• StretchImage = 이미지 파일을 자동으로 늘이거나 줄여 PictureBox컨트롤의 크기에 맞게 조정된다
• Normal = PictureBox의 컨트롤에 벗어날 경우 이미지가 잘려서 나타난다.
• AutoSize = PictureBox가 이미지의 크기에 맞게 조정된다.

버튼을 눌렀을 경우 없던 사진이 다시 생기게 하는 방법은 Load함수를 사용하면된다.

사진 파일의 경로를 입력하면 Click버튼을 누를경우(아래에서 Text를 Load로 변경) 사진 파일이 생긴다.

 

RadioButton

 

RadioButton 3개를 만들어 각각의 버튼을 눌렀을 경우에 PictureBox의 모드가 변경되게 했다. 

512x512 로 설정돼있던 PictureBox의 Size를 256x256으로 변경하고 Normal의 Checked를 true로 설정해 기본설정의 경우 PictureBox가 256x256의 크기를 유지하게 했다.

왼쪽 순서대로 Normal Stretched AutoSize

 

GroupBox

 

GroupBox를 이용해 RadioButton들이 배타적으로 작동할 수 있게 해준다.

※radioButton들을 groupBox로 옮기는 과정에서 이전에 작성한 radioButton들을 다시 작성해 주어야 한다.

CheckBox

radioButton과 같은 작용을 한다.

 

PictureBox에 기본적으로 있는 Visible 이벤트를 CheckBox의 Check여부로 바꿔줄 수 있다.

 

다음은 PictureBox에 마우스의 좌표를 label에 띄우는 작업이다.

label의 Text를 pictureBox의 MouseMove의 좌표를 따라 출력받는 것을 확인할 수 있다.

※이때 label의 Text는 문자열을 출력하므로 X와 Y좌표를 정수에서 문자열로 변환하는 과정이 필요하다.(.ToString()사)

 

다음은 PictureBox에 선을 그리는 작업이다. 

• 선을 그리기 위한 Graphics 객체 g를 생성한다.
• SolidBrush 객체 brush를 생성하고 그 객체의 색깔을 지정한다.
• Pen 객체 pen을 생성하고 매개변수로 앞에 생성한 brush객체를 지정한다.
• DrawLine으로 선을 그리기 위해 Point 객체 pt1과 pt2를 생성한다.
• 생성한 객체 g는 Dispose로 해제한다.
• g.Clear를 하는 이유는 앞에서 DrawLine한 선이 사라지지 않고 겹쳐서 면을 이루기 때문에 White색으로 화면을 지운다. 

앞서 MouseMove로 DrawLine을 할 수 있지만 이는 바람직한 방법이 아니다. 

그 이유는 효율성과 화면 유지(유지보수성) 때문이다

• Paint 이벤트는 화면이 다시 그려질 때 자동으로 호출하는 반면 MouseMove이벤트는 마우스가 움직일 때마다 그리기 작업을 하므로 창을 다시 그려야 할 상황에서 선이 유지되지 않는다.
• MouseMove 이벤트는 마우스가 움직일 때마다 빈번하게 발생한다. 반면, Paint 이벤트에서는 화면이 다시 그려질 때만 호출하므로 최소한의 그리기 작업이 발생한다.

다음은 PictureBox의 Paint 이벤트를 이용해 DrawLine을 한 작업이다.

Paint 이벤트에 있는 PaintEventArgs e는 e.X나 e.Y처럼 위치 좌표를 받을 수 없으므로 m_x와 m_y를 MouseMove에서 좌표로 받아 활용. 번거롭더라도 이렇게 코드를 작성해야한다. 

 

다음은 PictureBox에 점을 찍는 작업이다.

Graphics에는 점을 찍는 이벤트가 내재되어 있지 않으므로 Bitmap을 활용해 점을 찍어준다.

Paint 이벤트에 Bitmap객체를 만들어 점을 찍어주는 과정을 진행했다.

 

Dialog (대화상자)

 

먼저 프로젝트(P) - 양식 추가로 MyDlg.cs라는 이름의 Form을 하나 생성해준다.

 

Dialog에 TextBox와 Button을 생성해 Button을 누를 경우 Dialog의 Text를 Form1의 label에 출력하도록 하는 작업을 진행한다.

먼저 Form1에 Button을 하나 만들어 Dialog... 버튼을 누를경우 Dialog Form을 띄우도록 작업한다.

그 다음 Dialog의 TextBox의 속성창을 들어가 Modifiers를 Private에서 Public으로 바꿔줘야 한다.

DialogResult에 OK라는 속성을 활용해 코드를 작성해준다.

이와 같이 Dialog(대화상자)와 Form1이 정상적으로 상호작용함을 확인할 수 있다.