Home » Tutorials » Third-Party-Komponenten » VirtualTreeView

VirtualTreeView

Piktogramme und Images anzeigen

Um einzelne Nodes auffälliger zu gestalten, kann man neben ihnen kleine Piktogramme anzeigen lassen. Die Bilder, die angezeigt werden sollen, müssen in eine ImageList geladen werden. Dies kann man bequem in der Entwicklungsumgebung erledigen. Als nächstes muss die ImageList mit dem Baum verknüpft werden, indem man der Eigenschaft Images des Baums die ImageList zuweist.

Die Anzeige der Piktogramme wird in dem Ereignis OnGetImageIndex gesteuert:

procedure TForm1.vstGetImageIndex(Sender: TBaseVirtualTree;
 Node: PVirtualNode; Kind: TVTImageKind; Column: Integer;
 var Ghosted: Boolean; var ImageIndex: Integer);

Wie man sieht, ist die Parameter verhältnismäßig lang. Der Parameter „Sender“ enthält die Komponente, von der der Procedureaufruf ausging. „Node“ zeigt auf den aktuellen Node und der Parameter „Column“ gibt die momentane Spalte zurück. Der Parameter hat den Wert -1, falls keine Spalte vorhanden ist.

Die Bedeutungen der oben genannten Parameter sollte aus den vorherigen Kapiteln ableitbar sein. Neu sind die Parameter „Kind“ und die Referenzparameter „Ghosted“ und „ImageIndex“.

Bei „Kind“ handelt es sich um eine Aufzählung mit folgenden Aufbau:

TVTImageKind = (
 ikNormal,
 ikSelected,
 ikState,
 ikOverlay
 );

Ist der Status des aktuellen Nodes normal, hat „Kind“ den Wert ikNormal. Ist der Node Beispielsweise selektiert hat „Kind“ den Wert ikSelected.

Setzt Du den booleschen Parameter Ghosted auf True, wirkt das Icon disabled. Der Standardwert ist False.

ImageIndex muss auf den Index des Bildes in der ImageList gesetzt werden, welches angezeigt werden soll. Die Zählung beginnt bei 0.

Ein Beispiel könnte so aussehen. Vorrausetzung für dieses Beispiel ist ein Baum mit mindestens zwei Beispielen und eine ImageList mit zwei Piktogrammen.

procedure TForm1.vstGetImageIndex(Sender: TBaseVirtualTree;
 Node: PVirtualNode; Kind: TVTImageKind; Column: Integer;
 var Ghosted: Boolean; var ImageIndex: Integer);
begin
  case Kind of
    ikNormal, ikSelected:
      case Column of
        0: ImageIndex:=0;
        1: if Sender.FocusedNode = Node then
          ImageIndex:=1;
      end;
  end;
end;

Hier siehst du zwei ineinander verschachtelte Case-Anweisungen. Die Bedingung der ersten Case-Anweisung ist nur erfüllt, wenn es sich bei dem Node um einen normalen (ikNormal) oder um einen selektierten Knoten handelt. In diesem Beispiel würde neben den Nodes der ersten Spalte das erste Bild aus der ImageList angezeigt werden. Hat ein Node den Fokus wird in dessen zweiter Spalte das zweite Icon angezeigt.

Ein komplettes Beispiel kannst Du dir hier runterladen.

Hintergrundbild wählen

Über die Eigenschaft Background des Baums ist es möglich ein Hintergrundbild zu wählen. Damit das Bild letztendlich auch angezeigt wird, muss der Wert toShowBackground der Eigenschaft TreeOptions|PaintOptions auf True gesetzt werden. Bei dem Bild muss es sich um ein Bitmap handeln. Die Eigenschaften BackgroundOffSetX und BackgroundOffSetY geben an, um wieviel Pixel das Bild in der Horizontalen bzw. in der Vertikalen verschoben wird. Das Bild wird automatisch gekachelt.

Schriftformatierungen der Nodes

Die Schriftformatierungen lassen sich für jeden Node einzeln festlegen. Dies geschieht im Ereignis OnPaintText des Baums. Dieses Ereignis ist vergleichbar mit dem OnDrawItem-Ereignis der TListbox, in dem ebenfalls Paintvorgänge beeinflusst werden können. Die Procedure-Kopf des Event-Handlers hat sieht folgendermaßen aus:

procedure TForm1.vstPaintText(Sender: TBaseVirtualTree;
 const TargetCanvas: TCanvas; Node: PVirtualNode; Column: Integer;
 TextType: TVSTTextType);

Interessant ist hier der Parameter TargetCanvas vom Typ TCanvas. Er ist zwar als const deklariert, dies ist bei Objekten aber nebensächlich, da nur eine Referenz übergeben wird. Über diesem Parameter werden die Schriftformatierungen vorgenommen. Es stehen sämtliche Möglichkeiten des TCanvas-Objekts zur Verfügung. Node enthält den aktuellen Knoten und Column gibt die Spalte zurück.

In der Praxis könnte die Procedure z.B. so aufgebaut sein. Der Baum muss in diesem Beispiel mindestens zwei sichtbare Spalten haben.

procedure TForm1.vstPaintText(Sender: TBaseVirtualTree;
 const TargetCanvas: TCanvas; Node: PVirtualNode; Column: Integer;
 TextType: TVSTTextType);
begin
  with TargetCanvas do
  case Column of
    0: Font.Style:=Font.Style + [fsBold];
    1: Font.Color:=clRed;
  end;
end;

Sämtliche Nodes der ersten Spalte (Column: 0) werden nun fett dargestellt, die Nodes der zweiten Spalte in roter Farbe.