리스트뷰에 이미지 표시하기

리스트뷰(ListView) 컨트롤을 사용하다 보면, 텍스트만 표시되서 참 ... 이건 모양새가 이쁘지도 않고 너무 단조롭다고 느껴질 때가 있습니다. 이러한 단점을 해소하기 위해서 리스트뷰 컨트롤에는 SmallImageList, StateImageList 및 LargeImageList 속성을 지원하여 이미지리스트(ImageList) 컨트롤을 리스트뷰와 연결할 수 있도록 되어있습니다.

이 속성과 이미지리스트 컨트롤을 이용해서 특정 확장자에 대한 아이콘이라던지 폴더 아이콘 등을 가져올 수 있습니다. (물론 이 방법을 사용하려면 API가 동원되야 합니다)

API를 사용하지 않고는 이미지리스트 컨트롤 내에 추가되어 있는 이미지를 사용할 수가 있겠습니다~

(리스트뷰에 이미지리스트 컨트롤을 연결했고, API를 사용하여 프로세스 실행 파일에 해당하는 이미지를 표시했다)

단조롭게 텍스트만 표시하는 것 보다는 이미지를 표시함으로써 리스트뷰 아이템의 높이도 적당히 넉넉하게 표시하고 고급스럽게 표시할 수 있겠죠.

저는 16 x 16 크기의 딱 맞는 이미지를 선택하지 않고, 이미지리스트의 이미지 크기를 24 x 24 로 맞춰놓고 16 x 16 크기의 이미지를 가운데로 정렬하는 방식을 사용했습니다.

(16 x 16 크기의 이미지를 사용한 리스트뷰. 크기가 너무 작아서 발생하는 불편함도 있을 수 있다)

16 x 16 크기의 이미지를 사용하는데에 불편함이 없다면, 16 x 16 크기 이미지를 사용해도 괜찮지만 필자는 24 x 24 크기를 선택했다. 16 x 16 크기는 많이 좁아보이기 때문이 아닐까 싶다.

(24 x 24 크기의 이미지를 사용했지만, 이미지는 16 x 16 크기를 사용해서 이미지가 늘어난 것이 보인다)

정말 잘 선택해야 하는게 이미지의 크기를 맞춰주는 것!

이미지리스트의 이미지 크기를 24 x 24 로 해놓고 16 x 16 크기의 이미지를 사용하면 위 그림처럼 이미지가 늘어나서 나오게 됩니다.

대안책으로는 32 x 32 크기의 이미지를 선택하는 것 또한 하나의 방법이라 말할 수 있습니다.

하지만, 32 x 32 크기는 너무 커보이지 않을까 싶습니다.

거두절미하고, 이미지리스트를 리스트뷰에 연결하는 방법부터 알아보도록 하겠습니다.

(이렇게 폼을 디자인합시다. 리스트뷰 하나, 이미지리스트 하나)

그리고~ 리스트뷰의 속성 탭으로 가서 SmallImageList 속성에 imageList1 컨트롤을 연결해보자구요~~

(리스트뷰 컨트롤의 SmallImageList 속성에 imageList1 컨트롤을 연결했다)

그리고, 리스트뷰에 대한 설정은 끝이났고 이미지리스트 컨트롤의 속성으로 가보겠습니다.

이미지리스트 컨트롤에서 자세히 살펴볼 속성은 ColorDepth, Images, ImageSize 그리고 TransparentColor 입니다.

ColorDepth 속성의 경우 색 깊이를 설정하는 것이구 (8, 16, 24, 32Bit 지원. 저해상도 ----> 고해상도 순)

Images 속성은 이미지 컬렉션입니다.

ImageSize 속성은 단어 그대로 이미지 크기를 설정하는 것이고, TransparentColor 속성은 투명으로 사용할 색을 설정합니다.

(이미지리스트 컨트롤의 속성)

이미지리스트 컨트롤의 속성 중 Images 속성을 클릭하면 오른쪽에 버튼이 하나 생기는데, 그 버튼을 누르면 아래와 같은 창이 나오고 이미지리스트 컨트롤의 이미지를 관리할 수 있게 됩니다.

(이미지리스트 컨트롤의 이미지 컬렉션 편집기)

Add 버튼은 이미지를 클릭하는 것으로써, bmp, gif, png, jpg, jpeg 및 ico 파일을 추가할 수 있습니다.

일단 아무 파일이나 선택해서 추가를 해주고 OK 클릭~!!

하지만, 이미지를 추가했다고 해서 바로 표시되는 것은 아닙니다.

리스트뷰에 아이템을 추가하고, 아이템을 추가할 때 아이템의 이미지 인덱스 또는 키를 설정해줘야 아이템의 이미지로 표시가 가능합니다.

코드를 짜서 이미지를 설정해주는 방법도 있지만, 우선 리스트뷰의 아이템 컬렉션 편집기로 이미지를 설정해보도록 하겠습니다.

리스트뷰의 LargeImageList 속성을 사용하려면 View 속성의 값이 LargeIcon 또는 Tile 이여야 합니다.

SmallImageList 속성을 사용하려면 View 속성의 값이 Details, SmallIcon 또는 List 이여야 합니다.

StateImageList 속성의 경우, 아이템의 상태를 나타낼 때 사용되는 속성입니다.

리스트뷰 아이템(ListViewItem) 의 StateImageIndex 속성과 관련이 있습니다.

(리스트뷰의 아이템을 편집하는 리스트뷰 아이템 컬렉션 편집기)

아이템을 추가하고 난 후에 각 뷰별로 어떻게 표시되는지 보도록 하겠습니다.

(Details 뷰의 경우엔 컬럼을 추가하지 않으면 표시되지 않습니다. Details 뷰는 뒤에서 설명하도록 하겠습니다)

(LargeIcon 뷰의 표시 형태)

(List 뷰의 표시 상태)

(SmallIcon 뷰의 표시 상태)

(Tile 뷰의 표시 상태)

이런 식으로 리스트뷰에 이미지를 표시하는 것이 가능합니다.

그리고, 코드로 이미지를 표시하는 리스트뷰 아이템을 추가하려면 이렇게 코딩하시면 됩니다.

ListViewItem item = ListView.Items.Add("텍스트", "이미지 키");
// 또는
ListViewItem item = ListView.Items.Add("텍스트", 0 /* 이미지 인덱스 */);

이번 글에는 이미지가 많아서 몇 자 적지도 않은 것 같은데 너무 길어졌네요.

이번 글은 여기까지 쓰도록 하고 Details 뷰 및 파일 아이콘을 표시하는 것은 다음 글에 쓰도록 하겠습니다.

긴 글 읽어주셔서 감사합니다~!