Difference between revisions of "TComboBox/es"

From Free Pascal wiki
Jump to navigationJump to search
m (Fixed syntax highlighting; deleted category included in page template)
 
(32 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
Es una combinación de una caja de edición (edit box) y un listado (soltar-abajo(drop-down) permitiendo una o varias opciones a ser escogidas.  
 
Es una combinación de una caja de edición (edit box) y un listado (soltar-abajo(drop-down) permitiendo una o varias opciones a ser escogidas.  
  
[[image:Comp_Standard_TComboBox.png]]
+
 
 +
[[image:ComboBox_04.png|center]]
  
 
== Modo de uso ==
 
== Modo de uso ==
  
Para utilizar un [[doc:lcl/stdctrls/tcombobox.html|TComboBox]] en una[[TForm|form]], simplemente lo seleccionas de la paleta de componentes ''Standard''y a continuación lo ubicas en el formulario mediante un click en el mismo.<br>
+
Para utilizar un [[doc:lcl/stdctrls/tcombobox.html|TComboBox]] en un [[TForm|form]], simplemente lo seleccionas de la paleta de componentes ''Standard''y a continuación lo ubicas en el formulario mediante un click en el mismo.<br>
  
 
En el componente ComboBox, las [[String|strings]] se almacenan en la propiedad ''Items'', que es del tipo TStrings. Por tanto puedes asignar o eliminar cadenas en el ComboBox como en un [[TStringList-TStrings Tutorial|TStringList]] o su padre [[TStringList-TStrings Tutorial|TStrings]].
 
En el componente ComboBox, las [[String|strings]] se almacenan en la propiedad ''Items'', que es del tipo TStrings. Por tanto puedes asignar o eliminar cadenas en el ComboBox como en un [[TStringList-TStrings Tutorial|TStringList]] o su padre [[TStringList-TStrings Tutorial|TStrings]].
Line 33: Line 34:
 
==== Mediante código cuando creas el formulario ====
 
==== Mediante código cuando creas el formulario ====
  
* Create the ''OnCreate'' event handler for the form, by clicking on your form, use the Object Inspector, the tab events, select the ''OnCreate'' event and click the button [...] or double click the button in the form.  
+
* Crea el manejador del evento ''OnCreate'' para el formulario haciendo click en el formulario, luego en el Inspector de Objetos vamos a la solapa '''events''', selecciona el evento ''OnCreate'' y haz click en [...] o haz doble click en el pulsador dentro del formulario.  
  
 
* En el editor de código fuente ahora insertamos la sección de texto deseada, para nuestro ejemplo, escribiéndola como sigue:
 
* En el editor de código fuente ahora insertamos la sección de texto deseada, para nuestro ejemplo, escribiéndola como sigue:
  
<source>
+
<syntaxhighlight lang=pascal>
 
procedure TForm1.FormCreate(Sender: TObject);   
 
procedure TForm1.FormCreate(Sender: TObject);   
 
begin
 
begin
 +
  ComboBox1.Text := 'Esto es un ComboBox';
 
   ComboBox1.Items.Clear;                  // Elimina todo el contenido previo.
 
   ComboBox1.Items.Clear;                  // Elimina todo el contenido previo.
 
   ComboBox1.Items.Add('Rojo');            // Añade la entrada del elemento 'Rojo'.
 
   ComboBox1.Items.Add('Rojo');            // Añade la entrada del elemento 'Rojo'.
Line 46: Line 48:
 
   ComboBox1.Items.Add('Color Aleatorio'); // Añade la entrada del elemento 'Color Aleatorio'.
 
   ComboBox1.Items.Add('Color Aleatorio'); // Añade la entrada del elemento 'Color Aleatorio'.
 
end;
 
end;
</source>
+
</syntaxhighlight>
 +
 
 +
[[image:ComboBox_01.PNG|center]]
 +
 
 +
=== Hacer que suceda algo después de la selección ===
 +
 
 +
Como todos los componentes TComboBox también provee varios [[Event_order|eventos]] que son llamados cuando el usuario lo utiliza. Para responder a un cambio en la selección de los elementos podemos utilizar el evento '''OnChange''':
  
[[image:ComboBox_01.PNG|center|450px]]
+
* Para ello hacemos doble click sobre el componente ComboBox del formulario en el que estemos trabajando o bien escogemos el evento ''OnChange'' en el Inspector de Objetos y a continuación click en '''[...]'''.
  
===Make that something happens after the selection===
+
* Con esto se crea el manejador del evento permintiéndonos insertar el código deseado. En nuestro ejemplo queremos cambiar el color del recuadro que muestra el elemento seleccionado:
  
Like all components, even the TComboBox provides various [[Event_order|events]], that are called when the user use the combobox. To respond to a change of the selection in the ComboBox, you can use the ''OnChange'' event:
+
<syntaxhighlight lang=pascal>
* Doubleclick the ComboBox on the form or choose the ''OnChange'' event in the Object Inspector and click on the button [...].
 
* The event handler is created, now you can insert your desired source, in our example we want to change the background color of the form:
 
<source>
 
 
procedure TForm1.ComboBox1Change(Sender: TObject);
 
procedure TForm1.ComboBox1Change(Sender: TObject);
 
begin
 
begin
   case ComboBox1.ItemIndex of //what entry (which item) has currently been chosen
+
   case ComboBox1.ItemIndex of       // Caso de escoger el elemento de indice ?
     0: Color:=clRed;
+
     0: ComboBox1.Color:=clRed;               // 0 asigna clRed a Color  (Rojo)
     1: Color:=clGreen;
+
     1: ComboBox1.Color:=clGreen;             // 1 asigna clGreen a Color (Verde)
     2: Color:=clBlue;
+
     2: ComboBox1.Color:=clBlue;               // 2 asigna clBlue a Color  (Azul)
     3: Color:=Random($1000000);
+
     3: ComboBox1.Color:=Random($1000000);     // 3 asigna un color aleatorio a Color
 
   end;
 
   end;
end;
+
end;
</source>
+
</syntaxhighlight>
* Start your application, the selection changes the background color of the form.
+
 
 +
* Arranca tu aplicación, cada una de las selecciones cambia el color de fondo del rectángulo del ComboBox que nos muestra el elemento seleccionado.
 +
 
 +
[[image:ComboBox_02.PNG|center]]
 +
 
 +
=== Dibujado personalizado del ComboBox ===
  
===Own drawed ComboBox===
+
En general, es ventajoso permitir al ComboBox mostrar el [http://en.wikipedia.org/wiki/Skin_%28computing%29 tema] que ha escogido el usuario en sus configuraciones. En algunos casos (por ejemplo, para programar un juego con una superficie repleta de color), puedes desviarte de este estandar y dibujarlo acorde a tu propia elección. Así es como funciona:
  
In general, it is advantageous to let the ComboBox show in the [http://en.wikipedia.org/wiki/Skin_%28computing%29 theme] the user has chosen in his settings. In some cases (for example, to program a game with a colorful surface), you can deviate from this standard and draw it according to your own choice. This is how this works:
+
{{Note|'''Parámetros de un ComboBoxDrawItem:'''<br><br>
 +
'''Control:'''<br> If multiple controls (e.g. multiple ComboBoxes) access this event handle, sabes que control causó el evento. En nuestro ejemplo, en lugar de '''<code>ComboBox1.Canvas.FillRect(ARect)</code>''' puedes además escribir '''<code>TComboBox(Control).Canvas.FillRect(ARect)</code>'''. However, you should still check in advance, whether it is a TComboBox:
  
{{Note|'''Parameters of ComboBoxDrawItem:'''<br><br>
+
<syntaxhighlight lang=pascal>
'''Control:'''<br> If multiple controls (e.g. multiple ComboBoxes) access this event handle, you know which control caused the event. In our example, instead of '''<code>ComboBox1.Canvas.FillRect(ARect)</code>''' you could also write '''<code>TComboBox(Control).Canvas.FillRect(ARect)</code>'''. However, you should still check in advance, whether it is a TComboBox:
 
<source>
 
 
   if Control is TComboBox then
 
   if Control is TComboBox then
 
     TComboBox(Control).Canvas.FillRect(ARect);     
 
     TComboBox(Control).Canvas.FillRect(ARect);     
</source>
+
</syntaxhighlight>
 +
 
 
'''Index:'''  
 
'''Index:'''  
Specifies the item location, so you have access to the string '''<code><ComboBox>.Items[Index]</code>'''.<br>
+
Epecifica la localización del elemento, de forma que se tenga acceso a la cadena '''<code><ComboBox>.Items[Index]</code>'''.<br>
 
'''ARect:'''
 
'''ARect:'''
Describes the rectangle, which is necessary for drawing the background.<br>
+
Describe el rectángulo, el cual es necesario para dibujar el fondo.<br>
 
'''State:'''
 
'''State:'''
Status of the items, whether normal, focused, selected etc.   
+
Estado de los elementos, nos indica cuando se encuentran en estado normal, enfocado, seleccionado, etc.   
 
}}
 
}}
<br>
 
  
====Draw a filled rectangle====
+
==== Dibujar un rectángulo relleno ====
 +
 
 +
* Puedes modificar el ejemplo [[TComboBox#by_code_when_you_create_the_form|Fill ComboBox mediante cógigo cuando se crea el formulario]].
 +
* Cambio para ''ComboBox1'' en el Inspector de Objetos la propiedad ''Style'' al valor ''csOwnerDrawFixed''.
 +
* Crea en el Inspector de Objetos el manejador de evento para el evento ''OnDrawItem'', haciendo click en el pulsador [...].
 +
* Añade el siguiente código al manejador:
  
* You can modify the example [[TComboBox#by_code_when_you_create_the_form|Fill ComboBox by code when you create the form]].
+
<syntaxhighlight lang=pascal>
* Change from ''ComboBox1'' in the Object Inspector the property ''Style'' to ''csOwnerDrawFixed''.
 
* Create in the Object Inspector the event handler for the event ''OnDrawItem'', by clicking on the button [...].
 
* Add the following code to the handler:
 
<source>
 
 
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
 
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
 
   ARect: TRect; State: TOwnerDrawState);
 
   ARect: TRect; State: TOwnerDrawState);
Line 99: Line 109:
 
   ltRect: TRect;
 
   ltRect: TRect;
  
   procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect);             //paint random color
+
   procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); // Pinta un color aleatorio
   // Fills the rectangle with random colours
+
   // Rellena el rectángulo con un color aleatorio.
 
   var
 
   var
 
     y: Integer;
 
     y: Integer;
Line 111: Line 121:
  
 
begin
 
begin
   ComboBox1.Canvas.FillRect(ARect);                                        //first paint normal background
+
   ComboBox1.Canvas.FillRect(ARect);                                         
   ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]); //paint item text
+
  // Primero pinta el fondo normal.
 +
   ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]);
 +
  // A continuación pinta el texto del elemento.
  
   ltRect.Left  := ARect.Left  + 2;                                       //rectangle for color
+
   ltRect.Left  := ARect.Left  + 2;         // Define el rectángulo para el color de relleno.
 
   ltRect.Right  := ARect.Left  + 20;
 
   ltRect.Right  := ARect.Left  + 20;
 
   ltRect.Top    := ARect.Top    + 1;
 
   ltRect.Top    := ARect.Top    + 1;
Line 120: Line 132:
  
 
   ComboBox1.Canvas.Pen.Color:=clBlack;
 
   ComboBox1.Canvas.Pen.Color:=clBlack;
   ComboBox1.Canvas.Rectangle(ltRect);                                       //draw a border
+
   ComboBox1.Canvas.Rectangle(ltRect);                   // Dibuja un borde.
  
   if InflateRect(ltRect, -1, -1) then                                       //resize rectangle by one pixel
+
   if InflateRect(ltRect, -1, -1) then                   // Redimensiona el rectángulo en un pixel.
 
     if Index = 3 then
 
     if Index = 3 then
       FillColorfulRect(ComboBox1.Canvas, ltRect)                           //paint random color
+
       FillColorfulRect(ComboBox1.Canvas, ltRect)       //Pinta un color aleatorio.
 
     else begin
 
     else begin
 
       case Index of
 
       case Index of
         0: ComboBox1.Canvas.Brush.Color := clRed;
+
         0: ComboBox1.Canvas.Brush.Color := clRed;       // Color Rojo.
         1: ComboBox1.Canvas.Brush.Color := clGreen;
+
         1: ComboBox1.Canvas.Brush.Color := clGreen;     // Color Verde.
         2: ComboBox1.Canvas.Brush.Color := clBlue;
+
         2: ComboBox1.Canvas.Brush.Color := clBlue;     // Color Azul.
 
       end;
 
       end;
       ComboBox1.Canvas.FillRect(ltRect);                                    //paint colors according to selection
+
       ComboBox1.Canvas.FillRect(ltRect);                                     
 +
      // Pinta colores rellenando el rectángulo de acuerdo a la selección escogida.
 
     end;
 
     end;
 
end;
 
end;
</source>  
+
</syntaxhighlight>
* Your example might look like:
+
 +
* Tu ejemplo podría parecerse a esto:
 +
 
 
[[image:ComboBoxBsp1.png]] -> [[image:ComboBoxBsp2.png]]
 
[[image:ComboBoxBsp1.png]] -> [[image:ComboBoxBsp2.png]]
<br>
 
<br>
 
  
====Preceded image====
+
==== Preceder una imagen al elemento ====
 +
 
 +
En este ejemplo cargamos unas cuantas imágenes en un [[TImageList]] y las dibujamos en frente de los elementos del ComboBox. Es un ejemplo que generalmente solo muestra que puedes hacer en el: no entro explícitamente en detalles, tales como chequeo,  si la imagen correspondiente existe, etc. en este ejemplo. Esto debería hacerse por tu parte dependiendo de las necesidades.
  
In this example, we load a few images in a [[TImageList]] and draw them in front of the items in the combobox. It is a simple example which only generally show what you can do. I don't run explicitly details, such as checking, whether the corresponding image exists etc. in this example. This should be done by you depending on the need.
+
* Crea una aplicación análoga a la del ejemplo [[TComboBox#by_code_when_you_create_the_form| Rellena el ComboBox mediante código cuando se crea el formulario]].
 +
* Cambia de ''ComboBox1'' en la propiedad ''Style'' del Inspector de Objetos a ''csOwnerDrawFixed''.
 +
* Añade un[[TImageList]] desde la paleta de componentes ''Common controls'' a tu formulario.
 +
* La ''Height'' y ''Width'' de 16 pixels viene predefinida para ''ImageList1''. Lo permitimos. Para contener completamente las imágenes en nuestro ComboBox establecemos la propiedad ''ItemHeight'' de ''ComboBox1'' a ''18'' mediante el Inspector de Objetos.
 +
* Añade 4 imágenes en ImageList:
 +
** Doble click ''ImageList1'' 0 click izquierdo ''ImageList1'' y selecciona ''ImageList Editor...''.
 +
** Haz click en ''Add'' y selecciona una imagen (ver <Lazarus directory>/images/... hay varias imágenes e iconos en tamaño 16px).
 +
** Has añadido 4 imágenes, confirma tu selección con [ok].
 +
* Crea mediante el Inspector de Objetos el manejador de eventos para el evento ''OnDrawItem'', haciendo click en el pulsador ['''...'''].
 +
* Añade el siguiente código al manejador:
  
* Create an application analogous example [[TComboBox#by_code_when_you_create_the_form|Fill ComboBox by code when you create the form]].
+
<syntaxhighlight lang=pascal>
* Change from ''ComboBox1'' in the Object Inspector the property ''Style'' to ''csOwnerDrawFixed''.
 
* Add a [[TImageList]] from the component palette ''Common controls'' on your form.
 
* The ''Height'' and ''Width'' of 16 pixels is preset in ''ImageList1''. We allow this. To fit neatly the images into our combo box, we make the property ''ItemHeight'' from ''ComboBox1'' to ''18'' in the Object Inspector.
 
* Add four images in the ImageList:
 
** Doubleclick ''ImageList1'' or leftclick ''ImageList1'' and select ''ImageList Editor...''.
 
** Click on ''Add'' and select an image (see <Lazarus directory>/images/... there are various images or icons in 16x16px size).
 
** Have you added four images, confirm your work with [OK].
 
* Create in the Object Inspector the event handler for the event ''OnDrawItem'', by clicking on the button [...].
 
* Add the following code to the handler:
 
<source>
 
 
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
 
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
 
   ARect: TRect; State: TOwnerDrawState);
 
   ARect: TRect; State: TOwnerDrawState);
 
begin
 
begin
   ComboBox1.Canvas.FillRect(ARect);                                        //first paint normal background
+
   ComboBox1.Canvas.FillRect(ARect);                                        // Primeramente pinta un fondo normal.
   ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]);  //paint item text
+
   ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]);  // Pinta el texto del elemento.
   ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index);  //draw image according to index on canvas
