자습서: Visual Studio에서 사진 뷰어 Windows Forms 앱에 코드 추가

아티클
04/10/2023

세 가지 자습서로 구성된 이 시리즈에서는 사진을 로드하고 표시하는 Windows Forms 애플리케이션을 만듭니다. Visual Studio IDE(통합 디자인 환경)는 앱을 만드는 데 필요한 도구를 제공합니다. 자세한 내용은 Visual Studio IDE 시작을 참조하세요.

컨트롤은 C# 또는 Visual Basic 코드를 사용하여 관련 작업을 수행합니다.

이 세 번째 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

컨트롤에 이벤트 처리기 추가
대화 상자를 여는 코드 작성
다른 컨트롤에 코드 작성
애플리케이션 실행

필수 구성 요소

이 자습서는 이전 자습서인 사진 뷰어 애플리케이션 만들기와 사진 뷰어에 UI 컨트롤 추가를 기반으로 작성되었습니다. 이전 자습서를 완료하지 않은 경우 해당 자습서를 먼저 진행합니다.

컨트롤에 이벤트 처리기 추가

이 섹션에서는 두 번째 자습서인 사진 뷰어 애플리케이션에 컨트롤 추가에서 추가한 컨트롤에 이벤트 처리기를 추가합니다. 애플리케이션은 단추를 선택하는 등의 작업을 수행할 때 이벤트 처리기를 호출합니다.

Visual Studio를 엽니다. 사진 뷰어 프로젝트가 최근 파일 열기에 나타납니다.
Windows Forms 디자이너에서 사진 표시 단추를 두 번 클릭합니다. 아니면 폼에서 사진 표시 단추를 선택한 다음, Enter 키를 눌러도 됩니다.

Visual Studio IDE에서 주 창에 탭이 열립니다. C#의 경우 탭의 이름이 Form1.cs로 지정됩니다. Visual Basic을 사용하는 경우 탭의 이름이 Form1.vb로 지정됩니다.

이 탭에는 폼 뒤의 코드 파일이 표시됩니다.

참고 항목

Form1.vb 탭에 showButton이 ShowButton으로 표시될 수 있습니다.
다음 코드 부분을 중점적으로 살펴봅니다.
- C#
- VB
```
private void showButton_Click(object sender, EventArgs e)
{
}
```
```
Private Sub showButton_Click() Handles showButton.Click

End Sub
```
중요

이 페이지의 오른쪽 위에 있는 프로그래밍 언어 컨트롤을 사용하여 C# 코드 조각 또는 Visual Basic 코드 조각을 볼 수 있습니다.
Windows Forms 디자이너 탭을 다시 선택하고 사진 지우기 단추를 두 번 클릭하여 관련 코드를 엽니다. 남은 두 단추에도 이 작업을 반복합니다. 매번 Visual Studio IDE는 새 메서드를 폼의 코드 파일에 추가합니다.

Windows Forms 디자이너에서 CheckBox 컨트롤을 두 번 클릭하여 checkBox1_CheckedChanged() 메서드를 추가합니다. 확인란을 선택하거나 선택 취소하면 이 메서드가 호출됩니다.

다음 코드 조각은 코드 편집기에 표시되는 새 코드를 보여 줍니다.

private void clearButton_Click(object sender, EventArgs e)
{
}

private void backgroundButton_Click(object sender, EventArgs e)
{
}

private void closeButton_Click(object sender, EventArgs e)
{
}

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
}

Private Sub clearButton_Click() Handles clearButton.Click

End Sub

Private Sub backgroundButton_Click() Handles backgroundButton.Click

End Sub

Private Sub closeButton_Click() Handles closeButton.Click

End Sub

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged

End Sub

이벤트 처리기를 비롯한 메서드에 원하는 이름을 지정할 수 있습니다. IDE를 사용하여 이벤트 처리기를 추가하면 컨트롤 이름과 처리 중인 이벤트를 기반으로 이름이 만들어집니다.

