[C# 실습 예제] 비주얼 스튜디오 2019 _사용자 정의 컨트롤

 

이 글은 유투브 강의 보고 요약한 것입니다. 따라 실습하면서 캡쳐한 것이니 생략된 부분이 많을 것입니다. 자세히 공부하고 싶은신 분은 영상을 참고해주세요.

 

훌륭한 강의 제공해주신 유튜버 DoriDori님께 감사합니다. 

https://youtu.be/o2PQDs90iHA

※ 비주얼 스튜디오 2019(윈도우)

 

■ 컨트롤이란? 

좌측 도구 상자에 컨트롤들이 있다. 

■ 사용자 정의 컨트롤

- Winform 에서 기본적으로 제공하는 Control 외 사용자가 원하는 형태의 Control를 만들어서 사용할 수 있음

- Code를 분리해서 가독성을 높여 줄 수 있음

- Control의 재사용이 뛰어남

 

■ 프로젝트 만들고 사용자 정의 컨트롤 생성하기

- 상단 메뉴바에서 [프로젝트]-[사용자 정의 컨트롤 추가]

- 우측 솔루션 탐색기에서 프로젝트에 커서 두고 오른쪽 마우스 [추가]-[새 항목]-[사용자 정의 컨트롤 추가]

 

이름을 짓고 만들면 아래와 같은 화면이 뜬다. 

저 네모가 유저 컨트롤을 올릴 수 있는 화면이다.

좌측 도구 상자에 있는 컨트롤들을 사용하여 다음과 같이 UI를 만들고 Naming을 해준다. 

우측 솔루션 탐색기에 트리 마지막 부분에서 UCinfo.cs 사용자 지정 컨트롤이 있는 것을 확인할 수 있다. 

빌드하고 도구상자를 확인하면 좌측 도구 상자에 구성 요소에 사용자 정의 컨트롤(UCinfo)이 들어가 있는 것을 확인할 수 있다. 

 

 

도구 상자에서 panel과 listbox 추가하기 

Property 코드 작성하고 빌드하면 우측 속성창에 UserProperty 칸이 생긴 것을 확인할 수 있음.

[Category("UserProperty"), Description("Image")] //형이라고 보면 된다. 
        //카테고리 하나 따서 프로퍼티 카테고리 하나 따주시고 여기서 Description은 그냥 아이템에 관한 설명으로 보면되고
        public Image UserFace
        //public: 외부에서 접근하는 하게, Image: 반환하는 형식, UserFace: 화면에 표시될 이름
        {
            get //이미지를 첨부하면 pbox에다가 넣겠다. 
            {
                return this.pboxFace.BackgroundImage;
            }
            set
            {
                this.pboxFace.BackgroundImage = value;
            }
        }

        [Category("UserProperty"), Description("No")] 
        //위랑 비교해서 형만 바꾼 것
        public string UserNo // string으로 형 바꿔주고
        {
            get 
            {
                return this.lblNo.Text; //위랑 비교해서 뿌려줄 부분만 바뀐 것
            }
            set
            {
                this.lblNo.Text = value;
            }
        }

        [Category("UserProperty"), Description("현상범의 이름")]
        public string UserName
        {
            get
            {
                return this.lblName.Text; 
            }
            set
            {
                this.lblName.Text = value;
            }
        }

        [Category("UserProperty"), Description("현상범의 금액")]
        public string UserGold
        {
            get
            {
                return this.lblGold.Text; 
            }
            set
            {
                this.lblGold.Text = value;
            }
        }

UCinfo에 코드 작성하고 빌드하면 우측 속성 창에 UserProperty가 생긴 것을 확인할 수 있다.  

예제에 맞게 이미지와 정보를 바꿔준다. 

이제 버튼에 이벤트를 넣어주자. 어떤 버튼을 누르든 UI쪽으로 넘기기 위해 다음과 같이 진행한다. 

UCinfo에서 수배 버튼을 더블클릭하고 UCinfo.cs에 코드 추가한다. 

btnReg_Click을 btn_Click으로 변경한다. 그럼 아래에 오류가 뜨는데 더블클릭해서 UCinfo.Designer.cs로 넘어가서 코드를 수정해준다. 

 

나머지 '정지', '잡힘' 버튼에도 Click했을 때 이벤트처리 하기 위해 우측 속성 창의 작업에서 Click서 btn_Click를 선택 해주면 된다. 

 

switch구문을 써서 각 버튼마다 다른 결과가 나오도록 하자. 

 

▷ 왼쪽 코드를 작성할 때

강의에서 나온 멘트를 그대로 적어보자면

(쌩 초보자로써 새로운 용어가 나오면 뭐라는지 모르겠다. 그냥 넘어가기에 아쉽고, 무식하게 일단 받아적고 보자)

29:22 (영상 시간) 버튼 이벤트가 있잖아요. 이거 Delegate로 형태로 되어 있다고 보여드렸잖아요 이벤트 핸들러 따는데 이놈의 핸들러가 Delegate라고 말씀드렸잖아요.  결국에 이게 Delegate라는 뜻인데 그럼 이벤트를 Delegate로 폼에서 이벤트를 보낼 때 Delegate로 보냈었죠.  Control도 마찬가지예요. Control도 결국에는 폼 호출하듯이  클래스를 호출해서 쓰는 거라고 생각하면 하시면 돼요.  그래서 Delegate를 따서 만들면 돼요.  30:04  버튼 형태랑 조금 비슷하게 갈려고 오브젝트를 딸꺼구요.   30:15 sender하나 넣어주고, 결과같은거 뿌려줄 Delegate 이벤트 하나 따구요.

 

 

▷ 위에서 작성한 switch 구문을 다음과 같이 변경했다. 

하지만 eventdelSender(this, string.Format(... 부분이 중복되기 변경해주면 좋을 것 같다. 

 

 

 

 

 

 

 

 

▷ 이 코드 설명도 역시 강의 멘트를 그대로 사용해야겠다. 

32:38 글자만 틀리잖아요. 그럼 글자만 빼주면 되겠죠.  switch에서 타고나면은 break에서 빠져나가니까  break는 switch문만 빠져나가게 되어 있거든요. 33:18 텍스트로 만들어 준거를(strText) 여기다가 (switch아래의 eventdelSnder(this, strText)넣어주면  똑같은 부분만 다 지워주면 되겠죠. 중복되는거만 지워주시면 소스가 깔끔해지죠. 34:11 이렇게 해서 Delegate 이벤트까지 만들었어요.

 

 

실행하면 이렇게 NullReferenceExeption에러가 뜬다.

왜냐?

Delegate를 사용한데가 없으니까 그래서 예외처리를 걸어주던지, sender가 null인지 확인해줘야 한다. 

다음 코드를 아래에 추가하자. 

 

 

 

 

 

 

 

 

 

 

 

if(eventdelSender != null)//sender가 호출이 안 되어있는 상태니까 어디 보내는 데는 없어요. 
            {
                eventdelSender(this, strText);
            }

 

 

panel에 대한 코드를 작성해 줄 껀데 우측 솔루션 Form1.cs아래 Form1.Designer.cs 들어가서 창을 열자. 

 

2019.11.12 

아직 Delegate부분을 공부 안해서 Form1 수정 부분은 이해 못 하겠다. 다시 공부하고 오는 걸로