ImageList en ListBox.Columns:=1

[ecfisa]

Empezado por bulc

El problema es que en el Canvas del ListBox no quedan bien alineados Imagen-Texto. Las imágenes se agolpan unas sobre otras.

Hola bulc.

O estoy entendiendo mal tu problema, o la solución es ajustar la propiedad ItemHeight del ListBox a la altura de las imágenes al inicio:

Código Delphi [-]
  ListBox1.ItemHeight := ImageList1.Height;

Por ejemplo:

Código Delphi [-]
...
procedure TForm1.FormCreate(Sender: TObject);
var
  i: Integer;
begin
  with ListBox1 do
  begin
    Columns:= 1;
    Style:= lbOwnerDrawFixed;
    for i:= 0 to 9 do
      Items.Add('Item '+IntToStr(i));
    Font.Size := 24;  // tamaño font a gusto
    ItemHeight:= ImageList1.Height; // en el ejemplo: 48x48
  end;
end;

procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  Rect: TRect; State: TOwnerDrawState);
begin
  with TListBox(Control) do
  begin
    Canvas.FillRect(Rect);
    ImageList1.Draw(Canvas,  Rect.Left,  Rect.Top, Index);
    Canvas.TextOut(Rect.Left + ImageList1.Width + 10,
      ((Rect.Top+Rect.Bottom)div 2)-(Font.Size div 2), Items[Index]);
  end;
end;
...

Da este resultado:



Saludos.

[bulc]

No sé como sabéis tanto. Gracias.

[bulc]

Empezado por ecfisa

Hola bulc.

O estoy entendiendo mal tu problema, o la solución es ajustar la propiedad ItemHeight del ListBox a la altura de las imágenes al inicio:

Código Delphi [-]
  ListBox1.ItemHeight := ImageList1.Height;

Por ejemplo:

Código Delphi [-]
...
procedure TForm1.FormCreate(Sender: TObject);
var
  i: Integer;
begin
  with ListBox1 do
  begin
    Columns:= 1;
    Style:= lbOwnerDrawFixed;
    for i:= 0 to 9 do
      Items.Add('Item '+IntToStr(i));
    Font.Size := 24;  // tamaño font a gusto
    ItemHeight:= ImageList1.Height; // en el ejemplo: 48x48
  end;
end;

procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  Rect: TRect; State: TOwnerDrawState);
begin
  with TListBox(Control) do
  begin
    Canvas.FillRect(Rect);
    ImageList1.Draw(Canvas,  Rect.Left,  Rect.Top, Index);
    Canvas.TextOut(Rect.Left + ImageList1.Width + 10,
      ((Rect.Top+Rect.Bottom)div 2)-(Font.Size div 2), Items[Index]);
  end;
end;
...

Da este resultado:



Saludos.

Si tienes tiempo, ¿podrías explicar este punto (Canvas.TextOut)? Gracias.

[ecfisa]

Hola bulc.

Hice ese cácluculo para centrar verticalmente el texto de forma aproximada.

La mitad del alto es Rect.Top+Rect.Bottom div 2 y ya que están igualados, también se podría haber usado ImageList1.Height div 2.

  +----------+ Top
  |          | 
  |----------| Top+Bottom / 2     
  |          |   
  +----------+ Button

Del mismo modo el font se divide a la mitad para acomodarse al centro. En ese momento no me acordé pero mucho mas exácto es usar:

Código Delphi [-]
 Canvas.TextOut(Rect.Left + ImageList1.Width + 10,
      (ImageList1.Height div 2)-(Canvas.TextHeight(Items[Index]) div 2), Items[Index]);

Saludos.

[[nlsgarcia]]

bulc,

La solución de Ecfisa es excelente, sin embargo te sugiero revisar los componentes TImgComboBox y TImgListBox creados por Derek van Daal dado que facilitan el uso de imágenes y permiten la creación de un código más simple y directo.

Espero sea útil

Nelson.

[bulc]

Empezado por nlsgarcia

bulc,

La solución de Ecfisa es excelente, sin embargo te sugiero revisar los componentes TImgComboBox y TImgListBox creados por Derek van Daal dado que facilitan el uso de imágenes y permiten la creación de un código más simple y directo.

Espero sea útil

Nelson.

Gracia a ambos. Voy a colocarlo en mi aplicación a ver qué tal.... Hasta pronto.