이 글은 Marco Cantu가 작성한 엠바카데로 블로그 글을 번역(및 일부의역)한 것입니다


 

 

지금까지 VCL에서는 애플리케이션 전체에 하나의 스타일만 적용할 수 있었습니다(또는 아예 적용하지 않거나). 10.4 부터는 VCL 애플리케이션에 동시에 여러 VCL 스타일을 적용할 수 있습니다. 이는 애플리케이션의 컨트롤 마다 또는 다른 폼의 컨트롤 마다 서로 다른 스타일을 적용할 수 있다는 의미입니다.(윈도우 기본 테마와 스타일을 동시에 사용할 수도 있습니다.)

이 기능은 TControl 클래스의 새로운 속성인 StyleName에서 컨트롤할 수 있습니다. 애플리케이션 속성을 보면 활성화된 스타일들이 있는데, 이 중 원하는 스타일의 이름을 선택하면 바로 적용할 수 있습니다. 이 값을 적용하지 않으면, 부모 컨트롤(컨테이너 또는 폼)의 스타일이 자동 적용됩니다.

 

빠른 데모

컨트롤 개별 스타일(Per-Control Style)은 이름에서 알 수 있듯이 하나의 애플리케이션 폼 컨트롤마다 다른 스타일을 적용할 수 있는 기능입니다.
먼저, 애플리케이션에 여러개의 스타일을 추가합니다. 그리고 Default style 항목을 'Windows'외의 다른 스타일로 설정합니다.('Windows' 이외의 스타일을 적용해야만 컨트롤 별 스타일이 적용됩니다.)
참고로, 10.4에서는 새로운 High-DPI 스타일을 사용할 수 있습니다. 자세한 내용은 다른 글에서 소개하겠습니다.

폼안의 컨트롤 StyleName을 각각 다른 스타일 이름으로 지정할 수 있습니다.
다음은 DFM 파일 예시입니다.(연관된 주요 속성들만 표시합니다.)

object Form2: TForm2
  StyleName = 'Sky'
  object Panel1: TPanel
    StyleName = 'Light'
    object Button1: TButton...
    object Button3: TButton
      StyleName = 'Sky'
    end
  end
  object Button2: TButton
    StyleName = 'Windows'
  end
  object Button4: TButton
    StyleName = 'Luna'
  end
  object Button5: TButton
    StyleName = 'Aqua Graphite'
  end
end

Button1은 스타일을 지정하지 않았기 때문에, 부모 패널의 스타일이 그대로 적용됩니다. Button2와 같이 ‘Windows’로 설정 시 폼에서 지정한 스타일을 적용하지 않습니다.(‘Windows’는 특별한 목적을 갖는 값입니다. 자세한 내용은 아래에서 다시 살펴보겠습니다.)
이 코드는 5개의 버튼이 각각 5가지 스타일이 적용되도록 설정한 것으로, 아래 그림과 같이 표현됩니다.

 

다양한 설정 방법들

VCL 애플리케이션의 다양한 폼과 컨트롤 스타일 조정을 위한 다양한 방법들이 있습니다.

1. 프로젝트 옵션에서 스타일 목록을 조정합니다.(또는 런타임에서 스타일을 로드할 수도 있습니다.)

2. TControl.StyleName 속성을 이용 각 컨트롤과 폼에 특정 스타일을 지정합니다. StyleName 값은 프로젝트 옵션에서 선택한 항목 중 하나여야 합니다. 부모 컨트롤에 설정된 StyleName 값을 그대로 사용할 수도 있습니다. 폼의 StyleName 속성을 설정해 폼의 모든 컨트롤에 특정 스타일을 지정할 수 있습니다. 다음과 같이 사용 가능합니다.

  • TControl.StyleName의 값을 공백으로 설정 시: 기본 스타일(애플리케이션의 스타일)이 적용됨
  • StyleName에 ‘Windows’ 설정 시: 컨트롤과 폼에 설정한 StyleName이 비활성화됨(스타일이 적용되지 않음)
  • TControl.StyleName에 유효하지 않은(선택되지 않은) 스타일 설정 시: 기본 스타일이 적용됨

3. 일반 대화상자(Dialog)도 TStyleManager.DialogsStyleName 속성을 이용해 특정 스타일을 설정할 수 있습니다. 해당 속성의 기본 값은 공백이며, 애플리케이션의 기본 스타일이 적용됩니다.

4. 애플리케이션 스타일을 ‘Windows’로 설정할 수 있습니다. 그러면 컨트롤들과 폼의 속성이 ‘Windows’로 설정되며 스타일이 비활성화 됩니다. 만약, ‘Windows’ 스타일을 유지하면서 컨트롤에 스타일을 활성화하려면 TStyleManager.UseSystemStyleAsDefault 속성을 True로 설정하면 됩니다. 이 설정을 지정하면 StyleName 속성을 지정한 항목들만 스타일이 적용됩니다. 다만 애플리케이션의 스타일이 활성화(Default style을 ‘Windows’ 외 다른값으로 지정) 되어있어야 합니다.