+
   ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index);  // Dibuja la imagen de acuerdo al índice (index) en el canvas.
 
end;
 
end;
</source>
+
</syntaxhighlight>
* Your example might look like:
+
 
[[image:ComboBoxBsp1.png]] -> [[image:ComboBoxBsp3.png]]
+
* Tu ejemplo debería parecerse a esto:
<br>
+
 
<br>
+
[[image:ComboBox_02.PNG|center]] -> [[image:ComboBox_03.PNG|center]]
 +
 
 +
Como puedes observar asigna las imágenes que tienen su propio índice en ImageList1 correlativo al índice que tienen los elementos en el ComboBox1.
  
 
{{LCL Components Footer |TListBox|TScrollBar}}
 
{{LCL Components Footer |TListBox|TScrollBar}}
 
{{LCL Components}}
 
{{LCL Components}}
 
[[Category:LCL]]
 
[[Category:Components]]
 
--[[User:Michl|Michl]] 22:14, 2 June 2014 (CEST)
 

Latest revision as of 05:13, 29 February 2020

Deutsch (de) English (en) español (es) suomi (fi) français (fr) 日本語 (ja)

>> LCL Components >> TComboBox

Visión General

Esta página explica como utilizar el componente TComboBox. Cuando mencione hacer click en algo, a menos que diga explícitamente que haga click-derecho, siempre me referiré a realizar un click izquierdo en el elemento en cuestión.

