26-1.고급 컨트롤

26-1-1.프로그래스 바

프로그래스 바는 작업 진행 상태를 막대 그래프 형식으로 표시한다. 작업 시간이 오래 걸린다면 가만히 있는 것보다는 어디까지 진행되고 있고 얼마나 더 기다려야 하는지 보여주는 것이 좋다. 프로그램이 아무 반응없이 멈춰 있으면 사용자는 불안해하지만 프로그래스 바를 계속 갱신하면 뭔가 작업이 진행중이라는 것을 알고 기다리거나 남은 시간동안 다른 일을 할 수 있다.

총 작업 시간의 범위는 Minimum, Maximum 프로퍼티로 지정하며 현재 작업 진행 정도는 Value 프로퍼티로 표현한다. 프로그래스 바는 Minimum ~ Maximum 범위내에서 Value의 상대적인 거리에 따라 막대 그래프의 길이를 결정한다.

디폴트 범위는 0 ~ 100으로 진행 상태를 백분율로 표시한다. 원하는 범위로 변경할 수 있는데 예를 들어 파일 629개를 복사해야 한다면 Maximum 프로퍼티를 629로 지정하고 파일 하나를 복사할 때마다 Value를 1씩 증가시킨다. Value가 증가하면 막대 그래프가 오른쪽으로 점점 더 커지고 작업이 완료되면 꽉 찬 모양이 된다.

Style은 막대 그래프의 모양을 지정한다. Blocks는 작은 사각형으로, Continuous는 꽉찬 직사각형 모양으로 그린다. 비스타 이상에서는 자체 애니메이션 기능이 추가되어 별 차이가 없다. Marquee 스타일은 작은 막대를 계속 스크롤하여 진행중임만 표시한다. MarqueeAnimationSpeed 프로퍼티가 작을수록 진행 속도가 빨라진다.

Blocks와 Continuous 스타일은 모양이 조금 다를 뿐 용도는 동일하다. 이에 비해 Marquee는 작업중이라는 것만 표시할 뿐 진행 정도를 보여주지는 않는다. 네트웍 입출력이나 압축 해제처럼 언제 끝날지 미리 알 수 없는 경우에는 범위를 결정할 수 없어 Marquee 스타일을 사용한다.

ProgressTest

using System; ~ using System.Windows.Forms;

namespace ProgressTest {

public partial class Form1 : Form {

public Form1() {

InitializeComponent();

}

private void button1_Click(object sender, EventArgs e) {

for (int i = 0; i < 100; i++) {

progressBar1.Value = i;

System.Threading.Thread.Sleep(30);

}

MessageBox.Show("작업을 완료했습니다.");

progressBar1.Value = 0;

}

}

}

버튼을 누를 때 0.03초가 걸리는 작업을 100번, 총 3초간 반복한다. 이 시간 동안 멀뚱 멀뚱 가만히 있지 않고 프로그래스 바로 진행 상태를 표시한다. 프로그래스의 Value 프로퍼티에 루프 제어 변수 i를 대입하여 몇 번째 작업까지 처리했는지 표시했다. 작업이 완료되면 메시지 박스로 완료 사실을 알리고 프로그래스 바는 0으로 리셋한다.

진행 횟수가 미리 결정되어 있다면 Value에 값을 일일이 대입하는 방식 대신 Step 프로퍼티와 PerformStep 메서드를 사용할 수도 있다. Step 프로퍼티는 한 번 호출될 때마다 증가될 값이며 PerformStep 메서드는 Step만큼 Value를 증가(Value+=Step)시킨다. Step 프로퍼티를 1로 설정하고 다음과 같이 작성해도 결과는 동일하다.

private void button1_Click(object sender, EventArgs e) {

for (int i = 0; i < 100; i++) {

progressBar1.PerformStep();

System.Threading.Thread.Sleep(10);

}

MessageBox.Show("작업을 완료했습니다.");

progressBar1.Value = 0;

}

작업 진행도의 절대치를 구하는 것이 쉽다면 Value를 직접 변경하는 것이 좋고 각 단계의 작업량을 구하는 것이 쉽다면 Step을 사용하는 것이 효율적이다. 위 예제의 경우는 어떤 방법을 쓰나 동일하다.

