윈폼으로 설문조사 결과산출 프로그램 만들기(2)

이제 버튼을 누르면 해당 버튼의 숫자가 증가/감소하고 숫자의 합계가 나오는 기능을 구현해보자

 

먼저 UserControl1.cs에 다음과 같은 내용을 넣어주자

private void btn_MouseUp(object sender, MouseEventArgs e)
        {
            MouseEventArgs me = (MouseEventArgs)e;  //마우스 이벤트
            Button btn = sender as Button;
            if (me.Button == MouseButtons.Left) //클릭한 버튼이 마우스 왼쪽 버튼이면 실행할 코드들
            {
                int val = Convert.ToInt32(btn.Text) + 1; //각 버튼들의 숫자값을 1씩 증가시킨다
                btn.Text = val.ToString();
                int hap = Convert.ToInt32(label2.Text) + 1;
                label2.Text = hap.ToString();  //5개의 버튼들의 합계를 구한다
            }
            if (me.Button == MouseButtons.Right) //클릭한 버튼이 마우스 오른쪽 버튼이면 실행할 코드들
            {
                int val = Convert.ToInt32(btn.Text) - 1; //각 버튼들의 숫자값을 1씩 감소시킨다
                int hap = Convert.ToInt32(label2.Text) - 1; 
                if (val < 0 | hap < 0)
                {
                    MessageBox.Show("더이상 뺄 수 없습니다!", "경고!"); //0인 상태에서 우클릭 시 숫자 감소를 방지
                    return;
                }
                btn.Text = val.ToString();
                label2.Text = hap.ToString();
            }
        }

위와같이 버튼을 클릭하면 돌아갈 '함수'를 만들었고 이제 이 함수를 적용시키면 된다.

UserControl1.cs [디자인]에 들어가서 

컨트롤들의 속성을 바꿀 수 있는 창이다. 앞으로 많이 쓰일것이니 알아두자. 현재 선택된 번개 그림은 '이벤트'를 생성하는 것이고 좌측의 스패너와 종이 그림이 각종 설정을 변경하는 것이다.

각 버튼마다 'MouseUp'에 함수를 적용시켜 준다.(다중선택을 하고 한번에 적용할 수 있다)

 

윈폼에는 마우스 이벤트 효과가 많은데 특징은 다음과 같다

MouseClick - 마우스를 클릭할 때

MouseDown - 마우스가 눌리는 순간

MouseEnter - 마우스가 영역에 들어갈 때

MouseHover - 마우스가 영역 위에 있을 때(웹 사이트에서 마우스를 올리면 창이 뜨는 것과 비슷한 개념이다)

MouseMove - 마우스를 움직일 때

MouseLeave - 영역에서 마우스가 나갈 때

MouseUp - 마우스를 클릭했다가 놨을 때

 

MouseDown과 MouseUp은 미묘한 차이가 있는데 마우스를 클릭할 때 '딸깍' 소리가 난다고 생각해보자

MouseDown은 '딸-'의 순간이고 MouseUp은 '-깍'에서 발생하는것이다

MouseClick은 MouseUp과 Down 모두가 발생해야 발생한다

 

여기까지 따라왔다면 일단 아주아주 기본적인 부분은 완성된 것이다.

 

 

그리고 지난번 포스팅에서 추가하지 못한것이 있는데 우리는 설문조사의 결과를 엑셀로 저장하기 위해 버튼들의 값을 복사해주는 버튼도 만들어야 한다.

 

이런식으로 복사 버튼을 추가하여 디자인을 최종적으로 변경하면 된다.(참고로 나중에 완성해 보면 알겠지만 제일 왼쪽의 숫자가 행의 개수를 의미하는데 100개가 넘어가면 제일 왼쪽의 버튼 한개를 아주 살짝 가린다.. 이게 싫다면 위치를 조정해주면 된다. 필자도 포스팅을 위해 다시 만들면서 해당 부분을 수정했다.)

 

참고로 수정 전의 디자인은 이랬었고, 버튼을 추가 및 색을 변경하고 위치들을 조정해줬다.

 

복사 버튼의 코드는 나중에 구현할 것이고 일단 우리는 이런식으로 5개를 더 만들어야 한다.

(버튼2개, 3개, 4개, 5개, 6개, 7개 버전)

UserControl1의 경우 예시를 위해 이름이 이렇게 됐지만 나머지는 버튼 개수에 맞춰서 이름을 만드는게 편하다

(ex. 버튼2개짜리는 UserControl2, 7개짜리는 UserControl7)

 

이런식으로 구성을 하고 코드는 아까와 동일하게 작성하면 된다

 

이제 BasicMode에 쓰일 프로토타입을 만들어보자

BasicMode에서는 5개의 버튼으로 구성된 UserControl1만 쓰일 것이다

 

프로젝트=>윈폼추가를 눌러 폼을 추가해주자

필자의 경우 폼이름을 BasicMode.cs로 했다

 

 

그림과 같이 1개의 flowLayoutPanel과 2개의 button을 넣어준다.

각 버튼의 text속성은 ▲▼로 바꿔준다

이전 포스팅에서 설명했든 flowLayoutPanel에서 우리가 만든 컨트롤들을 정렬시켜서 띄워준다

 

▼버튼을 누르면 앞서 만들었던 컨트롤이 하나씩 생기고

▲버튼을 누르면 컨트롤이 지워지게 만들 것이다

 

 

public BasicMode()
        {
            InitializeComponent();
        }

코드가 있는 윗부분에

 

