픽처박스와 이미지리스트 활용하기 - VB.Net

픽처박스(PictureBox)는 이미지 파일을 출력해주는 컨트롤입니다. 지원하는 이미지 파일 형식은 *.gif, *.jpg, *.jpeg, *.bmp, *.wmf, *.png등 인터넷에서 많이 사용하는 이미지 형식을 포함하여 인기있는 대부분의 이미지 파일 형식을 지원합니다. 투명 배경을 지원하는 *.gif나 *.png등의 파일 형식을 사용하면 투명 배경을 가지고 이미지가 자연스럽게 겹치게 보일 수 있도록 할 수도 있습니다.

폼 디자인 시점에 이미지를 등록하려면 픽처박스 컨트롤을 추가한 다음 우측 상단에 있는 작은 화살표를 클릭해서 "이미지 선택..."을 선택하거나 .Image 속성 우측의 [...]버튼을 클릭하여 아래와 같은 창에서 표시할 이미지를 등록하면 됩니다.

프로젝트 리소스에 이미지를 등록해 놓으면 프로그램에서 간편하게 참조해서 사용할 수 있습니다. 예를 들어 특정 상태에 따라 서로 다른 이미지를 표시하고 싶다면 프로젝트 리소스에 등록해 놓고 간편하게 참조할 수 있습니다. 단, 비주얼스튜디오 개발자 버전(Express edition)에서는 리소스 뷰어를 지원하지 않으므로 이 방법을 사용하기 에는 제한이 있습니다. "로컬 리소스" 방식으로 이미지를 선택하면 해당 이미지를 프로젝트 영역으로 불러와서 작업 이후에는 원본 이미지에 아무런 영향을 주지않고 작업 할 수 있습니다. 실제로도 폼의 Designer.vb 파일을 보면 "Me.PictureBox4.Image = CType(resources.GetObject("PictureBox4.Image"), System.Drawing.Image)" 로컬 리소스가 내부 자원화 된것을 확인할 수 있습니다. 

여러 이미지를 동적으로 바꾸거나 준비 상태에서 필요에 따라 출력해야 하는 경우에는 "PictureBox1.Image = Image.FromFile(이미지 파일 경로)"와 같이 파일 시스템에 있는 이미지 파일을 필요한 시점마다 직접 로드해서 사용하는 방법과 함께 이미지리스트 컨트롤(이미지 컬렉션)을 사용하는 방법이 있습니다. 이미지리스트(ImageList) 컨트롤을 사용하면 프로젝트 리소스 파일에 등록하지 않아도 여러 이미지를 프로젝트 내부에 등록해두고 간편하게 사용할 수 있습니다. 이미지리스트 컨트롤은 화면 직접 보이지 않고 타이머 처럼 뒤에서 존재하는 컨트롤로 디자인 화면 하단에 컨트롤이 위치합니다.

이미지리스트 컨트롤 우측 상단의 화살표 버튼을 클릭해서 등록해 놓을 이미지들의 공통 폭과 해상도를 설정하고 "이미지 선택" 링크로 아래와 같은 이미지 컬렉션 편집기를 엽니다.

[추가] 버튼을 통해서 픽처박스의 로컬 이미지를 추가한 것처럼 등록할 이미지를 선택합니다. 이미지를 선택하면 픽처박스 처럼 이미지 정보를 프로젝트 내부로 가져오기 떄문에 원본에 영향을 주지 않습니다. 이미지 컬렉션 편집기의 각 이미지 앞에 있는 숫자가 이미지리스트 내에서 각 이미지를 참조할 때 사용할 인덱스로 이 인덱스를 통해서 개별 이미지를 간편하게 사용할 수 있습니다. 아래의 코드는 픽처 박스를 클릭하면 이미지리스트의 특정 이미지를 인덱스로 참조해서 픽처박스의 이미지를 교체하는 예제입니다. 

    Private Sub PictureBox1_Click(sender As System.Object, e As System.EventArgs) _
                     Handles PictureBox1.Click
        PictureBox1.Image = ImageList1.Images(2)
    End Sub

위의 그림은 동일한 이미지를 동일한 픽처박스에 등록했지만 .SizeMode 속성 값에 따라 서로 다른 형태로 보여지는 것을 보여주고 있습니다. 좌측 부터 차례대로 "Normal"(크기 조정 없음), "Stretchlmage"(픽처박스 크기에 맞도록 이미지 크기를 조정), "AutoSize"(이미지 크기에 맞도록 픽처박스 크기를 조정), "Centerlmage"(크기조정없이 이미지를 픽처박스 중앙에 배치), "Zoom"(픽처박스 크기에 맞도록 이미지의 가로/세로 비율을 유지하며 크기 조정) 옵션입니다. 크기 조정과 함께 .BorderStyle 속성 값이 기본적으로는 "None"이지만 경계선의 스타일을 지정할 수 있습니다.

픽처박스에 대한 이벤트는 위의 코드 예제 처럼 클릭이벤트로 사용자의 반응에 대응할 수도 있고 이미지의 어느 부분을 클릭했는지는 아래의 코드 예제 처럼 MouseClick 이벤트를 활용할 수 있습니다.

    Private Sub PictureBox2_MouseClick(sender As System.Object, e As System.Windows.Forms.MouseEventArgs) _
                     Handles PictureBox2.MouseClick
        Label1.Text = "Location : " & e.X & " - " & e.Y
    End Sub