이 글은 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 17801
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 16167
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 18814
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 24389
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 25774
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 21129
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 41712
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 177020
104 [XE8] 애플리케이션 외관을 멋지고 일관되게 적용할 수 있는 프리미엄 스타일(Radiant, Vapor 추가) Humphery 2015.05.19 1235
103 [업데이트][10.1 베를린] RAD Studio 10.1 베를린 서브스크립션 업데이트 1 [5] file 험프리 2016.09.19 1230
102 [DelphiCon 요약] 델파이로 웹 다루기 (Powering the Web with Delphi) file 관리자 2021.02.16 1213
101 [무료 제공툴] 파이어몽키 스텐실(FMX Stencils) [3] 관리자 2018.08.24 1196
100 [10.2 도쿄] 파이어몽키의 새로운 기능들 file 김원경 2017.03.23 1176
99 [XE8] 멀티-디바이스 미리보기: 다양한 디바이스 화면을 미리보며 최적화된 화면 개발하기 Humphery 2015.04.17 1152
98 C++과 파이어몽키로 멋진 UI 완성하기 관리자 2018.05.21 1144
97 [베를린 U2] 새로운 기능! 10.1 베를린 업데이트2 관리자 2016.11.15 1077
96 데브기어 컴포넌트 컨버터 원리와 구조 설명 험프리 2019.10.11 1010
95 [마이그레이션 사례] 워프비전(64-bit 애플리케이션) 험프리 2019.05.24 967
94 XE8 새로운 기능외의 개선사항 Humphery 2015.04.16 950
» [10.4 시드니 신기능] 컨트롤 개별 VCL 스타일 적용(Per-Control Style) 적용 험프리 2020.05.19 948
92 엔터프라이즈 커넥터로 '트위터' 연동하기 file 관리자 2017.07.17 926
91 C++, IDE(통합개발환경)으로 개발하면 어떤 점이 좋을까요? 관리자 2018.05.30 908
90 [베를린] 스타일 디자이너에 미리보기, 클립보드 기능등이 강화되어 더욱 사용하기 편리해 졌습니다. file 험프리 2016.04.26 869
89 이 달의 기술자료 - 2019년 05월 file 관리자 2019.04.26 867
88 기술자료 TOP 7 - 개발자들이 가장 많이 클릭한 기술자료는? (2019년 하반기) 관리자 2019.12.05 858
87 RAD Studio VCL/FMX 앱에 윈도우 10 스타일 적용하기 file 관리자 2015.07.30 854
86 [XE8] 네이티브 iOS 컨트롤 지원 Humphery 2015.04.13 832
85 델파이 RTL: 새로운 제네릭 컬렉션 vs 기존 클래식 컬렉션 험프리 2020.01.06 790