10.4 [10.4.2] TControlList 컨트롤 사용하기

[Kori]

Docwiki에 있는 "Using VCL TControlList Control"을 번역한 글 (번역일: 2023년 3월 9일)

* 업데이트(2023.2.14 ): 11.3 버전부터는 TControlList 컨트롤 안에 있는 항목 여러 개 선택 가능

위로 가기: VCL

TControlList는 RAD스튜디오 10.4.2에서 추가된 새 VCL 컨트롤이다. 이 컨트롤이 추가된 이유는 현대식 세련된 UI를 제공하고, 개발자가 원하는 대로 알맞게 UI를 구성할 수 있고, 항목이 매우 많을 때에도 빠르게 표현할 수 있는 고성능 리스트를 제공하기 위해서이다. TControlList 안에 나열되는 개별 항목(item)은 모두 크기와 너비는 동일하며, 그 중 1개 항목만 선택할 수 있다 (옮긴이: 11.3 버전 부터는 항목 여러 개 선택 가능)

개발자는 개발 화면에서 TControlList 안에 나열되는 개별 항목가 표현할 화면 요소 컨트롤들을 지정할 수 있다 (TGraphicControl 클래스와 그 후손 클래스 만이TControlList 안에 들어갈 수 있다). 개발자는 항목 안에 들어갈 요소 컨트롤들을 지정하고 그 요소에 데이터를 연결하면 된다. 화면이 표현되는 시점에는 전체 항목이 아니라 화면에 나타나는 항목들에 대한 컨트롤들이 생성된다. 이와 같이 TControlList은 완전히 가상회되어 있기 때문에, 항목이 수천 개 심지어 수백만 개가 되더라도 사용할 수 있으며, 스크롤 속도 또한 엄청나게 빠르다. TControlList는 화면에 보인는 항목만 처리하고 표시하는 것 뿐만 아니라, 인-메모리 비트맵을 사용하여 처리된 항목들의 내용을 캐시한다.

TControlList 컨트롤은 전통적인 TDBCtrlGrid 컨트롤과 닮았다. 즉, 컨트롤들을 담는 패널(Panel)이 있어서 개발자가 그 안에 컨트롤을 넣으면 된다. 나열되는 항목은 가상 항목이며 실행 시(run time)에 생성된다. TDBCtrlGrid와 다른 점은 TDBCtrlGrid 안에 들어갈 수 있는 컨트롤은 오직 TGraphicControl의 자손이어야 하고 모든 항목이 가상(virtual)이라는 점이다. 아래 그림은 개발 시 (design time - 항목 하나의 표면에서 편집하는) 모습과 실행 시(run time - 항목이 같은 형태로 나열되는) 모습이다. 

위에 보이는 TControlList에 보이는 항목들에는 구체적인 정보가 담지 않다. 개별 항목에 데이터를 제공하려면 라이브 바인딩스(live bindings)를 통해 데이터셋이나 오브젝트 컬렉션 등을 원하는 컨트롤에 연결하거나 또는 각 항목의 데이터를 조회하는 이벤트를 사용하면 된다 (이 경우, 개발자가 직접 마음대로 저장소와 맵핑을 다룰 수 있음).

TControlList에는 여러 이벤트들이 있어서, 그 안에 있는 컨트롤 각각의 프로퍼티를 지정하고, 활성화하고 표시/숨김을 제어할 수 있다. 서로 다른 항목 상태를 선택할 수 있도록 조정하는 특별한 프로퍼티와 기타 추가 프로퍼티들을 사용할 수도 있다. 예를 들어 개발자는 항목 하나가 선택될 때 그 항목의 레이블이 표시되는 색상이 자동으로 조정되도록 할 수도 있다. 

procedure TForm2.ControlList1BeforeDrawItem(AIndex: Integer;    
  ACanvas: TCanvas; ARect: TRect; AState: TOwnerDrawState); 
begin   
  Label1.Caption := 'Label' + AIndex.ToString; 
end;