Descripción

Es una combinación de una caja de edición (edit box) y un listado (soltar-abajo(drop-down) permitiendo una o varias opciones a ser escogidas.


ComboBox 04.png

Modo de uso

Para utilizar un TComboBox en un form, simplemente lo seleccionas de la paleta de componentes Standardy a continuación lo ubicas en el formulario mediante un click en el mismo.

En el componente ComboBox, las strings se almacenan en la propiedad Items, que es del tipo TStrings. Por tanto puedes asignar o eliminar cadenas en el ComboBox como en un TStringList o su padre TStrings.


Aquí hay unos cuantos ejemplo de uso para combobox ComboBox1 en un formulario Form1:

Llenar el ComboBox

Mediante el Inspector de Objetos

  • Selecciona el ComboBox en tu formulario mediante un click.
  • Ve al Inspector de Objetos en la solapa Propiedades de la propiedad Items.
  • Haz Click en el pulsador que tiene los tres puntos ... que habrirá el editor de cadenas.
  • Escribe las entradas de texto que necesites y confirma el contenido con OK.

Mediante código cuando creas el formulario

  • Crea el manejador del evento OnCreate para el formulario haciendo click en el formulario, luego en el Inspector de Objetos vamos a la solapa events, selecciona el evento OnCreate y haz click en [...] o haz doble click en el pulsador dentro del formulario.
  • En el editor de código fuente ahora insertamos la sección de texto deseada, para nuestro ejemplo, escribiéndola como sigue:
procedure TForm1.FormCreate(Sender: TObject);  
begin
  ComboBox1.Text := 'Esto es un ComboBox';
  ComboBox1.Items.Clear;                  // Elimina todo el contenido previo.
  ComboBox1.Items.Add('Rojo');            // Añade la entrada del elemento 'Rojo'.
  ComboBox1.Items.Add('Verde');           // Añade la entrada del elemento 'Verde'.
  ComboBox1.Items.Add('Azul');            // Añade la entrada del elemento 'Azul'.
  ComboBox1.Items.Add('Color Aleatorio'); // Añade la entrada del elemento 'Color Aleatorio'.
end;
ComboBox 01.PNG

Hacer que suceda algo después de la selección

Como todos los componentes TComboBox también provee varios eventos que son llamados cuando el usuario lo utiliza. Para responder a un cambio en la selección de los elementos podemos utilizar el evento OnChange:

  • Para ello hacemos doble click sobre el componente ComboBox del formulario en el que estemos trabajando o bien escogemos el evento OnChange en el Inspector de Objetos y a continuación click en [...].
  • Con esto se crea el manejador del evento permintiéndonos insertar el código deseado. En nuestro ejemplo queremos cambiar el color del recuadro que muestra el elemento seleccionado:
procedure TForm1.ComboBox1Change(Sender: TObject);
begin
  case ComboBox1.ItemIndex of       // Caso de escoger el elemento de indice ?
    0: ComboBox1.Color:=clRed;                // 0 asigna clRed a Color   (Rojo)
    1: ComboBox1.Color:=clGreen;              // 1 asigna clGreen a Color (Verde)
    2: ComboBox1.Color:=clBlue;               // 2 asigna clBlue a Color  (Azul)
    3: ComboBox1.Color:=Random($1000000);     // 3 asigna un color aleatorio a Color
  end;
end;
  • Arranca tu aplicación, cada una de las selecciones cambia el color de fondo del rectángulo del ComboBox que nos muestra el elemento seleccionado.
ComboBox 02.PNG

Dibujado personalizado del ComboBox

En general, es ventajoso permitir al ComboBox mostrar el tema que ha escogido el usuario en sus configuraciones. En algunos casos (por ejemplo, para programar un juego con una superficie repleta de color), puedes desviarte de este estandar y dibujarlo acorde a tu propia elección. Así es como funciona:

Light bulb  Nota: Parámetros de un ComboBoxDrawItem:

Control:
If multiple controls (e.g. multiple ComboBoxes) access this event handle, sabes que control causó el evento. En nuestro ejemplo, en lugar de ComboBox1.Canvas.FillRect(ARect) puedes además escribir TComboBox(Control).Canvas.FillRect(ARect). However, you should still check in advance, whether it is a TComboBox:

  if Control is TComboBox then
    TComboBox(Control).Canvas.FillRect(ARect);

Index: Epecifica la localización del elemento, de forma que se tenga acceso a la cadena <ComboBox>.Items[Index].
ARect: Describe el rectángulo, el cual es necesario para dibujar el fondo.
State: Estado de los elementos, nos indica cuando se encuentran en estado normal, enfocado, seleccionado, etc.

Dibujar un rectángulo relleno

  • Puedes modificar el ejemplo Fill ComboBox mediante cógigo cuando se crea el formulario.
  • Cambio para ComboBox1 en el Inspector de Objetos la propiedad Style al valor csOwnerDrawFixed.
  • Crea en el Inspector de Objetos el manejador de evento para el evento OnDrawItem, haciendo click en el pulsador [...].
  • Añade el siguiente código al manejador:
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
var
  ltRect: TRect;

  procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); // Pinta un color aleatorio
  // Rellena el rectángulo con un color aleatorio.
  var
    y: Integer;
  begin
    for y:=myRect.Top to myRect.Bottom - 1 do begin
      aCanvas.Pen.Color:=Random($1000000);
      aCanvas.Line(myRect.Left, y, myRect.Right, y);
    end;
  end;