예를 들어 showButton이라는 단추의 Click 이벤트는 showButton_Click() 또는 ShowButton_Click()으로 이름이 지정됩니다. 코드 변수 이름을 변경하려는 경우 코드에서 변수를 마우스 오른쪽 단추로 클릭한 다음, 리팩터링>이름 바꾸기를 선택합니다. 코드에서 해당 변수의 인스턴스 이름이 모두 바뀝니다. 자세한 내용은 이름 바꾸기 리팩터링을 참조하세요.

대화 상자를 여는 코드 작성

사진 표시 단추는 OpenFileDialog 구성 요소를 사용하여 사진 파일을 표시합니다. 이 프로시저는 해당 구성 요소를 호출하는 데 사용되는 코드를 추가합니다.

Visual Studio IDE는 IntelliSense라는 유용한 도구를 제공합니다. 사용자가 값을 입력할 때 IntelliSense는 가능한 코드를 제안합니다.

Windows Forms 디자이너로 이동하여 사진 표시 단추를 두 번 클릭합니다. IDE는 커서를 showButton_Click() 또는 ShowButton_Click() 메서드 내에서 이동합니다.
두 개의 중괄호({ }) 사이 또는 Private Sub...와 End Sub 사이에 있는 빈 줄에 i를 입력합니다. IntelliSense 창이 열립니다.
IntelliSense 창에 단어 if가 강조 표시됩니다. Tab 키를 선택하여 if를 삽입합니다.
true를 선택한 다음, C#의 경우 op를 입력하여 덮어쓰고 Visual Basic의 경우 Op를 입력합니다.

IntelliSense가 openFileDialog1을 표시합니다.
openFileDialog1을 추가하려면 Tab 키를 선택합니다.
openFileDialog1 바로 뒤에 마침표(.) 또는 점을 입력합니다. IntelliSense는 모든 OpenFileDialog 구성 요소의 속성 및 메서드를 제공합니다. 입력 ShowDialog 을 시작하고 Tab을 선택합니다. 이 메서드는 ShowDialog() 파일 열기 대화 상자를 표시합니다.
에서 "g" 바로 뒤의 괄호 () 를 ShowDialog추가합니다. 코드는 openFileDialog1.ShowDialog()여야 합니다.
C#의 경우 공백을 추가하고 두 개의 등호(==)를 추가합니다. Visual Basic의 경우 공백을 추가하고 하나의 등호(=)를 사용합니다.
공백을 하나 더 추가합니다. IntelliSense를 사용하여 DialogResult를 입력합니다.
점을 입력하여 IntelliSense 창에서 DialogResult 값을 엽니다. 문자 O를 입력하고 Tab 키를 선택하여 OK를 삽입합니다.

참고

그러면 첫 번째 코드 줄이 완성됩니다. C#의 경우 출력은 다음과 유사합니다.

if (openFileDialog1.ShowDialog() == DialogResult.OK)

Visual Basic의 경우 다음과 같이 됩니다.

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

다음 코드 줄을 추가합니다.

pictureBox1.Load(openFileDialog1.FileName);

PictureBox1.Load(OpenFileDialog1.FileName)

복사해 붙여넣거나 IntelliSense를 사용하여 코드 줄을 추가할 수 있습니다. 최종 showButton_Click() 메서드는 다음 코드와 유사합니다.

private void showButton_Click(object sender, EventArgs e)
{
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Load(openFileDialog1.FileName);  
    }
}

Private Sub showButton_Click() Handles showButton.Click
    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
        PictureBox1.Load(OpenFileDialog1.FileName)
    End If

End Sub

다음 주석을 코드에 추가합니다.

private void showButton_Click(object sender, EventArgs e)
{
    // Show the Open File dialog. If the user clicks OK, load the
    // picture that the user chose.
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Load(openFileDialog1.FileName);
    }
}

Private Sub showButton_Click() Handles showButton.Click

    ' Show the Open File dialog. If the user clicks OK, load the
    ' picture that the user chose.
    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
        PictureBox1.Load(OpenFileDialog1.FileName)
    End If

End Sub

항상 코드를 주석으로 처리하는 것이 가장 좋습니다. 코드 주석을 사용하면 나중에 코드를 더 쉽게 이해하고 유지할 수 있습니다.