public int line = 1; //만들어진 행의 개수를 표기하기 위함
public UserControl1[] btn = new UserControl1[101]; //질문의 개수 추가에 제한을 두기 위함

위와같이 변수를 선언한다

배열로 질문의 개수를 판별하는 이유는 나중에 만들 promode와 차별화를 하기 위함도 있지만 ▲▼버튼으로 컨트롤을 추가/제거할 때 가장 최근의 위치값을 가져와야하기 때문이다. 이 위치값은 아래 사진의 1,2처럼 행값을 표현하는데도 사용된다

가령 위와같은 상황에서 ▼를 누른다면 다음 line은 3이 돼야하고 ▲를 누른 후에 ▼를 누르면 다음 line은 2가 돼야 하기 때문이다. 이런 값을 직관적으로 계산하기 위해 배열의 인덱스 값을 사용했다.

 

▼버튼에 다음과 같은 코드를 넣어준다

            try
            {
                this.userControl11 = new UserControl1();
                userControl11.label1.Text = line.ToString();
                btn[line] = userControl11;
                flowLayoutPanel1.Controls.Add(userControl11);
                line += 1;
            }
            catch
            {
                MessageBox.Show("질문은 최대 100개까지만 추가할 수 있습니다!", "경고!");
            }

 

▲버튼에 다음과 같은 코드를 넣어준다

            if (line > 2)
            {
                flowLayoutPanel1.Controls.Remove(btn[line - 1]);
                line -= 1;
            }
            else
            {
                MessageBox.Show("최소 두개 이상의 행을 추가해야 추가한 행을 제거할 수 있습니다!", "경고!");
            }

 

여기까지 했다면 아마

['userControl11' 이름이 현재 컨텍스트에 없습니다.]

라는 오류가 생겼을 것이다

 

우리가 userControl을 만들기만 하고 불러오지 않아서 생긴 오류이다

BasciMode의 디자인 으로 다시 들어가서 

도구상자=>UserControl1을 폼 안에 넣어준다

 

 

그럼 이런식으로 될텐데 실제 프로그램을 실행하면 그대로 보이기 때문에 안보이게 처리를 해주면 된다

visible 속성을 false로 바꾸면 프로그램 실행시에 보이지 않는다

필자의 경우 실행 뿐만이 아니라 지금 화면에서도 보이는게 싫어서 아예 크기를 매우 작게 줄였다.

 

 

프로토타입이라고 말은 했지만 어차피 나중에 써먹을거기 때문에 디자인도 해주자

 

필자는 다음과 같이 색을 넣어줬다.(물음표 버튼의 경우 사용법을 적어놨는데 이건 기호에 따라서 알아서 쓰면된다)

 

이제 Form1.cs로 돌아가서 아무곳에나 버튼을 하나 넣고(Form1의 경우 프로그램의 코드를 모두 작성한 후 디자인 정렬을 해도 되기 때문에 그냥 대충 집어넣자)이름을 'BasicMode'라고 작성하자

 

클릭 이벤트를 생성하고

BasicMode newform2 = new BasicMode(); //본인의 BasicMode 이름이 다르다면 해당 이름 넣기
newform2.Show();

위와 같은 코드를 넣어주자

이제 프로그램을 실행하고 BasicMode라는 버튼을 클릭하면

 

이런 창이 뜬다.

▼를 누르면 

이런식으로 행이 추가가 되고

 

▲를 누르면 행이 제거가 된다

 

참고로 ▼를 계속 누르다 보면 

이런식으로 잘려서 더이상 늘어나지 않는것을 볼 수 있는데 

 

flowLayoutPanel의 크기를 초과해서 컨트롤이 생성됐기 때문이다

flowLayoutPanel의 AutoScroll 속성을 True로 바꾸면 해결된다

 

다시 본론으로 돌아와서

이렇게 생성된 컨트롤의 각 버튼을 좌클릭해보면 

 

이렇게 한번 클릭 할 때마다 버튼의 숫자가 1씩 증가하고 우측의 숫자에 5개 버튼들의 합계가 표시된다

 

반대로 우클릭을 하면 버튼의 숫자가 1씩 줄어들고 

합계에도 즉시 반영이 된다.

 

또한 아무 행이 없는

상태에서 ▲버튼을 누르면 

이런 오류메시지가 뜨고

 

버튼의 숫자가 0인 상태에서 우클릭을 하면

이런 메시지가 뜨고,

 

행을 100개를 초과하여 생성하려고 하면

다음과 같은 메시지가 정상적으로 뜨는 것을 확인할 수 있다.

 

이제 진짜로 BasicMode의 구성은 거의 다 끝났다. 사실 이 기능만 써도 웬만한 설문조사 결과산출 작업에는 큰 무리가 없다

다수의 설문조사는 5지선다 혹은 4지선다이고 질문의 개수가 100개를 초과하는 설문조사는 많지 않기 때문이다

 

우리는 최대한 많은 설문조사에 대응할 수 있는 프로그램을 만들고 있기 때문에 나머지 기능들을 ProMode에서 구현할 것이다.

참고로 ProMode에서는 앞서 만들었던 다양한 컨트롤을 이용해 질문의개수와 선택지의 개수를 용도에 맞게 설정하고 엑셀로 정리 및 서술식으로 쓴 응답에 대해서도 정리할 수 있는 기능을 제공한다

 

이번 포스팅이 길어진 관계로 다음 포스팅에서는 아직까지 만든 BasicMode를 활용하는 예시를 알아보는 쉬어가는 시간을 갖고 다음다음 포스팅에서 ProMode를 만들것이다.