Le premier site francophone dédié au développement Pocket PC

Comment utiliser le contrôle ListView ? (partie 3)

Nous allons apprendre dans cet article à ajouter une icône à chaque "ListItem".

Le contrôle ImageList

Pour ajouter une icône à un "ListItem" il faut que le contrôle ListView soit lié à un autre contrôle qui servira de lieu de stockage d'images. Ce contrôle est un "ImageList". Il est très simple à utiliser :

Tout d'abord il faut cocher "Microsoft CE ImageList Controle 3.0" dans la liste des "Components" (comme nous l'avons déjà fait pour le contrôle ListView). Cette opération ajoute à la boîte à outils eVB le contrôle "ListImage"

Vous devez ensuite placer une occurence de ce contrôle sur la même feuille que le ListView avec lequel il doit être lié. Pour notre exemples nous allons appeler notre contrôle ImageList "IL_Icones" (IL pour ImageList). Les images gérés par ce contrôle doivent être au format 2bp, ou bmp 16 couleurs ou bmp 256 couleurs.

Avant de charger les images dans le contrôle ImageList, il faut indiquer quelle est la longueur (width) et la hauteur (height) des images. Pour celà, les propriétés "ImageWidth" et "ImageHeight" doivent être utilisées. La méthode "Add" permet le chargement d'une image, en donnant comme paramètre le nom de fichier de cette image :

Rem Chargement des images dx1.bmp à dx3.bmp qui
Rem se trouvent dans le dossier de l'application et qui
Rem font 32x132 pixels
IL_Icones.ImageHeight = 32
IL_Icones.ImageWidth = 32
Call IL_Icones32.Add(App.Path & "\dx1.bmp")
Call IL_Icones32.Add(App.Path & "\dx2.bmp")
Call IL_Icones32.Add(App.Path & "\dx3.bmp")

A chaque mode d'affichage son contrôle ListImage

Le contrôle ListView peut afficher les informations qu'il contient de 4 manières différentes. Il y a tout d'abord le mode que l'on connais déjà, le mode "lvwReport" qui permet l'affichage de colonnes. Puis vous avez le mode "lwList" qui affiche en liste uniquement le contenu de la propriété "Text" des ListItems. Il y a aussi le mode "lvwSmallIcons" qui affiche les informations sous forme d'icône avec le texte en dessous, et le mode "lwIcons" qui fait la même chose que "lvwSmallIcons" avec des icones plus grandes.

Le ListView peut être lié à 2 ImageList, l'un pour afficher les icônes en taille standard (32x32) pour le mode "lvwIcons" et l'autre pour afficher les icônes en taille réduite (16x16) pour les autres modes. Ce sont les propriétés "Icons" et "SmallIcons" du ListView qui déterminent les contrôles ListImage liés. Supposons que nous avons 2 contrôles ImageList, le premier "IL_Icones32" est chargé d'images 32x32, le seconde "IL_Icones16" est chargé d'images 16x16 :

LV_Trains.Icons = IL_Icones32.hImageList
LV_Trains.SmallIcons = IL_Icones16.hImageList

Ajouter une icône à un ListItem

Chaque image incluse dans le contrôle ImageList lié possède un index. La première image ajoutée (avec la méthode Add) porte l'index 1, la suivante 2, etc... Lorsque nous voulons ajouter un nouveau ListItem à un ListView nous utilisons la méthode "Add" de la collection "ListItems". Cette méthode accepte en 4ème paramètre (optionnel) le numéro d'index de l'image que l'on veut utiliser pour lui en mode d'affichage "lvwIcon" et en 5ème paramètre (optionnel aussi), le numéro d'index de l'image que l'on veut utiliser en mode d'affichage "lvwList", "lvwSmallIcon" et "lvwReport"

Set wItem = LV_Trains.ListItems.Add(, , "Chambéry", 1,1)

Ce ListItem se voit affecté l'image n°1 du ListImage "IL_Icones32" et aussi l'image n°1 du ListImage "IL_Icones16"

Nous avons charger les 2 ListImage avec des images de tailles différentes (16x16 contre 32x32) et d'aspect différent.

Voilà, cette troisième partie est terminée. Dans la 4ème partie (mais non pas la 4ème dimension !) nous apprendrons à utiliser plusieurs méthodes et propriétés du contrôle ListView qui vont nous permettre d'être encore plus fin dans nos présentations d'informations.

Stéphane Sibué