아래쪽 프로그래스 바는 Marquee 스타일을 보여주기만 한다. 작은 막대가 반복적으로 스크롤되며 작업이 진행중임을 표시한다. 마키 진행을 멈출 수는 없고 스타일을 바꾸거나 아니면 스피드를 0으로 지정해야 한다. 잠시 실행되는 대화상자에서 작업중임을 표시하며 작업 완료 후 대화상자가 닫히면 마키 프로그래스도 자연스럽게 사라진다.

26-1-2.업다운

업다운은 텍스트 박스에 스핀 버튼이 결합된 컨트롤이다. 스핀 버튼은 아래, 위 화살표 모양의 꼬마 스크롤바처럼 생겨 마우스로 눌러 값을 증감시킨다. 텍스트 박스는 주로 정수나 문자열값을 입력받는데 현재 입력된 값과 근접한 값으로 변경할 때 키보드로 손이 가야 하므로 불편하다. 예를 들어 현재 12가 입력되어 있는데 이 값을 13으로 바꾸고 싶다면 백 스페이스를 눌러 2를 지우고 3을 다시 입력해야 한다.

별거 아닌 것 같지만 마우스로 작업하는 중에 값 하나를 바꾸기 위해 마우스 위의 오른손을 키보드로 옮겨야 하므로 불편하다. 물론 왼손을 쓸 수도 있지만 불편하기는 마찬가지다. 업다운 컨트롤은 마우스로 값을 증감시키는 장치이다. 입력받는 값의 종류에 따라 뉴메릭 업다운과 도메인 업다운 두 가지가 있다.

NemericUpdown은 정수값을 입력받는다. Minimum, Maximum 프로퍼티로 입력받을 값의 범위를 지정하며 Value 프로퍼티가 현재값이다. Increment 프로퍼티는 버튼을 누를 때 증감할 값을 지정하는데 디폴트는 1이지만 가격이나 거리처럼 액수가 큰 값은 더 큰 단위로 증감시킬 수 있다. Hexadecimal 프로퍼티는 16진수로 표시할 것인가를 지정한다.

DomainUpdown은 문자열 목록 중에 하나를 선택한다. 종류가 아주 많다면 텍스트 박스로 직접 입력하겠지만 미리 정해진 몇 개의 문자열 중 하나를 선택해야 한다면 이 컨트롤로 목록을 미리 제공하고 마우스로 선택하는 것이 더 편리하다. 사용 용도는 콤보 박스와 거의 같지만 목록을 한꺼번에 보여주지 않고 단계적으로 순환한다는 점이 다르다. Items 프로퍼티의 컬렉션 편집기를 열어 선택 가능한 항목을 미리 입력해 둔다.

SelectedIndex 프로퍼티는 선택된 항목의 첨자인데 디폴트가 -1이므로 최초 아무것도 선택되어 있지 않다. 속성창을 통해 변경할 수 없어 코드에서 초기화해야 한다. SelectedItem 프로퍼티는 선택된 객체를 조사한다. Sorted 프로퍼티는 문자열을 알파벳순으로 정렬하여 표시하며 Wrap 프로퍼티는 목록의 끝에서 처음으로 순환한다. 두 컨트롤을 폼에 배치해 놓고 테스트해 보자.

UpDownTest

using System; ~ using System.Windows.Forms;

namespace UpDownTest {

public partial class Form1 : Form {

public Form1() {

InitializeComponent();

}

private void Form1_Load(object sender, EventArgs e) {

domainUpDown1.SelectedIndex = 0;

}

}

}

컨트롤만 배치하고 도메인 업다운의 Items에는 문자열 4개를 등록해 두었다. 실행 결과는 다음과 같다.

스핀 버튼을 사용하여 정수값을 증감시키거나 문자열 목록을 스크롤한다. ReadOnly 프로퍼티가 false이면 텍스트 박스처럼 키보드로 직접 입력할 수도 있다. 예제에서는 이 컨트롤로 입력한 값을 특별히 사용하지 않는데 사용자가 선택한 값을 읽을 때는 Value, SelectedItem 프로퍼티를 읽는다.

26-1-3.트랙바