begin
  ComboBox1.Canvas.FillRect(ARect);                                         
  // Primero pinta el fondo normal.
  ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]);
  // A continuación pinta el texto del elemento. 

  ltRect.Left   := ARect.Left   + 2;         // Define el rectángulo para el color de relleno.
  ltRect.Right  := ARect.Left   + 20;
  ltRect.Top    := ARect.Top    + 1;
  ltRect.Bottom := ARect.Bottom - 1;

  ComboBox1.Canvas.Pen.Color:=clBlack;
  ComboBox1.Canvas.Rectangle(ltRect);                   // Dibuja un borde.

  if InflateRect(ltRect, -1, -1) then                   // Redimensiona el rectángulo en un pixel.
    if Index = 3 then
      FillColorfulRect(ComboBox1.Canvas, ltRect)        //Pinta un color aleatorio.
    else begin
      case Index of
        0: ComboBox1.Canvas.Brush.Color := clRed;       // Color Rojo. 
        1: ComboBox1.Canvas.Brush.Color := clGreen;     // Color Verde.
        2: ComboBox1.Canvas.Brush.Color := clBlue;      // Color Azul.
      end;
      ComboBox1.Canvas.FillRect(ltRect);                                    
      // Pinta colores rellenando el rectángulo de acuerdo a la selección escogida.
    end;
