[비주얼 베이직 6.0] 제 22장 - 도구모음(ToolBar)과 그림목록(ImageList)

Menu, TabStrip과 더불어 많이 사용되는 ToolBar에 대해서 알아보겠습니다.

Internet Explorerr에서는 즐겨찾기, Firefox에서는 북마크라고 부르는(같은 뜻;;) 그것과 비슷한 역할을 합니다. 이번 강좌에서 ToolBar는, ImageList와 함께 사용할겁니다. 글자만 사용하던 옛날과 달리 파비콘이나 텍스트아이콘이 많이 사용되기 때문이죠!

Components인 구성요소(Ctrl+T)에 들어갑니다.

Microsoft Windows Common Controls 6.0 (SP6)를 선택하고, 확인 버튼을 눌러줍니다. 요소를 모아둔 탭에 몇가지 요소가 추가되었습니다.

여기서 설명할 것은 도구모음이기 때문에, 도구모음과 그림목록만 가지고 설명합니다.

도구모음과 그림목록을 더블클릭해서 폼 화면에 불러옵니다. 굳이 위치를 바꾸지 않아도 됩니다. 도구모음은 저 자리가 가장 적당한것 같고, 그림목록은 프로그램을 실행했을때 타이머와 마찬가지로 화면에 나타나지 않기 때문입니다.

Custom 부분의 ...을 클릭합니다.

속성면을 불러왔습니다. 여기서 X x Y는, pixel 단위인 그림의 width & height를 말합니다. 도구모음이 화면의 대부분을 차지할수는 없으니, 적당한 크기로 선택합니다. 비베 프로그램의 크기 단위는 기본적으로 pixel이 아니라 twip입니다. 1 pixel 당 15 twip이죠. 저는 32 x 32 크기의 256색 그림을 가져올것이기 때문에 32x32를 골랐습니다.

Images 탭으로 이동해서 Insert Picture...를 눌러줍니다.

자신이 원하는 그림을 불러옵니다.

Key에 이미지를 구분할 수 있는 이름을 각각 붙여주고, 적용 > 확인을 눌러줍니다. 저는 강좌용으로 하나만했고, 여러분은 원하는 개수만큼 넣어주시면 됩니다.

이번에는 이미지리스트와 마찬가지로 툴바의 속성면을 불러왔습니다. 폼에서 해당 요소를 오른쪽클릭하고 Properties 버튼을 눌러도 됩니다. General Tab 아래에 보면 ImageList라는게 있습니다. 여기서 아까 ImageList1이라는 이름을 가진 요소를 추가하고 이미지도 넣어줬지요? 그걸 선택합니다. 그리고 다시 아래의 Style 부분에서 1번 TbrFlat으로 바꾸고, 적용을 눌러줍니다.

다시 탭으로 올라가서 Buttons을 눌러줍니다. Insert Button이라는게 훤히 보이는군요. 저걸 눌러줍니다. Index 값이 1로 바뀌면서, 아래 TextBox들의 Enabled 상태가 True로 바뀌었습니다.

아래에 보니까 Key가 있습니다. 어디서 봤죠? 그렇습니다. 아까 ImageList1에 그림을 불러올때 입력했던 Key랑 같은 역할입니다. 없거나 이전과 달라도 되지만, 구분하기 쉽게 똑같이 써줍니다.

Style은 이전장 메뉴에서 배웠던대로 기본값인지, 체크박스인지, 그룹형태인지, 구분선인지 고릅니다.

ToolTipText는, 해당 버튼이 무슨 버튼인지 모르는 첫사용자에게 이게 무슨 버튼인지 해당 버튼에 마우스를 갖다댔을때 이 버튼은 이거다 라고 알려주는 용도입니다. 노란색 배경의 글 많이 봤죠? 적당히 써줍시다.

Image에는 반드시 아까 넣었던 그림의 이름과 같이 써줘야 합니다. 적용 > 확인을 눌러줍니다.

띠용! 잘 적용 됐습니다. 일단 다 제쳐두고, F5 눌러서 시험부터 해봅니다. 잘 눌러집니다.

저 버튼 말고 빈칸을 더블클릭 했더니 버튼의 위치를 조절하거나 구분선을 넣는 등 도구모음의 스타일을 사용자 입맛에 맞게 정의할 수 있는 창이 떠버립니다.

저는 사실 이것이 뜨는것에 대해서 회의적입니다. 다 좋은데 저거 바꿀일이 없는데 실수로 더블클릭했다가 저 창이 뜬다면 -_- 정말 귀찮겠죠? 차라리 저게 굳이 필요하다면, 제가 따로 메뉴에 집어넣을겁니다.

그렇지만 강좌용이므로 툴바 속성의 AllowCustomize를 False로 바꿔줬습니다. 그럼? 뜨지않습니다.

Private Sub ToolBar1_ButtonClick(ByVal Button As MSComctlLib.Button)
Select Case Button.Key
Case "twip"
MsgBox "ㅇㅇ"
Case Else
MsgBox "ㄴㄴ"
End Select
End Sub

그림만 있다고해서 끝난게 아닙니다. 장식용이 아니니까요 -_-! 그래서 작동시키는 소스입니다. 이전장에서 배웠던 조건문 case를 가져와 사용하면 편리합니다.

속성창에서 Align의 값을 바꿔서 툴바의 위치를 바꿀 수 있습니다. TextAlignment의 값을 바꿔서 버튼안에 있던 caption의 위치를 바꿀수도 있죠. 참고하셔서 더 편리하고 멋진(?) 프로그램 만드는데 밑바탕이 되기를 바래봅니다.

이상으로 툴바에 대해서 알아봤습니다.