트랙바는 볼륨이나 크기, 확대 등 정확도보다 대충의 값을 마우스로 신속하게 입력받을 때 사용한다. 볼륨 조절기에 트랙 바 컨트롤이 사용되는데 사용자는 직접 들어 보면서 들릴만하고 시끄럽지 않는 정도를 선택한다. 정확한 수치값보다는 대충 어느 정도의 적당한 값을 빠르게 선택할 때 편리하다.

일정한 범위를 가지고 마우스로 드래그하여 값을 조절한다는 면에서 스크롤 바와 유사하다. 다만 모양이 세련되고 양쪽에 버튼이 없다는 외형적인 차이만 있을 뿐이다. 실제로 트랙 바 대신 스크롤 바를 사용할 수 있지만 볼륨 조절에 스크롤 바를 사용하는 것은 디자인상 별로 어울리지 않는다. 다음은 트랙바의 프로퍼티인데 주로 외형을 지정한다.

프로퍼티	타입	설명
LargeChange	int	PgUp, PgDn 버튼으로 스크롤 할 때의 변화값이다. 디폴트는 5이다.
SmallChange	int	커서 이동키로 스크롤 할 때의 변화값이다. 디폴트는 1이다.
Orientation	Orientation	가로 또는 세로 방향을 선택한다.
TickStyle	TickStyle	눈금 표시를 어디에 출력할 것인지 지정한다. 위, 아래나 좌우에 표시하거나 양쪽에 모두 출력할 수 있으며 눈금 표시를 아예 하지 않을 수도 있다.
TickFrequency	int	눈금 표시의 주기를 지정한다. 디폴트는 1이지만 범위가 넓을 때는 더 크게 지정하는 것이 좋다.
Minimum, Maximum	int	트랙바로 조절할 수 있는 값의 범위를 지정한다. 디폴트는 0 ~ 100으로 되어 있다. SetRange 메서드로 이 두 프로퍼티를 한꺼번에 설정할 수 있다.
Value	int	트랙 바의 현재 값이다. Minimum ~ Maximum 범위에 있어야 하며 디폴트는 0이다.

사용자가 썸을 드래그하면 Scroll 이벤트가 전달되는데 이 이벤트의 핸들러에서 변경된 값을 적용한다. 이벤트의 인수로 스크롤 위치가 전달되지 않으므로 Value 프로퍼티를 읽어 조사한다. 다음 예제는 폰트의 크기를 트랙바로 조정한다.

TrackBarTest

using System; ~ using System.Windows.Forms;

namespace TrackBarTest {

public partial class Form1 : Form {

private int FontSize = 10;

public Form1() {

InitializeComponent();

}

private void trackBar1_Scroll(object sender, EventArgs e) {

FontSize = trackBar1.Value;

Invalidate();

}

private void Form1_Paint(object sender, PaintEventArgs e) {

e.Graphics.DrawString("대한민국", new Font("궁서", FontSize),

Brushes.Black, 10, 10);

}

}

}

Paint 이벤트에서 궁서 폰트로 "대한민국" 글자를 출력하는데 폰트의 크기는 FontSize 필드값을 사용했다. 최초 실행시에는 10포인트 크기로 출력되며 폼 아래쪽의 트랙바로 폰트의 크기를 조정한다. 보통 트랙바의 썸을 드래그하지만 몸통 부분을 클릭하거나 커서 이동키로 섬세하게 조정할 수 있다.

트랙바의 범위는 0 ~ 128로 지정했으며 Scroll이 발생할 때마다 Value 프로퍼티를 FontSize 필드에 대입한 후 화면을 무효화하여 다시 그린다. 틱 표시 간격은 10으로 지정하여 매 10 포인트마다 눈금이 나타난다. 눈금이 너무 조밀하게 나타나면 오히려 지저분해 보인다. 적당한 간격으로 표시하는 것이 산뜻하다.

26-1-4.DTP

DateTimePicker 컨트롤은 날짜와 시간을 입력받는다. 날짜는 년, 월, 일의 요소로 구성되어 있고 년월에 따라 날짜의 범위가 달라 보기보다 규칙이 복잡하다. 어떤 달은 30일까지고 어떤 달은 31일까지 있는데다 2월달은 윤년의 영향을 받기도 한다.

