[Windows Forms] 사진 뷰어 앱 만들어보기

 

오늘은 Windows Forms를 통해 사진 뷰어 앱을 만들어 보았다.

 

참고 문서 및 사이트는 

 

https://learn.microsoft.com/ko-kr/visualstudio/get-started/csharp/tutorial-windows-forms-picture-viewer-layout?view=vs-2022

사진 뷰어 앱용 WinForms 프로젝트 만들기 - Visual Studio (Windows)

 

를 참고 했다.

 

+++++

 

 

Windows Forms 앱 (.NET Framework) 로 프로젝트 템플릿 설정

 

 

프로젝트는 Picture Viwer로 생성했다.

 

 

초기 화면

 

 

Form을 누르고 속성창에서 Dock 속성을

 

가운데 부분(파란 사각형) 을 눌러

 

Fill로 변경

 

 

Form의 속성 - Text를 Picture Viewer로 변경

 

 

Form의 타이틀이 Picture Viewer로 변경 된 것을 확인

 

 

Form을 누르면 위와 같이 오른쪽 상단에  ▶ 박스를 클릭

 

열린 목록에서 '행 및 열 편집' 클릭

 

 

열에서 

 

Column1은 15%, Column2는 85% 로 설정

 

 

행에서 

 

Row1은 90%, Row2는 10%로 설정

 

완성된 레이아웃 확인

 

 

도구 상자의 PictureBox 두번 클릭해서 Form에 추가

 

 

PictureBox가 추가된 모습

 

 

.PictureBox를 클릭한 상태에서 ▶버튼 클릭

 

 

부모 컨테이너에서 도킹 클릭

 

 

부모 컨테이너로 도킹이 된 모습

 

 

PictureBox의 속성에서 ColumnSpan을 2로 설정

 

 

PictureBox가 두 열을 모두 채우게 된다.

 

 

CheckBox를 더블클릭해서 Form에 생성

 

 

CheckBox의 속성 - Text를 Strech로 수정

 

 

TableLayoutPanel을 선택한 상태에서 

 

도구상자 - FlowLayoutPaner를 더블클릭으로 생성

 

 

FlowLayoutPanel의 속성 - Dock을 Fill로 설정

 

 

FlowLayoutPanel를 선택한 상태에서 버튼 4개 생성

 

각각의 Text 속성을 수정

 

 

텍스트의 길이가 버튼의 크기보다 길어 보이지 않는다면

 

AutoSize 항목을 True로 설정

 

 

각각의 버튼들의 Name을 closeBtn,backgroundBtn,clearBtn,showBtn으로 수정

 

 

도구상자 - 대화상자 - OpenFileDialog와 colorDialog 생성

 

 

 

openFileDialog1의 속성 - Filter에

 

JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*

 

입력

 

 

Title 속성을 'Select a picture file'로 설정

 

 

 

checkBox 와 Button들을 더블 클릭해서 각각의 메서드 생성

 

 

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 Picture_Viwer
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void closeBtn_Click(object sender, EventArgs e)
        {
            this.Close();
        }

        private void backgroundBtn_Click(object sender, EventArgs e)
        {
            if (colorDialog1.ShowDialog() == DialogResult.OK)
                pictureBox1.BackColor = colorDialog1.Color;
        }

        private void clearBtn_Click(object sender, EventArgs e)
        {
            pictureBox1.Image = null;
        }

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

        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (checkBox1.Checked)
                pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
            else
                pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
        }
    }
}

 

cs 파일에 다음과 같이 코드 작성

 

 

실행 이미지