위 4번항목을 활용하면, VCL 스타일을 지원하지 않는 써드파티 컴포넌트를 사용할 수도 있습니다. 이전에는 처리하기 상당히 복잡했습니다. 하지만 새로운 아키텍처에서는 스타일 적용이나 또는 적용하지 않는 컨트롤들을 함께 사용할 수 있으므로 VCL 스타일을 포기하지 않으면서도 써드파티 컴포넌트 활용이 가능합니다.

컨트롤 개별 VCL 스타일 설정은 써드파티 컨트롤이 자동으로 적용되지는 않습니다. 이 기능을 지원하려면 컨트롤 측에서 Vcl.Theme.StyleServices 메소드를 TControl 파라미터를 지정해 호출해야 합니다. 예를들어 StyleServices(Self).DrawElement 같은 코드입니다.

결론

컨트롤 개별 VCL 스타일(Per-Control VCL Style)을 도입하면, 스타일을 더욱 유연하게 사용할 수 있습니다. 일부 컨트롤만 스타일을 적용하고, 그 이외의 컨트롤들은 기본 테마를 유지할 수도 있습니다. 스타일을 설정한 애플리케이션 내에서 VCL 스타일을 지원하지 않는 사용자정의 컨트롤 또는 써드파티 컨트롤을 적용하거나
UI 스타일 활용도 가능하고, 동적으로도 스타일을 지정하는 것도 가능합니다.

컨트롤 개별 스타일 적용 외에도 많은 VCL 기능이 추가되었습니다. 10.4 새로운 기능들 중에서도 VCL 스타일은 미리 소개할만한 가치가 있는 새로운 기능입니다.

10.4 무료 평가판으로 지금 경험해보세요!   [전체보기] 10.4 새기능들!

 

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 22580
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 21022
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 23071
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 28870
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 30050
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 25393
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 46347
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 182299
1223 2020년 5월 GM 업데이트 - 여러분의 비즈니스에 길을 열어주세요! 관리자 2020.05.26 349
1222 델파이 안드로이드 개발을 위해 OpenJDK 채택 file 김원경 2020.05.25 972
1221 엠바카데로 오픈 소스 프로젝트 관리자 2020.05.25 810
1220 [10.4 시드니 신기능] 겟잇 패키지 매니저(GetIt Package Manager) 개선 험프리 2020.05.21 665
» [10.4 시드니 신기능] 컨트롤 개별 VCL 스타일 적용(Per-Control Style) 적용 험프리 2020.05.19 992
1218 [10.4 시드니 신기능] 새로운 VCL TEdgeBrowser 컴포넌트 험프리 2020.05.18 23197
1217 [10.4] 커스텀 매니지드 레코드(Custom Managed Records) 험프리 2020.05.14 1172
1216 [고객 사례- 솔루션, 델파이] Beyond Compare - 데이터, 시스템 비교/병합/관리 프로그램 관리자 2020.05.14 886
1215 델파이, 25년의 혁신 - 버전 1부터 10.3까지 버전별 핵심 기능 [2] 관리자 2020.05.12 3251
1214 [고객 사례- 솔루션, 델파이] AlignMix - 시각화된 세일즈 관리 도구 관리자 2020.05.12 440
1213 [10.4 시드니 신기능] 다시 태어난 '코드 인사이트' [2] file 험프리 2020.05.08 1807
1212 [발표자료] 20200429 델파이 Push 메시지 전송 시스템 구현 방법 with 구글 Firebase [3] file 관리자 2020.05.04 1123
1211 헬스케어 분야에서의 델파이 - 코로나에 맞서며 file 김원경 2020.04.29 684
1210 [고객 사례- 의료, 델파이] COVID-19 격리 대상자 상태 관리 앱 관리자 2020.04.28 712
1209 이 달의 기술자료 - 2020년 05월 file 험프리 2020.04.24 388
1208 [사례 소개] 데브기어 마이그레이션 유상 컨설팅 사례 험프리 2020.04.22 630
1207 인터베이스와 FireDac에서 배열필드 사용하기 file 김원경 2020.04.16 436
1206 인터베이스, FireDAC 및 TEMSDataSetResource를 사용하여 RAD 서버에서 자동 증가 필드를 생성하는 방법 file 김원경 2020.04.16 460
1205 델파이용 벡터 컨테이너 file 김원경 2020.04.14 813
1204 [프로그래밍 애피타이저] 개발이 처음이거나 비 전공자 분들을 위한 가장 첫 번째 STEP! 관리자 2020.04.13 2633