이 글은 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 15548
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 14000
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16534
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22114
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23368
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18963
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39358
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174764
30 NEW! 델파이 오브젝트 파스칼 스타일 가이드 관리자 2021.05.04 513
29 [개발팁] 오래된 레거시 델파이, C++ 애플리케이션을 최신 스타일의 초고속 앱으로 마이그레이션하기 관리자 2020.10.15 337
» [10.4 시드니 신기능] 컨트롤 개별 VCL 스타일 적용(Per-Control Style) 적용 험프리 2020.05.19 931
27 새로운 FMX 테마 - 우분투(Ubuntu) Clear Fantasy 스타일 관리자 2020.02.19 430
26 DLL 폼에서 VCL 폼 스타일 적용하기 file 김원경 2019.10.28 5852
25 리눅스용 앱에 다양한 스타일 적용하기 (FMX 스타일들을 리눅스 앱에도!) 관리자 2019.09.17 467
24 밝은 톤의 사용자 친화적인 디자인을 찾고있다면 - 푸에르토 리코(Puerto Rico) FMX 스타일 관리자 2019.09.17 527
23 과감하면서도 볼드한 효과를 주고 싶다면 - Ruby Graphite FMX 스타일 관리자 2019.09.17 476
22 그라데이션이 적용된 멋진 스타일을 적용하고 싶다면 - 스텔라(Stellar) FMX 스타일 관리자 2019.09.17 586
21 리눅스 앱에 파이어몽키에서 적용했던 스타일을 똑같이 적용하세요 - Wedgewood Light 스타일 관리자 2019.09.09 376
20 리눅스 앱에 '깔끔하면서도 샤프한' 스타일을 적용하고 싶다면 - Air 스타일 관리자 2019.09.09 383
19 '눈에 확 띄는' 리눅스 앱을 만들고 싶다면 - Amakrits 스타일 관리자 2019.09.09 350
18 리눅스 앱에 '윈도우 10 컬러 스타일'을 적용하고 싶다면 - Aqua Graphite 스타일 관리자 2019.09.09 438
17 리눅스 앱에 '프로페셔널' 해보이는 스타일을 적용하고 싶다면 - Blend FMX 스타일 관리자 2019.09.09 388
16 [10.3 리오][업데이트1] VCL, FMX용 새로운 스타일 15종 지원 관리자 2019.02.22 1355
15 [베를린 U2] 새로운 윈도우 10 스타일 적용하기 (1분 동영상) 험프리 2016.11.15 445
14 [베를린] 스타일 디자이너에 미리보기, 클립보드 기능등이 강화되어 더욱 사용하기 편리해 졌습니다. file 험프리 2016.04.26 853
13 [시애틀] 스타일북 컴포넌트에 여러개의 플랫폼 스타일을 담을 수 있습니다. Humphery 2015.09.04 563
12 [시애틀] VCL 스타일이 공용 대화 상자와 웹브라우저까지 적용됩니다. Humphery 2015.09.02 478
11 [시애틀] VCL 스타일을 적용해 1분만에 윈도우 10 최신신 룩앤필을 적용할 수 있습니다. 험프리 2015.09.02 1235