[C# 윈폼] C# 윈폼 이미지 불러와서 보여주기(Image Viewer 만들기)

안녕하세요.

 

오늘은 여태까지 제가 블로그에서 이미지와 관련된 내용들을 꽤 다뤘었는데요. 이 내용들을 종합적으로 사용하여 간단한 Image Viewer 프로그램을 만들어 보려고 합니다.

 

프로그램 시나리오는 다음과 같습니다.

시나리오

1.   FolderBrowserDialog를 이용하여 이미지가 저장되어 있는 폴더를 가져온다.

2.   폴더에 저장되어 있는 이미지를 왼쪽에는 조그마하게 썸네일 형식으로 보여주고, 오른쪽에는 큰 이미지로 보여준다.

 

시나리오는 상대적으로 간단합니다.

 

그럼 이제 위의 내용을 토대로 윈폼으로 Image Viewer 프로그램을 만들어 보도록 하겠습니다.

 

먼저 윈폼 프로젝트를 생성해 주시기 바랍니다.

 

그리고 다음과 같이 컨트롤들을 배치해 주시기 바랍니다.

윈폼 프로젝트 생성 및 컨트롤 배치

위와 같이 TableLayoutPanel, Label, Textbox, Button 컨트롤들을 알맞게 배치해 주시기 바랍니다.

 

컨트롤 하나하나 배치하는 방법까지 설명 드리기에는 이야기가 길어질 것 같아서..그건 패스하겠습니다!

 

배치는 크게 어렵지 않기 때문에 쉽게 따라 하실 거라 생각합니다.

 

이제 여기까지 따라하셨다면, 내부 소스코드를 작성해 보도록 하겠습니다.

예제 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;   namespace ImageViewer {     public partial class Form1 : Form     {         List<string> imgList = null;           public Form1()         {             InitializeComponent();               this.uiBtn_Load.Click += uiBtn_Load_Click;         }           public void uiBtn_Load_Click(object sender, EventArgs e)         {             FolderBrowserDialog fbd = new FolderBrowserDialog();             if (fbd.ShowDialog() == DialogResult.OK)             {                 uiTxt_Folder.Text = fbd.SelectedPath;                   this.uiFp_Image.Controls.Clear();                   string[] files = Directory.GetFiles(fbd.SelectedPath);                 imgList = files.Where(x => x.IndexOf(".jpg", StringComparison.OrdinalIgnoreCase) >= 0                                                || x.IndexOf(".png", StringComparison.OrdinalIgnoreCase) >= 0)                                .Select(x => x).ToList();                   for (int i = 0; i < imgList.Count; i++)                 {                     Image img = Image.FromFile(imgList[i]);                       Panel pPanel = new Panel();                     pPanel.BackColor = Color.Black;                     pPanel.Size = new Size(150, 150);                     pPanel.Padding = new System.Windows.Forms.Padding(4);                       PictureBox pBox = new PictureBox();                     pBox.BackColor = Color.DimGray;                     pBox.Dock = DockStyle.Fill;                     pBox.SizeMode = PictureBoxSizeMode.Zoom;                     pBox.Image = img.GetThumbnailImage(150, 150, null, IntPtr.Zero);                     pBox.Click += PBox_Click;                     pBox.Tag = i.ToString();                     pPanel.Controls.Add(pBox);                       this.uiFp_Image.Controls.Add(pPanel);                 }                   if (imgList.Count > 0)                 {                     Panel pnl = this.uiFp_Image.Controls[0] as Panel;                     PictureBox pb = pnl.Controls[0] as PictureBox;                     uiTxt_ImgFile.Text = this.imgList[0];                     PBox_Click(pb, null);                 }             }         }           public void PBox_Click(object sender, EventArgs e)         {             for (int i = 0; i < this.uiFp_Image.Controls.Count; i++)             {                 if (this.uiFp_Image.Controls[i] is Panel)                 {                     Panel pnl = this.uiFp_Image.Controls[i] as Panel;                     pnl.BackColor = Color.Black;                 }             }               PictureBox pb = sender as PictureBox;             pb.Parent.BackColor = Color.Red;               int idx = Convert.ToInt32(pb.Tag.ToString());               Image img = Image.FromFile(imgList[idx]);             uiPb_Image.Image = img;             uiPb_Image.SizeMode = PictureBoxSizeMode.StretchImage;             uiTxt_ImgFile.Text = this.imgList[idx];         }     } }   Colored by Color Scripter

cs

실행 결과

위와 같이 이미지를 제대로 불러와서 왼쪽에는 썸네일로 조그만하게 보여주고, 오른쪽에는 현재 선택되어 있는 이미지를 크게 보여주고 있는 것을 확인하실 수 있습니다.

 

감사합니다.^^

[압축 프로그램]

Image_Program.zip