Setting the TreeList Appearance

• Apr 02, 2024
• 4 minutes to read

The ExpressQuantumTreeList provides several ways to modify its appearance:

• Look And Feel. Changes the look & feel of the entire TreeList control.

• Styles. Affects the appearance of the TreeList elements that support the Styles technology.

• Custom Draw. Can change the appearance of many of the TreeList elements.

Let’s explore each option in detail.

Look And Feel

The TreeList control has a LookAndFeel property, which provides four options:

• Standard

• Flat

• UltraFlat

• Office 2003

You can switch between them via the LookAndFeel.Kind property. You can also apply skins through the LookAndFeel.SkinName property.

The following code demonstrates shows how to apply the Flat appearance to your TreeList control:

Delphi

cxTreeList1.LookAndFeel.Kind := lfFlat;

C++

cxTreeList1->LookAndFeel->Kind = lfFlat;

If you are using the Windows XP (or later) operating system, you can make your TreeList look like a Windows native control. To accomplish this, set the LookAndFeel.NativeStyle property to True.

Delphi

cxTreeList1.LookAndFeel.NativeStyle := True;

C++

cxTreeList1->LookAndFeel->NativeStyle = true;

Note

The NativeStyle property has a higher priority than the Kind and SkinName properties. Thus, if the NativeStyle property is set, the Kind and SkinName properties have no effect.

Styles

Styles allow you to customize the appearance of particular TreeList elements such as bands and columns, etc. A style affects the element’s background, font and text color. Some styles have events that occur when a style is about to change. You can write code in these event handlers to implement conditional style changes, etc.

The following code sets different styles for different group rows:

Delphi

var
  cxMyStyle1, cxMyStyle2: TcxStyle;
  //...
  //Put the following code into the form's constructor
  cxMyStyle1 := TcxStyle.Create(Self);
  cxMyStyle1.Color := $0042D7FF;
  cxMyStyle2 := TcxStyle.Create(Self);
  cxMyStyle2.Color := $0073E1FF;
procedure TForm1.TreeListStylesGetContentStyle(Sender, AItem: TObject;
  ANode: TcxTreeListNode; var AStyle: TcxStyle);
begin
  if ANode.AbsoluteIndex mod 2 = 0 then
    AStyle := cxMyStyle1
  else AStyle := cxMyStyle2;
end;

C++

TcxStyle *cxMyStyle1, *cxMyStyle2;
  //...
  //Put the following code into the form's constructor
  cxMyStyle1 = new TcxStyle(this);
  cxMyStyle1->Color = 0x0042D7FF;
  cxMyStyle2 = new TcxStyle(this);
  cxMyStyle2->Color = 0x0073E1FF;
void __fastcall TForm1:: TreeListStylesGetContentStyle (
      TObject *Sender, AItem, TcxTreeListNode * ANode, TcxStyle *AStyle) {
  if (ANode->AbsoluteIndex % 2 == 0)
    AStyle = cxMyStyle1;
  else AStyle = cxMyStyle2;
}

The result of the code above is shown in the image below:

Custom Draw

The Custom Draw feature provides the most powerful method of customizing the TreeList control’s appearance. This is an event-based technology. Every customizable TreeList element provides a set of custom draw events. Each event provides the arguments necessary for painting TreeList elements. These parameters include:

Sender – the standard parameter passed to all event handlers

AViewInfo – the element’s ViewInfo

ACanvas – the TreeList control’s canvas

ADone – a Boolean parameter that indicates whether default painting should be performed

These parameters are discussed in detail in the Custom Draw base concepts. The ACanvas parameter needs an additional explanation though. Generally, the TcxCanvas class (passed by the ACanvas parameter) is a wrapper around the standard VCL canvas (TCanvas) and the latter is available via ACanvas.Canvas.

Note

The ACanvas parameter contains the canvas of the whole TreeList control and so you may need to calculate the current element’s bounding rectangle manually. However, the AViewInfo parameter contains a Bounds property representing the current element’s bounding rectangle.

The following code draws an image as a cell background.

Delphi

procedure TForm1.TreeListCustomDrawCell (Sender: TObject; ACanvas: TcxCanvas; AViewInfo: TcxTreeListEditCellViewInfo; var ADone: Boolean);
var
  ARec: TRect;
  ATextToDraw: string;
begin
  ACanvas.Canvas.Brush.Bitmap := Image1.Picture.Bitmap;
  ACanvas.Canvas.FillRect(AViewInfo.BoundsRect);
  SetBkMode(ACanvas.Canvas.Handle, TRANSPARENT);
  ACanvas.DrawText(AViewInfo.DisplayValue, AViewInfo.ContentRect, 0);
  ADone := True;
end;

C++

void __fastcall TForm1::TreeListCustomDrawCell(
      TObject *Sender, TcxCanvas *ACanvas,
      TcxTreeListEditCellViewInfo *AViewInfo, bool &ADone)
{
  ACanvas->Canvas->Brush->Bitmap = Image1->Picture->Bitmap;
  ACanvas->Canvas->FillRect(AViewInfo->BoundsRect);
  SetBkMode(ACanvas->Canvas->Handle, TRANSPARENT);
  ACanvas->DrawText(AViewInfo->DisplayValue, AViewInfo->ContentRect, 0);
  ADone = true;
}

The result of the above code is shown in the image below: