버전 신기능 컨트롤 개별 스타일(Per-Control Style)

[Kori]

 

마르코 칸투 (Marco Cantu)가 작성한 VCL Per-Control Styles – New in RAD Studio 10.4 를 번역했습니다.

10.4부터 VCL 라이브러리는 하나의 애플리케이션 안에서 여러 가지 스타일을 적용할 수 있다. 다시 말해서, 폼 마다 다른 스타일을 적용할 수도 있고, 폼 안에서 각 컨트롤마다 또 다른 스타일을 적용할 수도 있다. 또한 (폼, 컨트롤 등) 화면 요소가 스타일을 사용하는 것이든 '윈도우 기본’ 테마를 사용하는 것이든, 관계없이 서로 섞어서 쓸 수도 있다. (예전에는 VCL 애플리케이션에서 스타일을 오직 하나만 지정할 수 있어서, 스타일을 애플리케이션 전체에 적용하거나 아니면 아예 적용하지 못했었다). 

이것은 TControl 클래스에 StyleName 속성을 추가한 결과이다. 모든 컨트롤에는 StyleName 속성이 있다. 이 StyleName 속성에는 스타일명을 지정할 수 있는데, 지정할 수 있는 스타일이 목록으로 제공되므로 그 중 하나를 선택할 수도 있다. 이 목록에 표시되는 스타일들은 프로젝트 옵션에서 애플리케이션이 로드하도록 선택한 스타일들이다. 컨트롤의 StyleName 속성의 값이 공백이면 부모 컨트롤(컨테이너)의 스타일이 적용된다. 이것을 활용하여, 폼의 StyleName에 스타일을 지정하면, 기본적으로는 그 폼 안의 모든 컨트롤들에도 부모인 폼에 지정된 스타일이 적용된다.

간단한 데모

컨트롤 개별 스타일(Per-Control Style)이라는 제목에서 알 수 있듯이, 하나의 애플리케이션 안에서 컨트롤과 폼 별로 여러가지 스타일을 따로 적용할 수 있다. 그러려면 우선 애플리케이션에 여러가지 스타일들이 로드되어야 하고, 반드시 그중 하나가 애플리케이션의 기본 스타일로 지정되어야만 한다. 가장 먼저 메인 메뉴 > Project > Options 화면에서 Application > Appearance를 선택하고 Styles 상자에서 앱에 로드할 여러가지 스타일을 선택한다 (힌트: 10.4부터는 High DPI를 지원하는 스타일들이 추가되었다). 그리고 나서 Default style 항목에서 'Windows’가 아닌 스타일을 지정한다(그 이유는 아래에서 설명한다).

그림.프로젝트 옵션 화면에서 사용할 스타일 여러개를 활성화하고, 그 중 하나를 기본 스타일로 지정할 수 있다.

이제 폼에 있는 각 컨트롤의 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에는 Panel1의 스타일인 ‘Light’ 스타일이 적용된다. StyleName 속성 값 중 ‘Windows’는 스 타일 목록에 있기는 하지만 스타일이라기 보다는 스타일을 적용하지 말라는 특별한 값이므로(자세한 내용은 아래에서 설명한다), Button2에는 어떤 스타일도 적용되지 않기 때문에 ‘윈도우 기본’ 테마가 반영된다.

그림. 위 코드에 있는 버튼 5개가 표현된 결과 화면이다. 5개 버튼 모두 스타일이 다르다.

사용 규칙

VCL 애플리케이션에서 각 폼과 컨트롤 별로 스타일을 조정하는 방법은 여러 가지이지만 아래 규칙을 알아두면 좋다.

1. 프로젝트 옵션에서 스타일를 선택(또는 해제)하라. 그러면, StyleName 속성의 값을 지정할 때 표시되는 스타일 목록에 반영된다 (물론, 코드를 사용하여, 실행 중에도 스타일을 로드할 수도 있다).

2. TControl.StyleName 속성을 이용하여 각 컨트롤과 폼 별로 원하는 스타일을 지정하라. StyleName 값은 프로젝트 옵션에 표시되는 스타일 중 하나여야 한다. 부모 컨트롤에 지정된 스타일이 자식 컨트롤에 적용되게 할 수도 있다. 예를 들어 폼의 StyleName 속성에서 스타일을 지정하면 그 폼 안에 있는 모든 컨트롤에도 적용된다.

