Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

Recommended Posts

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 버전 부터는 항목 여러 개 선택 가능)

TListControl1.png

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

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

TListControl2.png

위에 보이는 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의 기존 설정을 덮어 쓴다.

TListControl3.png

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

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

TListControl4.png

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

기타 참고

 

 

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.