이 글은 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 17841
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 16202
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 18852
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 24423
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 25802
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 21161
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 41752
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 177060
104 그라데이션이 적용된 멋진 스타일을 적용하고 싶다면 - 스텔라(Stellar) FMX 스타일 관리자 2019.09.17 602
103 현대화 작업, 바로 지금이 골든타임입니다! 관리자 2019.09.11 405
102 [따라하기] Advanced 델파이 UI 작성하기 file 험프리 2019.09.11 2174
101 [10.3 리오][업데이트 2] 델파이 리눅스 클라이언트 애플리케이션 지원 관리자 2019.09.10 418
100 [10.3 리오][업데이트 2] 멋지게 업그레이드된 VCL 품질 관리자 2019.09.10 386
99 리눅스 앱에 파이어몽키에서 적용했던 스타일을 똑같이 적용하세요 - Wedgewood Light 스타일 관리자 2019.09.09 400
98 리눅스 앱에 '깔끔하면서도 샤프한' 스타일을 적용하고 싶다면 - Air 스타일 관리자 2019.09.09 407
97 '눈에 확 띄는' 리눅스 앱을 만들고 싶다면 - Amakrits 스타일 관리자 2019.09.09 377
96 리눅스 앱에 '윈도우 10 컬러 스타일'을 적용하고 싶다면 - Aqua Graphite 스타일 관리자 2019.09.09 458
95 리눅스 앱에 '프로페셔널' 해보이는 스타일을 적용하고 싶다면 - Blend FMX 스타일 관리자 2019.09.09 409
94 [온라인 세미나 시리즈] 윈도우 10으로 현대화 할 때 확인해야 할 개발팁 file 관리자 2019.09.09 640
93 오래된 C++ 프로젝트 마이그레이션 하기 관리자 2019.09.05 286
92 윈도우10, 왜 그리고 어떻게 지원해야 할까요? 관리자 2019.09.04 432
91 [10.3 리오][업데이트 2] 새로운 RAD서버 관리 콘솔 관리자 2019.08.28 572
90 RAD스튜디오 로드맵 - 2019년 8월 관리자 2019.08.13 542
89 10.3.2 에서의 겟잇(GetIt) 설치 방법 안내 관리자 2019.08.12 467
88 이 달의 기술자료 - 2019년 08월 험프리 2019.07.26 346
87 [설치방법] 10.3 리오 업데이트2 관리자 2019.07.24 1296
86 멀티-플랫폼 앱 멋지게! 쉽게! 빠르게! 완성하기 - #2 완성형 UI에 필요한 데이터 손쉽게 연동하기 file 험프리 2019.07.11 435
85 멀티-플랫폼 앱 멋지게! 쉽게! 빠르게! 완성하기 - #.1 한번에 멋지게 개발하기 file 험프리 2019.07.09 1887