셋 다 정수이므로 텍스트 박스로 입력받을 수 있지만 복잡한 규칙을 고려해서 정확한 날짜를 입력받기는 쉽지 않다. 2021년 2월 31일 같은 틀린 날짜를 입력할 수도 있고 컨트롤이 세 개나 필요해 번거롭다. 그래서 달력 형태로 날짜를 보여주고 선택받는 전문적인 컨트롤이 제공된다.

프로퍼티	타입	설명
Format	DateTimePickerFormat	입력받을 정보의 종류와 형식을 결정한다. 디폴트는 Long이다.
MinDate, MaxDate	DateTime	입력받을 날짜의 범위이다. 디폴트는 1753년부터 9998년까지이므로 거의 모든 날짜를 선택할 수 있다.
Value	DateTime	사용자가 선택한 날짜 및 시간이다.
ShowCheckBox	bool	날짜 옆에 체크 박스를 붙여 날짜 자체의 유효성도 같이 입력받는다.
ShowUpDown	bool	달력을 표시하는 드롭다운 대신에 업다운 컨트롤을 배치하여 직접 값을 증감할 수 있도록 한다.
DropDownAlign	LeftRightAlignment	드롭다운되는 달력을 어느쪽으로 정렬할 것인가를 선택한다. Left, Right 중 하나를 선택할 수 있으며 디폴트는 Left이다.

Format 프로퍼티의 예는 다음과 같다. 날짜 표현 형식은 운영체제의 국가 설정에 따라 달라지는데 한국어 환경에서는 한글로 보기 좋게 출력된다.

Format	설명	예
Long	자세한 날짜 형식	2007년 3월 2일 금요일
Short	간략한 날짜 형식	2007-03-02
Time	시간 형식	오후 5:20:15
Custom	사용자가 지정한 형식	그때 그때 달라요

사용자가 날짜나 시간을 변경하면 ValueChanged 이벤트가 발생한다. 편집 즉시 어떤 동작을 할 필요가 있다면 이 이벤트에서 처리한다. 다음은 간단한 테스트 예제이다.

DTPTest

using System; ~ using System.Windows.Forms;

namespace DTPTest {

public partial class Form1 : Form {

public Form1() {

InitializeComponent();

}

private void dateTimePicker1_ValueChanged(object sender, EventArgs e) {

Text = dateTimePicker1.Value.ToString();

}

}

}

빈 폼에 DTP 컨트롤만 배치해 놓고 값이 바뀔 때 폼의 타이틀 바에 선택된 날짜를 출력했다. 프로퍼티는 모두 디폴트를 사용했다.

키보드로 직접 년, 월, 일을 편집할 수 있되 단, 요일은 선택된 날짜로부터 자동으로 결정되므로 편집할 수 없다. 보통은 드롭다운을 열어 달력에서 날짜를 선택한다. 달력에서 년도를 선택하면 스핀 버튼이 나타나 증감할 수 있으며 월은 좌우의 화살표 버튼으로 증감한다. 드롭다운으로 펼쳐지는 달력은 MonthCalendar라는 또 다른 컨트롤인데 단독으로도 사용할 수 있다.

26-1-5.툴팁

툴팁은 마우스가 있는 위치에 대한 짧은 도움말을 보여주는 노란색의 조그만 팝업창이다. 주로 툴바의 버튼이나 폼 위의 컨트롤에 대한 정보를 제공한다. 평소에는 보이지 않으며 커서가 일정 시간 머무를 때 잠시 나타나 도움말을 보여주므로 화면이 번잡스럽지 않다. 비주얼 스튜디오의 툴바 버튼에 커서를 올려 보면 툴팁이 나타나 버튼의 용도를 설명하며 프로그램을 처음 배울 때나 익숙하지 않을 때 적잖이 도움을 준다.

툴팁은 ToolTip 클래스로 표현하는데 그 자체만으로는 화면에 보이지 않아 폼에 배치되지 않고 하단의 트레이에 배치된다. 즉, 툴팁은 컴포넌트이지만 사용자가 직접 사용하는 컨트롤은 아니다. 툴팁 컨트롤을 배치한 후 다음 메서드로 도움말을 등록하거나 제거한다.