end;
  • Tu ejemplo podría parecerse a esto:

ComboBoxBsp1.png -> ComboBoxBsp2.png

Preceder una imagen al elemento

En este ejemplo cargamos unas cuantas imágenes en un TImageList y las dibujamos en frente de los elementos del ComboBox. Es un ejemplo que generalmente solo muestra que puedes hacer en el: no entro explícitamente en detalles, tales como chequeo, si la imagen correspondiente existe, etc. en este ejemplo. Esto debería hacerse por tu parte dependiendo de las necesidades.

  • Crea una aplicación análoga a la del ejemplo Rellena el ComboBox mediante código cuando se crea el formulario.
  • Cambia de ComboBox1 en la propiedad Style del Inspector de Objetos a csOwnerDrawFixed.
  • Añade unTImageList desde la paleta de componentes Common controls a tu formulario.
  • La Height y Width de 16 pixels viene predefinida para ImageList1. Lo permitimos. Para contener completamente las imágenes en nuestro ComboBox establecemos la propiedad ItemHeight de ComboBox1 a 18 mediante el Inspector de Objetos.
  • Añade 4 imágenes en ImageList:
    • Doble click ImageList1 0 click izquierdo ImageList1 y selecciona ImageList Editor....
    • Haz click en Add y selecciona una imagen (ver <Lazarus directory>/images/... hay varias imágenes e iconos en tamaño 16px).
    • Has añadido 4 imágenes, confirma tu selección con [ok].
  • Crea mediante el Inspector de Objetos el manejador de eventos para el evento OnDrawItem, haciendo click en el pulsador [...].
  • Añade el siguiente código al manejador:
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
begin
  ComboBox1.Canvas.FillRect(ARect);                                         // Primeramente pinta un fondo normal.
  ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]);  // Pinta el texto del elemento. 
  ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index);  // Dibuja la imagen de acuerdo al índice (index) en el canvas.
