TCustomListBox.Canvas Property

Provides a drawing surface when implementing a handler for the OnDrawItem event of an owner-draw list box.

Pascal

property Canvas: TCanvas;

C++

__property TCanvas Canvas;

Description

Canvas is only useful for applications that control the drawing of list box items, that is, for owner-draw list boxes. Canvas is used to draw graphical images that can be used as items in a list box.

By default a TControlCanvas object is created for the Canvas property in the list box constructor. To create an owner-draw list box that uses a canvas, set the Style property accordingly.

C++ Examples:

Copy Code

/*
Here is a typical handler for an OnDrawItem event. In the
example, a list box with the lbOwnerDrawFixed style draws a
bitmap to the left of each string.
Select the TListBox and set the ItemHeight property to 32.
Select the ImageList and set the Layout Height and Width to
32.  Double click on the ImageList to load the images.  Be
sure to load in the correct order, logo2, Sunflower,
butterfly.
*/
void __fastcall TForm1::FormCreate(TObject *Sender)
{
  MyList = new TStringList;
  bitmap0 = new Graphics::TBitmap;
  bitmap1 = new Graphics::TBitmap;
  bitmap2 = new Graphics::TBitmap;
//  MyList->Add("Animal");
//  MyList->Add("Flowers");
//  MyList->Add("Butterfly");
//  ListBox1.Items->AddStrings(MyList);

  ImageList1->GetBitmap(0, bitmap0);
  ListBox1->Items->AddObject("Flowers", bitmap0);
  ImageList1->GetBitmap(1, bitmap1);
  ListBox1->Items->AddObject("Animal", bitmap1);
  ImageList1->GetBitmap(2, bitmap2);
  ListBox1->Items->AddObject("Butterfly", bitmap2);
}

void __fastcall TForm1::ListBox1DrawItem(TWinControl *Control, int Index,
      TRect &Rect, TOwnerDrawState State)
{
  Graphics::TBitmap *pBitmap; // temporary variable for item’s bitmap
  int     Offset = 2;   // default text offset width
  // note that we draw on the listbox’s canvas, not on the form
  TCanvas *pCanvas = ((TListBox *)Control)->Canvas;
  pCanvas->FillRect(Rect); // clear the rectangle
  pBitmap = (Graphics::TBitmap *)((TListBox *)Control)->Items->Objects[Index];
  if (pBitmap)
  {
    pCanvas->BrushCopy(Bounds(Rect.Left + Offset, Rect.Top, pBitmap->Width, pBitmap->Height), pBitmap, Bounds(0, 0, pBitmap->Width, pBitmap->Height), clRed); // render bitmap
    Offset += pBitmap->Width + 4;   // add four pixels between bitmap and text
  }
  // display the text
  pCanvas->TextOut(Rect.Left + Offset, Rect.Top, ((TListBox *)Control)->Items->Strings[Index]);
}

Copy Code

/*
The following code uses ClientRect to find and draw a line
from the top left to the bottom right of the current
control.  Select a TControl in the ListBox list.  This
example assumes that the current object is a descendent of
TControl and has a public Canvas property.
*/
{
  TPoint APoint = Point(X, Y);
  int Index = ListBox1->ItemAtPos(APoint, True);
  TListBox *myListBox;
  TClass ClassRef = ListBox1->Items->Objects[Index]->ClassType();
  if (String(ClassRef->ClassName()) == "TListBox")
  {
    myListBox = (TListBox *)ListBox1->Items->Objects[Index];
    // make sure we are using the TControls canvas and not the from's!
    myListBox->Canvas->MoveTo(myListBox->ClientRect.Left, myListBox->ClientRect.Top);
    myListBox->Canvas->LineTo(myListBox->ClientRect.Right, myListBox->ClientRect.Bottom);
    myListBox = NULL;
  }
}

Delphi Examples:

Copy Code

{
Here is a typical handler for an OnDrawItem event. In the
example, a list box with the lbOwnerDrawFixed style draws a
bitmap to the left of each string.
Select the TListBox and set the ItemHeight property to 32.
Select the ImageList and set the Layout Height and Width to
32.  Double click on the ImageList to load the images.  Be
sure to load in the correct order, logo2, Sunflower,
butterfly.
}
procedure TForm1.FormCreate(Sender: TObject);
begin
  MyList := TStringList.Create;
  bitmap0 := TBitmap.Create;
  bitmap1 := TBitmap.Create;
  bitmap2 := TBitmap.Create;
//  MyList.Add('Animal');
//  MyList.Add('Flowers');
//  MyList.Add('Butterfly');
//  ListBox1.Items.AddStrings(MyList);

  ImageList1.GetBitmap(0, bitmap0);
  ListBox1.Items.AddObject('Flowers', bitmap0);
  ImageList1.GetBitmap(1, bitmap1);
  ListBox1.Items.AddObject('Animal', bitmap1);
  ImageList1.GetBitmap(2, bitmap2);
  ListBox1.Items.AddObject('Butterfly', bitmap2);
end;

procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer; Rect:TRect; State: TOwnerDrawState);
var
  Bitmap: TBitmap;      { temporary variable for the item’s bitmap }
  Offset: Integer;      { text offset width }
begin
  Bitmap := TBitmap.Create;
  with (Control as TListBox).Canvas do  { draw on control canvas, not on the form }
  begin
    FillRect(Rect);       { clear the rectangle }
    Offset := 2;          { provide default offset }
    Bitmap := TBitmap((Control as TListBox).Items.Objects[Index]);  { get the bitmap }
    if Bitmap <> nil then
    begin
      BrushCopy(
        Bounds(Rect.Left + Offset, Rect.Top, Bitmap.Width, Bitmap.Height),
        Bitmap, 
        Bounds(0, 0, Bitmap.Width, Bitmap.Height), 
        clRed);  {render bitmap}
      Offset := Bitmap.width + 6;    { add four pixels between bitmap and text}
    end;
    TextOut(Rect.Left + Offset, Rect.Top, (Control as TListBox).Items[Index])  { display the text }
  end;
end;

Copy Code

{
The following code uses ClientRect to find and draw a line
from the top left to the bottom right of the current
control.  Select a TControl in the ListBox list.  This
example assumes that the current object is a descendent of
TControl and has a public Canvas property.
}
  if (ListBox1.Items.Objects[Index] is TListBox) then
  begin
    myListBox:= (ListBox1.Items.Objects[Index] as TListBox);
    with myListBox.ClientRect do
    begin // make sure we are using the TControl's canvas and not the form's!
      myListBox.Canvas.MoveTo(Left, Top);
      myListBox.Canvas.LineTo(Right, Bottom);
    end;
  myListBox:= nil;
  end;