public void SetToolTip (Control control,string caption)

public string GetToolTip (Control control)

public void RemoveAll ()

SetToolTip 메서드는 첫 번째 인수로 전달된 컨트롤에 두 번째 인수로 전달된 도움말 문자열을 등록한다. 컨트롤별로 도움말 문자열을 등록할 수 있으므로 ToolTip 컴포넌트 하나로 여러 개의 컨트롤에 대한 도움말을 모두 등록할 수 있다.

한 컨트롤에 대해 SetToolTip 메서드를 다시 호출하면 툴팁이 수정되며 빈 문자열을 등록하면 툴팁이 제거된다. 툴팁 문자열을 여러 줄로 출력하고 싶으면 \r\n으로 개행한다. 이미 등록된 툴팁은 GetToolTip으로 조사하며 RemoveAll 메서드는 등록된 모든 툴팁을 제거한다.

프로퍼티	타입	설명
InitialDelay	int	툴팁이 나타날 때까지의 지연 시간을 밀리초 단위로 설정한다. 디폴트가 500이므로 커서가 0.5초동안 가만히 있으면 툴팁이 나타난다.
AutoPopDelay	int	툴팁이 표시되는 시간을 지정한다. 디폴트는 5000이며 5초동안 툴팁이 나타나며 5초 후에 사라진다.
ReshowDelay	int	다른 컨트롤로 커서를 옮길 때 툴팁이 나타날 시간을 지정한다.
AutomaticDelay	int	위 세 프로퍼티를 일괄적으로 변경한다. Initial은 이 프로퍼티와 동일한 값을 가지며 Reshow는 이 값의 1/5로, AutoPopDelay는 이 값의 10배로 설정된다.
IsBalloon	bool	툴팁은 직사각형 형태로 나타나는데 이 프로퍼티를 true로 지정하면 풍선 모양으로 나타난다.
UseAnimation	bool	툴팁이 나타날 때 애니메이션 효과를 사용한다.
UseFading	bool	툴팁이 사라질 때 서서히 흐려지는 효과를 사용한다.
ToolTipTitle	string	툴팁에 제목을 붙이는데 모든 툴팁의 위에 굵은 글꼴로 나타난다. 컨트롤의 그룹별로 도움말의 범주를 붙일 때 이 프로퍼티를 사용한다.
StripAmpersands	bool	이 프로퍼티가 true이면 툴팁 문자열 내의 &를 제거한다.
OwnerDraw	bool	오너 드로우 여부를 지정한다.

출력과 지속, 재출력 등 주로 시간을 제어하는 프로퍼티가 많은데 디폴트가 무난하게 설정되어 있다. 이벤트는 오너 드로우에 사용되는 Draw와 툴팁이 화면에 나타날 때 전달되는 Popup이 있는데 등록만 해 놓으면 알아서 잘 동작하므로 이벤트를 처리할 필요는 거의 없다. 다음 예제는 여러 가지 컨트롤에 툴팁을 붙여본 것이다.

ToolTipTest

using System; ~ using System.Windows.Forms;

namespace ToolTipTest {

public partial class Form1 : Form {

public Form1() {

InitializeComponent();

}

private void Form1_Load(object sender, EventArgs e) {

toolTip1.SetToolTip(button1, "이것은 버튼입니다.");

toolTip1.SetToolTip(checkBox1, "진위적인 옵션을 선택합니다.");

toolTip1.SetToolTip(textBox1, "문자열을 입력합니다.");

toolTip1.SetToolTip(radioButton1, "여러 개의 옵션 중\r\n 하나를 선택합니다.");

toolTip1.SetToolTip(label1, "단순한 문자열입니다.");

toolTip1.SetToolTip(listBox1, "목록을 표시하는 컨트롤입니다.");

}

}

}

툴팁은 디자인 타임에는 등록할 수 없고 실행 직후에 SetToolTip 메서드로 등록한다. 커서를 컨트롤 위에 올리면 등록한 툴팁이 나타난다.

폼 자체에 툴팁을 등록할 때는 this에 대해 등록한다. 툴팁을 가장 잘 활용하는 컨트롤이 툴바인데 툴바에는 자체적으로 툴팁을 출력하는 기능이 내장되어 있어 ToolTip 컨트롤을 직접 사용하지 않아도 된다.

