연습 - Windows Forms 앱 작성

완료됨

Screenshot that shows the UWP, WPF, and Windows Forms logo.

훌륭한 Win32 API를 기반으로 한 Windows Forms는 화려한 꾸밈이 필요 없는 도구와 유틸리티를 개발하기 위한 여전히 인기 있는 UI 기술입니다. Windows Forms를 사용하여 빌드한 앱은 Windows 데스크톱, 노트북 및 태블릿 컴퓨터에서 실행되며 컴퓨터를 사용하는 모든 사용자에게 친숙한 모습입니다.

이 단원에서는 다음 작업을 수행합니다.

  • Visual Studio를 사용하여 Windows Forms 프로젝트를 만듭니다.
  • UI 및 코드 요소를 프로젝트에 추가하여 "hello world" 프로그램의 재미있는 변형을 만듭니다. “Hello there!” 텍스트는 Say hello 단추를 선택할 때마다 임의의 색으로 바뀝니다.
  • 속성을 설정하고 이벤트를 만드는 방법에 대해 알아봅니다.

참고

Windows 개발 소개 학습 모듈에서 설명된 대로 Windows 10 및 Visual Studio를 사용하여 컴퓨터를 설정해야 합니다.

Windows Forms "Say hello" 자습서

프로젝트 만들기

  1. Visual Studio를 열고 메뉴에서 파일>새로 만들기>프로젝트를 선택합니다. 프로젝트 언어로 선택된 C#을 선택한 경우 프로젝트 옵션에서 Windows Forms 앱을 찾아 선택합니다. 그런 다음, 이름Say hello와 같이 친숙하게 변경하고 완료하면 다음을 선택합니다.

    Screenshot that shows the Configure your new project window for a Windows Forms App with the Next button selected.

  2. .NET 버전을 선택한 다음, 만들기를 선택합니다.

  3. 기본적으로 도구 상자, 솔루션 탐색기, 속성 창이 열립니다. 그렇지 않은 경우 보기 메뉴에서 엽니다. 도구 상자공용 컨트롤 목록을 확장합니다.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

UI 빌드

  1. Form1에 대한 속성 창을 열고 Form1에서 Say hello텍스트 항목을 변경합니다. 화면의 다른 쪽에서는 도구 상자Button을 양식의 아래쪽 부분으로 끌어가고 TextBox를 위쪽 부분에 추가합니다. 그런 다음, 텍스트 상자를 약간 넓게 하면 디자인이 다음과 같이 표시됩니다.

    Screenshot that shows a button and text box dragged onto the design layout.

  2. 단추를 선택하여 해당 속성을 표시합니다. 이름SayHelloButton으로 변경한 다음, 속성을 아래로 스크롤하여 텍스트 속성을 Say hello로 변경합니다.

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. 단추에 이벤트를 연결해야 합니다. 디자인 뷰에서 단추를 선택하거나, 속성에서 이벤트 아이콘을 선택한 다음, Enter 키를 선택하거나 Click 이벤트 항목을 선택하여 이벤트를 연결할 수 있습니다. 어떤 메서드를 선택하든 Visual Studio에서는 SayHelloButton_Click 이벤트에 대한 개요 코드를 Form1.cs 파일에 자동으로 추가한 다음, 해당 파일을 엽니다. 간단히 살펴본 후, 디자인 뷰로 돌아갑니다.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

    참고 항목

    실수로 디자인 보기를 닫은 경우 솔루션 탐색기에서 Form1.cs를 두 번 클릭하면 다시 열 수 있습니다. 디자인 보기에서 Windows Forms 양식을 여는 것이 Visual Studio의 기본 작업입니다.

  4. 디자인 뷰에서 텍스트 상자를 선택하여 해당 속성을 엽니다. 이벤트 목록 메서드를 사용하여 단추 이벤트를 추가한 경우 속성에서 렌치 및 문서 아이콘을 선택합니다. 이름 항목을 textBox1로 그대로 둡니다. 글꼴 옆에 있는 더하기 기호를 선택한 다음, 글꼴크기24로 변경합니다. 그런 다음 Text 속성을 약간 아래로 스크롤하고 Hello there!TextAlignCenter로 변경합니다.

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

코드 추가

  1. 이제 기본 보기를 전환하여 Form1.cs를 살펴봅니다.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. 임의로 텍스트 색을 바뀌게 하려면 클래스 수준 변수 Random rand를 추가해야 합니다. Form1 생성자 메서드에서 초기화한 다음, 메서드를 입력하여 임의의 숫자로 짧은 바이트 배열을 채워야 합니다. 다음 코드 줄을 복사하여 붙여넣거나 입력합니다.

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            InitializeComponent();
            rand = new Random();
        }
    
        private byte[] GetRandomBytes(int n)
        {
            // Fill an array of bytes of length "n" with random numbers.
            var randomBytes = new byte[n];
            rand.NextBytes(randomBytes);
            return randomBytes;
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  3. Say hello 단추를 선택할 때마다 텍스트 색을 변경하려면 SayHelloButton_Click 메서드 본문을 프로그램에 추가합니다.

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. 잠시 코드를 검토합니다. 빨간색 밑줄이 그어진 항목이 있다면 무언가 잘못된 것입니다. 철자가 틀린 단어나 약간 잘못 배치된 코드가 있을 수 있습니다.

실행

프로그램을 컴파일하고 실행해 보겠습니다.

  1. Visual Studio의 디버그 메뉴에서 디버깅하지 않고 시작을 선택하거나 F5 키를 선택합니다. 모든 항목을 올바르게 입력한 경우 다음과 같이 실행 중인 앱이 나타납니다.

    Screenshot that shows the app running. Hello there displays in bright green text with the Say hello button below it.

  2. 빌드한 다음, 몇 초 후 Say hello를 계속 선택하면 Hello there! 텍스트 색상 변경이 나타납니다.

이렇게 표시되면 성공하였습니다! 이 자습서를 완료하셨습니다. 제대로 표시되지 않는 경우 뭔가 잘못된 코드 및 UI 속성 설정을 주의해서 다시 확인합니다.