비트맵 스타일 디자이너 (Bitmap Style Designer)를 사용하여 커스텀 스타일 만들기 - 코드레이지 다시보기, 팁/트릭/예제 파일 - CodeRage

사리나 듀폰트 (Sarina DuPont) 가 작성한 Creating Custom Styles with the Bitmap Style Designer – CodeRage Replay, Tips & Tricks and Sample Files (영문 원본 보기) 를 번역했습니다. 2016년 11월의 글이지만 여전히 유효하고 도움이 됩니다.

역자주: 비트맵 스타일 디자이너 (Bitmap Style Designer)는 다음 작업을 할 수 있습니다.

VCL 스타일 파일 (.vsf) 생성, 편집, 테스트
파이어몽키 스타일 파일 (.style) 생성, 편집, 테스트
VCL 스타일 파일을 파이어몽키 스타일 파일로 변환 (방법: .vsf 파일을 열어서 .style로 다시 저장)

[팁] 스타일 만들기

해상도가 3배인 그래픽부터 시작한다. 그리고 나서 2배, 1.5배, 1배 짜리 그래픽을 만든다. (포토샵 등 선호하는 그래픽 도구 사용)
각 그래픽을 png 파일로 저장한다. 저장할 때 파일명에 해상도가 들어가야한다 (단, 1배 해상도 그래픽은 예외). 예를 들어:
- 3배: 파일명30x.png
- 2배: 파일명20x.png
- 1.5배: 파일명15x.png
- 1배: 파일명.png
스타일 파일에 있는 컨트롤 중 두세개의 스타일만 변경하려고 할 경우, 가장 좋은 방법은 별도의 png 파일을 만들어서 편집하는 것이다. 기존의 스타일 파일 안에 그래픽 요소를 추가하려고 애쓰지 말자.

[팁] 비트맵 스타일 디자이너 (Bitmap Style Designer) 를 사용하기

IDE을 열고, Tools > Bitmap Style Designer 를 클릭한다. bin 폴더에서 BitmapStyleDesigner.exe 를 바로 실행해도 된다.
비트맵 스타일 디자이너에 들어있는 템플릿 중 하나를 열어서 시작한다. File 메뉴 사용하여 템플릿 파일을 열 수 있다.
왼쪽 트리뷰에서 Images 노드를 열고 Add를 클릭하여 그래픽을 추가한다. 같은 방식으로이 모든 해상도 별로 png 파일을 각각 추가한다.
오른쪽 위에 있는 Add Object Template 메뉴에서 스타일 그래픽을 추가하려는 컨트롤을 선택한다. 지금 데모에서는 Add Switch를 선택하기로 한다.
왼쪽 트리뷰에서 Objects 노드를 펼친 후 새로 추가하려는 오브젝트 (즉 컨트롤)을 선택하고, 오른쪽에 있는 Inspector 창에서 Name을 변경한다. 스타일북에 스타일을 추가되고 나서, 그 스타일을 스타일북에서 찾을 때 표시되는 스타일 이름이다.
TSwitch에는 Frame 오프젝트와 Thumb 오브젝트가 하나씩 있다. Frame을 선택하고 오른쪽에 있는 Inspector 창에서 Bitmap 항목으로 가서 1배 해상도 그래픽 (예: mystyle.png) 파일을 선택한다. png 이미지 파일 위에서 컨트롤+마우스 클릭을 이용하여 해당 그래픽 요소의 범위를 지정한다. 같은 방식으로 BitmapPressed 항목에 적용할 그래픽 요소의 범위도 지정한다. 그리고 나서 Thumb 오브젝트에도 Frame에서 한 작업과 같은 작업을 반복한다.
(참고!)
비트맵에서 구역을 지정하는 창의 메뉴 중 확대(Zoom, 최대 800%) 기능을 사용하면 마우스를 이용하여 매우 쉽게 선택할 수 있다.
또한, 왼쪽 위 지점은 마우스 왼쪽 버튼을 이용하여 지정하고, 오른쪽 아래 지점은 마우스 오른쪽 버튼으로 지정하여 사각형으로 범위를 선택한다.
이때 선택된 영역을 나타내는 "표시선의 외곽 지점"까지도 영역에 포함된다는 점에 유의한다.
왼쪽 트리뷰에서 Objects 트리 노드를 펼쳐서 그 안에서 원하는 오브제트를 선택한 후 오른쪽 클릭을 하고 Automatically Adjust Object for All Graphic Resolutions 를 선택한다. 그러면 다른 모든 해상도에도 앞에서 한 작업과 동일한 결과가 적용되므로 일일이 수작업을 하지 않아도 된다. 스타일 요소를 변경하고 나면 언제든 이 방법을 사용하여 다른 해상도에도 반영되도록 한다.
왼쪽 트리뷰에서 Objects 트리 노드를 펼쳐서 그 안에서 원하는 오브제트를 선택한 후 오른쪽 클릭을 하고 Test Object Style 을 선택한다. 새 스타일 요소를 테스트할 수 있고 필요하면 조정 작업을 할 수도 있다.
컨트롤의 크기가 변경될 수 있도록 만들려면, Margin을 0 이외의 숫자로 지정한다. 이 데모에서는 새로 추가한 Switch 스타일에서 컨트롤 크기 변경이 되도록 하기 위해 Frame을 선택하고 Margin을 지정 (예: Bottom/Left/Right/Top = 2)한다. 그리고, Thumb에도 같은 작업을 진행한다. Margin 지정을 다 했으면, Objects 트리 노드를 펼치고 Switch 오브제트를 선택한 후 오른쪽 클릭을 하고, Automatically Adjust Object for All Graphic Resolutions 를 선택한다.
File 메뉴에서 Save를 선택하고 새 스타일 템플릿을 저장한다. 이렇게 저장해 두면 향후에 추가 변경을 할 때 보다 빠르게 불러서 작업할 수 있다.
(파이어몽키 스타일 파일로 저장하려면), File 메뉴에서 Save를 선택하고 새로 만든 이 템플릿을 .style 파일로 저장한다.

새로 만든 스타일을 애플리케이션에 추가하기 (파이어몽키 기준)

폼 위에 TStyleBook을 올려 놓는다.
TStyleBook을 더블 클릭하고 Open을 선택하여 새로 추가할 파이어몽키 스타일 파일을 찾아서 선택한다.
Apply를 클릭하고 닫는다.
폼을 선택하고, StyleBook 속성의 값으로 (앞에서 올려 놓은) StyleBook1 을 지정한다.
폼에 TSwitch를 하나 올리고, 마우스로 선택한 후 오브젝트 인스펙터에서 속성을 살펴보면, 새로 추가한 스타일 요소와 기존의 윈도우 10 스타일 중 하나를 선택할 수 있도록 된 것을 확인 할 수 있다.

데모에서 사용하는 (TSwitch 용으로 만든) 그래픽 파일을 여기에서 다운로드 받을 수 있다. (역자 주: 링크를 찾은 데로 추가/첨부 예정)