26-1-6.이미지 리스트

많은 컨트롤이 장식과 직관적인 정보 표현을 위해 이미지를 사용한다. 버튼의 표면 위에 이미지를 그릴 수 있고 툴바나 탭 컨트롤도 툴 버튼이나 탭에 맞는 이미지를 출력하여 직관성을 높인다. 특히 리스트뷰와 트리뷰는 항목의 종류를 분명히 표시하기 위해 각 항목 앞에 이미지를 배치한다. 탐색기를 보면 얼마나 많은 이미지가 사용되는지 실감할 수 있는데 파일의 확장자별로 적당한 모양의 아이콘이 표시되어 있어 아이콘만 봐도 텍스트 파일인지 그림 파일인지 바로 알 수 있다.

컨트롤뿐만 아니라 프로그램도 내부적인 목적으로 작은 이미지를 많이 사용한다. 프로그램 외형 장식이나 애니메이션을 위해 다수의 이미지가 필요하다. 이미지를 개별 컨트롤이나 프로그램이 직접 관리하자면 번거로울 뿐만 아니라 기능의 중복도 심하다. 그래서 이미지만 전문적으로 관리하는 별도의 이미지 리스트가 제공된다.

이미지 리스트(ImageList)는 쉽게 말해 이미지의 배열이다. 이미지를 한 컴포넌트가 관리하면 순서값만으로 원하는 이미지를 지정할 수 있다. 이미지 리스트는 동일 크기와 동일 색상의 이미지를 관리한다. ImageSize 프로퍼티는 이미지 하나의 크기이며 ColorDepth는 이미지의 색상수이다. 이미지의 목록은 ImageCollection 타입의 Images 프로퍼티를 통해 관리하며 다음 메서드가 정의되어 있다.

메서드	설명
Add	이미지를 목록에 추가한다. 이때 각 이미지에 고유한 이름인 키를 지정한다.
AddStrip	이미지 여러 개를 한꺼번에 추가한다. 한 이미지에 작은 이미지를 수평으로 작성해 놓고 추가하면 이미지 폭만큼 잘라서 추가한다.
Clear	모든 이미지를 제거한다.
Remove	지정한 이미지를 제거한다.
RemoveAt	지정한 첨자의 이미지를 제거한다.
RemoveByName	지정한 키를 가진 이미지를 제거한다.
IndexOf	이미지의 첨자를 계산한다.
IndexOfKey	키로부터 이미지의 첨자를 찾는다.

이미지 리스트에 저장된 이미지를 출력할 때는 ImageList 클래스의 다음 메서드를 호출한다. 이미지 리스트의 거의 유일한 메서드이다. 화면으로 출력하는 메서드임에도 불구하고 Graphics 클래스의 멤버가 아니며 대신 Graphics 객체를 첫 번째 인수로 전달받는다.

public void Draw (Graphics g,int x,int y, [int width,int height] ,int index)

x, y는 출력할 좌표이며 width, height는 출력할 크기이되 생략하면 이미지의 고유 크기대로 출력된다. 마지막 인수 index는 출력 대상 이미지를 지정하는데 이미지를 배열 형태로 관리하므로 첨자만 밝히면 된다. 이미지 리스트는 다른 컨트롤에게 이미지를 공급하는 역할을 하며 단독으로 사용하는 경우는 드물다.

ImageCollection의 메서드를 통해 실행중에 이미지를 추가, 삭제할 수 있지만 보통은 디자인 타임에 개발툴로 미리 추가한다. 개발툴을 활용해야 하므로 다음 단계를 따라 실습을 진행해 보자.

ImageListTest

우선 이미지 파일 두 개를 준비해 놓는다. 컬렉션 편집기에 의해 추가될 것이므로 리소스로 작성할 필요는 없으며 파일 형태로 만들면 된다. 미리 만들어진 비트맵이나 아이콘을 활용할 수도 있고 전문적인 디자인 툴을 사용해도 상관없다. 여기서는 16*16 크기의 256색상으로 다음 두 개의 이미지 파일을 준비했다. 그림 솜씨가 워낙 없어서 동그라미, 삼각형 하나를 각각 그려 두었다.