다른 컨트롤에 코드 작성

이제 애플리케이션을 실행하는 경우 사진 표시를 선택할 수 있습니다. 사진 뷰어는 표시할 사진을 선택할 수 있는 파일 열기 대화 상자를 엽니다.

이 섹션에서는 다른 이벤트 처리기에 코드를 추가합니다.

Windows Forms 디자이너에서 사진 지우기 단추를 두 번 클릭합니다. 중괄호 안에 코드를 추가합니다.

private void clearButton_Click(object sender, EventArgs e)
{
    // Clear the picture.
    pictureBox1.Image = null;
}

Private Sub clearButton_Click() Handles clearButton.Click
    ' Clear the picture.
    PictureBox1.Image = Nothing
End Sub

배경색 설정 단추를 두 번 클릭하고 중괄호 안에 코드를 추가합니다.

private void backgroundButton_Click(object sender, EventArgs e)
{
    // Show the color dialog box. If the user clicks OK, change the
    // PictureBox control's background to the color the user chose.
    if (colorDialog1.ShowDialog() == DialogResult.OK)
        pictureBox1.BackColor = colorDialog1.Color;
}

Private Sub backgroundButton_Click() Handles backgroundButton.Click
    ' Show the color dialog box. If the user clicks OK, change the
    ' PictureBox control's background to the color the user chose.
    If ColorDialog1.ShowDialog() = DialogResult.OK Then
        PictureBox1.BackColor = ColorDialog1.Color
    End If
End Sub

닫기 단추를 두 번 클릭하고 중괄호 안에 코드를 추가합니다.

private void closeButton_Click(object sender, EventArgs e)
{
    // Close the form.
    this.Close();
}

Private Sub closeButton_Click() Handles closeButton.Click
    ' Close the form.
    Close()
End Sub

늘이기 확인란을 두 번 클릭하고 중괄호 안에 코드를 추가합니다.

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
    // If the user selects the Stretch check box, 
    // change the PictureBox's
    // SizeMode property to "Stretch". If the user clears 
    // the check box, change it to "Normal".
    if (checkBox1.Checked)
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
    else
        pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
}

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
    ' If the user selects the Stretch check box, change 
    ' the PictureBox's SizeMode property to "Stretch". If the user 
    ' clears the check box, change it to "Normal".
    If CheckBox1.Checked Then
        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
    Else
        PictureBox1.SizeMode = PictureBoxSizeMode.Normal
    End If
End Sub

애플리케이션 실행

애플리케이션은 작성 중 언제든지 실행할 수 있습니다. 이전 섹션에서 코드를 추가한 후에는 사진 뷰어가 완료됩니다. 이전 자습서에서처럼 다음 방법 중 하나를 사용하여 애플리케이션을 실행합니다.

F5 키를 선택합니다.
메뉴 모음에서 디버그>디버깅 시작을 선택합니다.
도구 모음에서 시작 단추를 선택합니다.

제목이 사진 뷰어인 창이 표시됩니다. 모든 컨트롤을 테스트합니다.

배경색 설정 단추를 선택합니다. 색 대화 상자가 열립니다.
배경색을 설정할 색을 선택합니다.
사진 표시를 선택하여 사진을 표시합니다.
늘이기를 선택하고 선택 취소합니다.
사진 지우기 단추를 선택하여 표시된 사진을 지웁니다.
앱을 끝내려면 닫기를 선택합니다.

다음 단계

축하합니다! 자습서 시리즈를 완료했습니다. Visual Studio IDE에서 다음과 같은 프로그래밍 및 디자인 작업을 수행했습니다.

Windows Forms를 사용하는 Visual Studio 프로젝트 만들기
그림 보기 애플리케이션에 대한 레이아웃 추가
단추 및 확인란 추가
대화 상자 추가
컨트롤에 이벤트 처리기 추가
이벤트를 처리하는 C# 또는 Visual Basic 코드 작성

계속해서 다른 자습서를 통해 제한 시간이 있는 수학 퀴즈를 만드는 방법을 학습하세요.

자습서 2: 시간이 지정된 수학 퀴즈 만들기