[C# 집에서 공부해요] 3. GUI 기본 알아보기 (VS 2022)

https://dailytiip.tistory.com/entry/C-%EC%A7%91%EC%97%90%EC%84%9C-%EA%B3%B5%EB%B6%80%ED%95%B4%EC%9A%94-2-C-%ED%82%A4%EC%9B%8C%EB%93%9C%EC%99%80-%EB%AC%B8%EB%B2%95%EB%84%A4%EC%9D%B4%EB%B0%8D-UI-%EC%83%9D%EC%84%B1-VS-2022

[C# 집에서 공부해요] 2. C# 키워드와 문법(네이밍), UI 생성 (VS 2022)

지난 시간 복습

1. 키워드는 특정 용도로 예약되어, 특별한 역할을 수행합니다.

1-2. 따라서 키워드는 변수나 메서드의 이름이 될 수 없습니다.

2. 이름은 규칙에 맞춰 영어로 작성해줍니다.

---

GUI 기본

지난 시간에는 Window Forms 를 생성하여 도구 상자와 문서 개요를 띄우기까지 했는데요. 오늘은 본격적으로 Window Forms 에는 어떤 기능이 있는지와, 직접 GUI를 간단하게 구현하고, 코딩하여 구현한 GUI에 기능을 추가해보겠습니다.

먼저, 크게 띄워져 있는 Form1 에 마우스 우클릭을 하여 속성값들을 알아봅시다.

기본적으로 우측 하단에 속성 창이 새롭게 생성되며 Form1 의 정보들을 볼 수 있게 되는데요. 마우스를 내려서 어떤 속성값이 있는지 확인해봅시다.

Window Forms 를 다루게 되면서 가장 많이 사용하고, 또 중요한 부분이라고 하면 디자인의 (Name) 속성과, 모양의 Text 속성인데요,

 

(Name) 속성은 Window Forms 에서 다루는 컨트롤(버튼, 텍스트 상자, 컨트롤)에 할당되는 고유의 식별자 입니다.코딩을 할 때 (Name) 속성에 있는 값을 참조하거나, 조작할 때 사용되므로 다른 컨트롤과는 중복되면 안됩니다. 

Text 속성은 Windows Forms 에서 다루는 컨트롤의 표시 텍스트나 레이블을 나타냅니다. 예를 들어 버튼 컨트롤의 기본 Text 값인 button1 은 Text 값을 '입력' 으로 수정 하여 컨트롤의 목적이나 작업을 설명할 수 있습니다.

 

 

 

 

 

 

그럼, 간단한 예제로 버튼을 만들고 그 버튼을 눌렀을 때 Hello World! 가 출력되도록 만들어봅시다. 화면 좌측에 있는 도구 상자에서 '모든 Windows Forms' 를 열어 Button 을 찾거나, '검색 도구 상자' 를 이용해 'Button' 을 입력하여 버튼 컨트롤을 찾아줍니다. 찾은 버튼은 끌어당겨서 Form 에 배치하거나, Button 을 한 번 누른 뒤 직접 크기를 수정하여 배치하는 방식이 있습니다. 자신이 원하는 모양대로 배치해줍니다.

버튼이 Form 에 배치되어 있는 상태에서 버튼을 한 번 클릭하면 버튼의 속성값들을 볼 수 있습니다. 이 속성값에서 (Name) 을 'BTN1' 으로, Text 를 '클릭' 으로 변경해봅시다. 변경한 후, 이 버튼을 누르면 Hello World! 가 출력되는 기능을 넣어주어야 하기 때문에 코딩 창으로 이동해야 합니다.

화면 우측에 솔루션 탐색기에서 현재 보고있는 Form1.cs 파일을 우클릭 한 후 코드 보기를 누르거나, F7 키를 눌러 코딩 창으로 이동해 줍니다.

이동하면 사진 속 상단처럼 Form1.cs 와 Form1.cs [디자인] 탭이 보이고 Form1.cs 탭에는 코드를 작성하는 창이 켜진 것을 볼 수 있습니다. 버튼을 눌렀을 때 작동되도록 하기 위해서는 Form1.cs [디자인] 탭으로 다시 넘어가서 아까 만든 버튼을 더블 클릭하여 눌러줍니다.

자동으로 'BTN1_Click' 이라는 새로운 매서드가 생성되며, 그 안에 코드를 입력할 수 있도록 커서가 이동됩니다. 이전에 버튼의 (Name) 값을 'BTN1' 로 수정했기 때문에 'BTN1_Click' 이라는 매서드가 생성됐습니다. 이 매서드에는 버튼을 클릭했을 때 어떤 작업을 수행할지 코딩할 수 있습니다. MessageBox 함수를 이용하여 버튼을 클릭했을 때 메시지 상자가 생성 되도록 하겠습니다. 'BTN1_Click' 매서드 내부에  MessageBox.Show("Hello World!"); 를 입력해봅시다.

 

더블 클릭을 하면 새로운 매서드가 자동으로 생성되기 때문에 GUI 작업 중에는 실수로 폼 요소를 더블 클릭하는 일이 없도록 조심해야 합니다. 추가적으로, 폼 요소가 많은 복잡한 GUI 에서 더블 클릭을 함부로 사용하면 코드의 가독성이 떨어지고 혼란스러울 수 있기 때문에 다른 방법을 이용합니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MyForm
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void BTN1_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Hello World!");
        }
    }
}

F5 를 눌러 실행시켜주고 만든 버튼을 눌러줍니다.

'클릭' 버튼을 누르니 정상적으로 입력한 Hello World! 가 쓰여 있는 메시지 박스가 표시되고 있습니다. 이처럼 MessageBox.Show(); 함수는 호출이 되면 메시지 상자가 표시되는 함수입니다. 일반적으로 메시지 상자를 통해 정보/경고/에러 메시지를 표시하는데 사용됩니다. 

private void BTN1_Click(object sender, EventArgs e)
{
    MessageBox.Show("메시지 상자의 내용입니다.", "메시지 상자의 타이틀입니다.", MessageBoxButtons.OK, MessageBoxIcon.Warning);

}

방금 입력한 메시지 박스를 위 처럼 바꾸어 본 뒤, 버튼을 눌러봅시다. 

버튼을 누르면 경고창이 뜨며 입력한 값이 출력되는 것을 볼 수 있는데 이 처럼 MessageBox.Show(); 함수의 형식은 (내용, 타이틀, 하단 버튼 표시 여부, 아이콘 스타일) 로 구성되어 있습니다.

---

복습

1. (Name) 속성은 컨트롤(버튼, 텍스트 상자, 컨트롤)에 할당되는 고유의 식별자입니다.

2. Text 속성은 Windows Forms 에서 다루는 컨트롤의 표시 텍스트나 레이블을 나타냅니다.

3. GUI의 폼 컨트롤을 더블 클릭하여 매서드를 생성할 수 있습니다.

4. MessageBox.Show("Hello World!"); // Hello World! 가 입력된 메시지 박스가 표시됩니다.

---

지금까지 Window Forms GUI 의 기본을 알고 만들어봤습니다.

다음시간에는 GUI 로 간단한 게임을 만들어보겠습니다.