• TControl.StyleName의 기본값은 공백이다. 따라서 컨트롤 개별 스타일을 전혀 지정하지 않으면, 애플리케이션의 모든 컨트롤과 폼에는 애플리케이션의 기본 스타일이 적용된다.
• StyleName속성을 ‘Windows’로 지정하면 해당 (컨트롤, 폼 등) 해당 요소에는 스타일이 무시되므로 ‘윈도우 기본’ 테마가 반영된다.
• StyleName에 스타일을 지정했지만, 그 스타일이 애플리케이션이 로드하지 않는 (즉 프로젝트 옵션에서 선택되지 않은) 스타일인 경우 애플리케이션의 기본 스타일이 적용된다.

3. 윈도우 대화상자(Dialog)에도 스타일을 적용할 수 있다. TStyleManager.DialogsStyleName 속성을 이용하라. 기본값은 공백이다(애플리케이션의 기본 스타일이 적용).

4. 애플리케이션의 기본 스타일을 ‘Windows’ 값으로 지정할 수 있다. TControl.StyleName 속성의 기본값이 공백이기 때문에, 애플리케이션에서 지정한 ‘Windows’ 즉 ‘스타일 무시’가 애플리케이션의 모든 컨트롤과 폼의 StyleName 속성에 적용된다.  그 방법은 코드 TStyleManager.UseSystemStyleAsDefault  := True 을 사용하는 것이다. (역자 주: 이 코드는 개별 유닛 등 어느 곳에서도 사용할 수 있지만, 프로젝트 소스에 이 코드를 넣으면 애플리케이션 전체에 반영된다) 그리고 나서, 스타일을 사용하고 싶은 폼이나 컨트롤에서만 StyleName 속성에 스타일을 지정하면 된다. 이 방식은 폼 몇개에서만 VCL 스타일을 활성화하고 싶을 때 활용하기 좋다. 애플리케이션 안에서 컨트롤이나 폼 하나라도 스타일을 사용하려면, 프로젝트 옵션에서 Default style 옵션에서 반드시  ’Windows’가 아닌 일반 스타일을 선택해야 한다. (역자 주: 프로젝트 옵션에서 Default style 옵션을 ’Windows’로 선택하면 이 애플리케이션에서는 ‘윈도우 기본’ 테마를 사용하고 스타일 기능을 전혀 사용하지 않도록 지정하는 것이기 때문이다)

위 4번에서 설명한 작동 원리는 매우 중요하다. 프로젝트 옵션을 통해 스타일을 사용도록 지정한 애플리케이션에서도 스타일을 지원하지 않는 써드 파티 컴포넌트를  사용할 수 있도록 하기 때문이다. 예전에는 이렇게 다루기가 상당히 힘들었지만 이제는 이 새로운 아키텍처를 통해 (컨트롤과 폼 등의) 요소들이 스타일을 지원하건 안하건 관계없이 섞어서 잘 사용할 수 있게 되었고 써드 파티 컨트롤 때문에 VCL 스타일 사용을 포기할 필요가 없어졌다.

써드 파티 컨트롤에는 컨트롤 개별 스타일링이 자동으로 적용되지 않는다는 점을 명심하자. 이와 같이 스타일 기반이 아닌 컨트롤에 개별 스타일을 적용하려면 TControl을 매개변수로 받는 Vcl.Themes.StyleServices 메소드를 코드에서 사용해야 한다. 예를 들면,

StyleServices(Self).DrawElement;

 

결론

컨트롤 개별 VCL 스타일(Per-Control VCL Style)이 도입 됨에 따라, 스타일을 훨씬 더 유연하게 사용할 수 있게 되었다. 폼 몇개에만 스타일을 적용하는 것으로 시작해서, 점차 다른 폼으로 확대 적용해 나갈 수도 있다. 직접 만든 컨트롤이나 써드 파티 컨트롤 등 VCL 스타일을 지원하지 않는 컨트롤도 스타일을 사용하는 애플리케이션 안에서 사용할 수 있다. UI 스타일 여러 개를 섞어서 쓸 수 있으며 실행 중에 동적으로 스타일을 지정할 수 도 있다.

컨트롤 개별 스타일 적용 외에도 10.4에서 많은 VCL 기능과 VCL 스타일이 추가되었지만, 이 훌륭한 기능은 별도의 글을 작성할 가치가 있다고 느꼈다.