Liste évoluée (image, titre, description)

**BobaL** · 03/05/2012, 22h56

Bonjour,

Je cherche à créer des listes évoluées du style http://www.tweetdeck.com/assets/home...screenshot.png

Connaissez vous un composant ou une technique me permettant de faire ce genre de chose ?

Merci.

**Gilbert Geyer** · 04/05/2012, 10h21

Bonjour,

C'est faisable avec un ComboBox ou une ListBox personnalisés : voici une capture d'écran simple.

Et voici un bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  Rect: TRect; State: TOwnerDrawState);
var marge:integer;
  begin
  //on dessine le fond des lignes en alternant les couleurs
  if index mod 2<>1 then begin
                          Listbox1.canvas.brush.color:=clwhite;
                          Listbox1.canvas.fillrect(rect);
                          end else begin
                                   Listbox1.canvas.brush.color:=$00F4F3EE;
                                   Listbox1.canvas.fillrect(rect);
                                   end;
   //on affiche le texte
  Listbox1.canvas.textout(rect.left+30,rect.top+2,listbox1.items[index]);
  //affichage lorsque la ligne est sélectionnée
  if (odSelected in state) then begin
                                Listbox1.canvas.brush.color:=$00F8D1C5;
                                Listbox1.canvas.fillrect(rect);
                                Listbox1.canvas.font.color:=clblue;
                                Listbox1.canvas.font.style:=Listbox1.canvas.font.style +[fsbold]+[fsitalic];
                                Listbox1.canvas.textout(rect.left+30,rect.top+2,listbox1.items[index]);
                                end;
 
 
  //dessin des icônes
  marge := (Rect.Bottom - Rect.Top - imageList1.Height) div 2;
  imagelist1.Draw(Listbox1.canvas, Rect.Left + 4, Rect.Top + marge, Index);
 
  end;
 
procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
  Rect: TRect; State: TOwnerDrawState);
var marge:integer;
  begin
//on dessine le fond des lignes en alternant les couleurs
  if index mod 2<>1 then begin
                          ComboBox1.canvas.brush.color:=clwhite;
                          ComboBox1.canvas.fillrect(rect);
                          end else begin
                                   ComboBox1.canvas.brush.color:=$00F4F3EE;
                                   ComboBox1.canvas.fillrect(rect);
                                   end;
   //on affiche le texte
  ComboBox1.canvas.textout(rect.left+30,rect.top+2,ComboBox1.items[index]);
 
  if (odSelected in state) then begin
                                ComboBox1.canvas.brush.color:=$00F8D1C5;
                                ComboBox1.canvas.fillrect(rect);
                                ComboBox1.canvas.font.color:=clblue;
                                ComboBox1.canvas.font.style:=ComboBox1.canvas.font.style +[fsbold]+[fsitalic];
                                ComboBox1.canvas.textout(rect.left+30,rect.top+2,ComboBox1.items[index]);
                                end;
  //dessin des icônes
  marge := (Rect.Bottom - Rect.Top - imageList1.Height) div 2;
  imagelist1.Draw(ComboBox1.canvas, Rect.Left + 4, Rect.Top + marge, Index);
 
end;

Bien entendu, il faudra adapter ces codes en utilisant les propriétés Columns pour obtenir un résultat sur 3 colonnes, et augmenter ItemHeight pour tes photos qui sont plus grandes que les icônes de ma capture d'écran.

A+.

EDIT : Oups la capture d'écran n'a pas été prise en compte!