폼에 이미지 리스트 컴포넌트를 배치한다. 가시적인 컨트롤이 아니므로 폼의 아래쪽 트레이에 배치되며 속성창을 통해 프로퍼티와 이미지 목록을 관리한다. 디폴트로 16*16 크기의 8비트 색상으로 생성된다. 이미지 목록을 편집하려면 Images 프로퍼티 옆의 ... 버튼을 누른다. 이미지 컬렉션 편집기가 나타난다.

이 대화상자에서 이미지를 추가하거나 삭제하고 순서를 조정한다. 추가 버튼을 눌러 미리 준비해 놓은 두 개의 비트맵 파일을 컬렉션에 추가한다.

이미지 리스트에 저장된 이미지를 읽어와 사용해 보자. 가장 간단한 사용예는 화면에 출력해 보는 것이다. 폼의 Paint 이벤트에 다음 코드를 작성한다.

private void Form1_Paint(object sender, PaintEventArgs e) {

imageList1.Draw(e.Graphics, 10, 10, 0);

imageList1.Draw(e.Graphics, 30, 10, 1);

}

화면의 (10, 10) 과 (30, 10) 좌표에 두 개의 이미지를 나란히 출력했다. 출력 대상 이미지를 지정할 때 이미지 리스트 내의 첨자 번호 0, 1만 밝히면 된다.

다음은 다른 컨트롤의 표면에 이미지를 표시해 보자. 버튼을 하나 배치하고 이 위에 이미지를 출력하기 위해 Text 프로퍼티를 지운다. 원한다면 이미지와 텍스트를 동시에 표시할 수도 있다. 버튼의 ImageList 프로퍼티에 imageList1 컴포넌트를 지정하여 소속을 밝히고 ImageIndex 프로퍼티에서 첨자를 선택한다. ImageList 프로퍼티의 콤보 박스에는 폼에 배치된 이미지 리스트 목록이 나타나고 ImageIndex 프로퍼티에는 이미지의 미리 보기까지 제공되므로 선택하기 쉽다.

실행해 보면 버튼 위에 빨간 동그라미 이미지가 나타난다. 다른 컨트롤도 마찬가지 방식으로 사용할 이미지를 지정한다.

이미지를 많이 사용하는 컨트롤은 한꺼번에 수백 개의 이미지가 필요한 경우도 있는데 이렇게 많은 이미지를 개별적인 파일로 일일이 만드는 것은 무척 성가신 일이다. 그래서 한 장의 비트맵에 여러 개의 이미지를 일괄적으로 디자인하는 방법이 제공된다. 리소스에 48*16 크기의 비트맵을 추가하고 세 개의 이미지를 한 비트맵에 그려 둔다.

한 비트맵에 그려진 이미지는 AddStrip 메서드에 의해 분리되어 이미지 리스트에 따로따로 등록된다. 생성자와 Paint 이벤트에 다음 코드를 추가한다.

public Form1() {

InitializeComponent();

Image I = Properties.Resources.Image1;

imageList1.Images.AddStrip(I);

}

private void Form1_Paint(object sender, PaintEventArgs e) {

imageList1.Draw(e.Graphics, 10, 10, 0);

imageList1.Draw(e.Graphics, 30, 10, 1);

imageList1.Draw(e.Graphics, 10, 30, 2);

imageList1.Draw(e.Graphics, 30, 30, 3);

imageList1.Draw(e.Graphics, 50, 30, 4);

}

AddStrip 메서드는 큰 이미지를 ImageSize 프로퍼티의 폭 단위로 잘라 추가한다. 48*16 크기의 비트맵은 세 개의 16*16 비트맵으로 분리된다. 16*16 크기의 이미지 10개를 한꺼번에 추가하고 싶다면 160*16 크기의 비트맵 리소스를 만든다. Paint 이벤트에서는 추가한 이미지를 출력했다.

이미지 리스트 테스트를 위해 이미지를 등록하고 출력해 보았는데 사실 이미지 리스트는 단독으로 사용되는 경우가 거의 없다. 주로 트리 뷰나 리스트 뷰 같은 컨트롤과 함께 사용된다.