end;
  • Tu ejemplo debería parecerse a esto:
ComboBox 02.PNG

->

ComboBox 03.PNG

Como puedes observar asigna las imágenes que tienen su propio índice en ImageList1 correlativo al índice que tienen los elementos en el ComboBox1.


Return To: LCL Components  — Previous: TListBox Next: TScrollBar


LCL Components
Component Tab Components
Standard TMainMenu • TPopupMenu • TButton • TLabel • TEdit • TMemo • TToggleBox • TCheckBox • TRadioButton • TListBox • TComboBox • TScrollBar • TGroupBox • TRadioGroup • TCheckGroup • TPanel • TFrame • TActionList
Additional TBitBtn • TSpeedButton • TStaticText • TImage • TShape • TBevel • TPaintBox • TNotebook • TLabeledEdit • TSplitter • TTrayIcon • TControlBar • TFlowPanel • TMaskEdit • TCheckListBox • TScrollBox • TApplicationProperties • TStringGrid • TDrawGrid • TPairSplitter • TColorBox • TColorListBox • TValueListEditor
Common Controls TTrackBar • TProgressBar • TTreeView • TListView • TStatusBar • TToolBar • TCoolBar • TUpDown • TPageControl • TTabControl • THeaderControl • TImageList • TPopupNotifier • TDateTimePicker
Dialogs TOpenDialog • TSaveDialog • TSelectDirectoryDialog • TColorDialog • TFontDialog • TFindDialog • TReplaceDialog • TTaskDialog • TOpenPictureDialog • TSavePictureDialog • TCalendarDialog • TCalculatorDialog • TPrinterSetupDialog • TPrintDialog • TPageSetupDialog
Data Controls TDBNavigator • TDBText • TDBEdit • TDBMemo • TDBImage • TDBListBox • TDBLookupListBox • TDBComboBox • TDBLookupComboBox • TDBCheckBox • TDBRadioGroup • TDBCalendar • TDBGroupBox • TDBGrid • TDBDateTimePicker
Data Access TDataSource • TCSVDataSet • TSdfDataSet • TBufDataset • TFixedFormatDataSet • TDbf • TMemDataset
System TTimer • TIdleTimer • TLazComponentQueue • THTMLHelpDatabase • THTMLBrowserHelpViewer • TAsyncProcess • TProcessUTF8 • TProcess • TSimpleIPCClient • TSimpleIPCServer • TXMLConfig • TEventLog • TServiceManager • TCHMHelpDatabase • TLHelpConnector
Misc TColorButton • TSpinEdit • TFloatSpinEdit • TArrow • TCalendar • TEditButton • TFileNameEdit • TDirectoryEdit • TDateEdit • TTimeEdit • TCalcEdit • TFileListBox • TFilterComboBox • TComboBoxEx • TCheckComboBox • TButtonPanel • TShellTreeView • TShellListView • TXMLPropStorage • TINIPropStorage • TJSONPropStorage • TIDEDialogLayoutStorage • TMRUManager • TStrHolder
LazControls TCheckBoxThemed • TDividerBevel • TExtendedNotebook • TListFilterEdit • TListViewFilterEdit • TLvlGraphControl • TShortPathEdit • TSpinEditEx • TFloatSpinEditEx • TTreeFilterEdit • TExtendedTabControl •
RTTI TTIEdit • TTIComboBox • TTIButton • TTICheckBox • TTILabel • TTIGroupBox • TTIRadioGroup • TTICheckGroup • TTICheckListBox • TTIListBox • TTIMemo • TTICalendar • TTIImage • TTIFloatSpinEdit • TTISpinEdit • TTITrackBar • TTIProgressBar • TTIMaskEdit • TTIColorButton • TMultiPropertyLink • TTIPropertyGrid • TTIGrid
SQLdb TSQLQuery • TSQLTransaction • TSQLScript • TSQLConnector • TMSSQLConnection • TSybaseConnection • TPQConnection • TPQTEventMonitor • TOracleConnection • TODBCConnection • TMySQL40Connection • TMySQL41Connection • TMySQL50Connection • TMySQL51Connection • TMySQL55Connection • TMySQL56Connection • TMySQL57Connection • TSQLite3Connection • TIBConnection • TFBAdmin • TFBEventMonitor • TSQLDBLibraryLoader
Pascal Script TPSScript • TPSScriptDebugger • TPSDllPlugin • TPSImport_Classes • TPSImport_DateUtils • TPSImport_ComObj • TPSImport_DB • TPSImport_Forms • TPSImport_Controls • TPSImport_StdCtrls • TPSCustomPlugin
SynEdit TSynEdit • TSynCompletion • TSynAutoComplete • TSynMacroRecorder • TSynExporterHTML • TSynPluginSyncroEdit • TSynPasSyn • TSynFreePascalSyn • TSynCppSyn • TSynJavaSyn • TSynPerlSyn • TSynHTMLSyn • TSynXMLSyn • TSynLFMSyn • TSynDiffSyn • TSynUNIXShellScriptSyn • TSynCssSyn • TSynPHPSyn • TSynTeXSyn • TSynSQLSyn • TSynPythonSyn • TSynVBSyn • TSynAnySyn • TSynMultiSyn • TSynBatSyn • TSynIniSyn • TSynPoSyn
Chart TChart • TListChartSource • TRandomChartSource • TUserDefinedChartSource • TCalculatedChartSource • TDbChartSource • TChartToolset • TChartAxisTransformations • TChartStyles • TChartLegendPanel • TChartNavScrollBar • TChartNavPanel • TIntervalChartSource • TDateTimeIntervalChartSource • TChartListBox • TChartExtentLink • TChartImageList
IPro TIpFileDataProvider • TIpHtmlDataProvider • TIpHttpDataProvider • TIpHtmlPanel
Virtual Controls TVirtualDrawTree • TVirtualStringTree • TVTHeaderPopupMenu