개발 시 (design time)에는 "ControlList Preset configuration" 이라는 특별한 대화상자를 사용할 수 있다. 이 대화상자에서는  TControlList 프로퍼티가 기타 특정 프로퍼티들이 미리 지정된 컨트롤 컬렉션들이 들어 있다. 개발자는 화살표를 이용하여 선호하는 구성을 선택할 수 있으며, 아래 쪽에 있는 옵션 체크박스들을 이용하여 추가 구성을 할 수 있다.  이 마법사 대화상자에서 지정한 내용은 TControlList의 기존 설정을 덮어 쓴다.

개발자가 항목을 디자인하고 나면, ItemCount 프로퍼티에 지정된 숫자만큼 항목이 가상으로 복제된다. 화면 상에서는 TControlList 안에 대체로 항목 몇 개 정도가 표시되는데, 나열되는 개별 항목의 너비와 높이가 모두 동일하다. TControlList에 항목을 배치하는 옵션은 3이다:

• Single for a single columns of items: TControlList 안에 나열되는 개별 항목의 너비는 TControlList 컨트롤의 너비에 맞춰진다.
• Multi Top To Bottom: TControlList 안에서 개별 항목들은 세로로 여러 줄로 나열될 수 있다. 나열 순서는 세로 줄 하나를 다 채우고 나면 다음 세로 줄을 채우기 시작한다. 세로로 스크롤을 할 수 있다.
• Multi Left To Right: 마찬가지로 TControlList 안에서 개별 항목들은 세로로 여러 줄로 나열될 수 있다. 하지만 나열 순서가 다르나. 가로로   세로로 스크롤을 할 수 있다 (아래 그림과 같다).

TControlList의 모든 항목은 가상(virtual)이다. 따라서 항목이 수백만 개가 넘어도 성능이 뛰어나고 아무 문제가 없다. 특별한 코드가 표시되는 항목들을 정의한다. 그리고 항목 별 실제 위치는 스크롤 정보를 사용하여 실시간으로 반영된다. 실제 처리되는 항목은 오직 화면에 표시되는 항목들뿐이다.

일반적으로, 이 TControlList 안에 있는 어떤 컨트롤에서도 OnClick 이벤트를 사용할 수 있다. TControlList는 High-DPI 옵션, VCL 스타일스(VCL Styles)를 지원하며 라이브 바인딩스(Live Bindings)를 사용할 수 있다.

새 TControlListButton 컴포넌트

TControlList 패널 안에  TSpeedButton을 직접 넣어서 사용하지 못한다. 왜냐하면  TSpeedButton은 버튼 상태(state) 변경 등 특별한 상호작용을 다루지 못하기 때문이다. 여러 다른 상태를 가질 수 있는 컨트롤을 다룰 수 있도록 특별히 TControlListControl 클래스가 추가되었는데 이 클래스는 TGraphicControl를 상속받았다. 개발자는 TControlListControl 클래스를 상속받는 새 컨트롤을 생성할 수 있으며, 그 컨트롤을 사용하여 각 항목의 마우스 이벤트들 사용할 수 있다. 이 방식은 TControlListButton에서 사용되었다. TControlListButton은 TControlList에서 사용할 수 있는 TSpeedButton 이라고 볼 수 있다. 이 버튼에는 3 가지 스타일이 있다. 푸쉬 버튼(push button), 툴 버튼(tool button), 링크(link)

TControlList 컴포넌트의 프로퍼티 목록

자세히 보기: https://docwiki.embarcadero.com/RADStudio/en/Using_VCL_TControlList_Control#List_of_TControlList_Component_Properties

TControlList 컴포넌트의 이벤트 목록

자세히 보기: https://docwiki.embarcadero.com/RADStudio/en/Using_VCL_TControlList_Control#List_of_TControlList_Component_Events

기타 참고

• Vcl.Controls.TGraphicControl
• Vcl.DBCGrids.TDBCtrlGrid
• Vcl.ControlList.TControlList
• Vcl.Buttons.TSpeedButton