Chapitre 4:
Coté visuel de VB.NET
1
Les contrôles
• Les contrôles permettent de
créer les interfaces (feuilles,
formulaires, etc) d‘une
application.
• Chaque contrôle est représenté
par une classe
• La majorité des contrôles
dérivent de la classe Control
• Les contrôles sont accessibles via
la boite à outils
2
Les familles de contrôles
• Contrôles d‘affichage
– label, linkLabel, toolTip, errorProvider, …
• Contrôles d‘édition de texte
– textBox, maskedTextBox, richTextBox
• Contrôles de sélection
– checkbox, radioButton, listBox, numericUpDown, …
• Contrôle de regroupement
– groupbox, panel, tabControl,…
• Contrôles graphiques
– pictureBox, ImageList
• Contrôles de gestion du temps
– dateTimePicker, monthCalendar, timer, …
3
Propriétés des contrôles
• La définition des propriétés des
objets utilisés dans l’interface =
affectation des valeurs aux
propriétés des contrôles utilisés
dans cette interface.
• La fenêtre propriété permet de
réaliser cette tache de manière
facile (mode création)
• Il est possible de modifier les
valeurs des propriétés en mode
exécution.
4
Propriétés des contrôles
• Chaque contrôle possède une propriété NAME
• Conventionnellement: on préfixe les noms des contrôles
par 3 lettres qui permettent de reconnaître son type :
– Form : frm
– CommandButton : cmd
– CheckBox : chk
– Label : lbl
– Menu : mnu
– OptionButton : opt
– TextBox : txt
– ComboBox : cmb
– ListBox: lst
– Frame: fra
– Etc.
5
Les contrôles d’affichage
• Label
– name : lbl… (lblCin)
– text : contenu (ce qui est affiché)
– autosize : (T,F) détermine si le contrôle
doit être automatiquement
redimensionné pour s’adapter au
contenu.
– font (en mode création)
ou
lblCin.font.bold, lblCin.font.size,
lblCin.font.name, lblCin.font.italic, etc. (en
mode exécution)
6
Les contrôles d’affichage
• LinkLabel
– name : lnk…
– Hérite toutes les
propriétés du contrôle
label
– Permet de gérer des
liens
Publicité
– Propriété LinkArea :
la partie du label qui
activera le lien
7
Les contrôles d’affichage
• ToolTip
– Contrôle invisible : Le composant ToolTip peut
servir à afficher des messages d'aide courts et
spécialisés relatifs à des contrôles individuels.
– name : tlp…
– AutoPopDelay : durée d‘affichage de l‘info-bulle
en ms.
8
Les contrôles d’affichage
• Private Sub Button1_Click(ByVal sender As
System.Object, ByVal e As System.EventArgs)
Handles Button1.Click
TlpForme1.SetToolTip(Button1,
"Enregistrer sur disque")
End Sub
9
Les contrôles d’affichage
• ErrorProvider
– Contrôle invisible : utile lors de la validation des
données d‘un formulaire
•
– name : err…
Il faut appeler la méthode SetError en
spécifiant le nom du contrôle qui pose
problème et le texte affiché de l’info-bulle
associée au contrôle.
10
Les contrôles d’affichage
• Exemple :
If Not IsNumeric(TextBox1.Text) Then
errP1.SetError(TextBox1, " Valeur
numérique Obligatoire ")
Else
errP1.SetError(TextBox1, "")
End If
11
Les contrôles d’édition de texte
• TextBox
– Permet la saisie d‘information
– name : txt…
– text : le texte dans la zone de texte
– Autosize
– maxlength : longueur max du texte
– passwordChar : spécifie un caractère pour cacher un mot de
passe
– characterCasing : normal|upper|lower
– multiline : (T|F) texte sur une seule ou plusieurs lignes
– lines : permet de lire le texte ligne par ligne dans un tableau de
String
– wordwrap (T|F): indique si le retour à ligne se fait
automatiquement lorsqu‘on atteint la fin de la zone de texte
multiligne
– scrollbars : none|horizontal|vertical|both : affiche des barres
de défilement dans la zone de texte multiligne
12
Les contrôles d’édition de texte
• MaskedTextBox
– Permet la vérification automatique des
informations saisies
– name : txt…
– Mask : détermine le format des infos qui vont être
saisies : on peut choisir un mask existant ou
configurer son propre mask dans propriété.
13
Les contrôles d’édition de texte
Personnalisé:
0 : un chiffre obligatoire (0 à 9)
9 : un chiffre ou un espace optionnel
L : une lettre obligatoire (de a à z
ou A à Z).
? : une lettre optionnelle.
C : un caractère quelconque
. : le séparateur décimal
, : le séparateur des milliers
: : le séparateur horaire
Publicité
/ : le séparateur de date
$ : le symbole monétaire
< les caractères suivants seront transformés en minuscules.
> les caractères suivants seront transformés en majuscules
| annule l’effet des deux caractères > et <
\ caractère d’échappement faisant perdre sa signification spéciale au caractère suivant
14
Les contrôles de déclenchement
d’actions
• Button
– name : cmd…
– text : le texte du bouton de commande
– enabled : (T|F) indique si le bouton est activé ou pas.
– visible : (T|F)
– Les propriétés acceptButton et cancelButton d‘un
formulaire :
• Pour associer la touche Enter à un click d’un bouton cmdB1 :
acceptButton cmdB1
• Pour associer la touche Esc à un click d’un bouton cmdB2 :
cancelButton cmdB2
15
Les contrôles de déclenchement
d’actions
• MenuStrip
– name : mnu…
– Permet de créer des menus avec des sous-menus
– ShortCutKeys
16
Les contrôles de déclenchement
d’actions
• ToolStrip
– name : tls…
– Permet de créer une barre d‘outils.
– Contient un assistant pour générer
automatiquement une barre d’outils avec toutes
les fonctionnalités de base d’une application.
17
Les contrôles de déclenchement
d’actions
• ToolStrip
• Rq: cliquer sur la petite flèche présente sur la
droite du contrôle et choisir l’option Insérer
des éléments standard.
• Pas de code généré pour les clicks sur ces
différents boutons: il faut écrire le code.
18
Les contrôles de sélection
• Checkbox (choix multiple)
– name :chk…
– text : le texte affiché à coté de la case
– checked : (T|F) indique l’état de la case à cocher
(T: sélectionnée)
19
Les contrôles de sélection
• RadioButton
– name :opt…
– text : le texte affiché à coté de l‘option
– checked : (T|F) indique l’état de la case à cocher (T:
sélectionnée)
• Rq: Si on avait un autre ensemble de boutons
radios concernant l‘étage(rdc, 1er Et, 2ème Et), il
faut les placer dans un « Panel » pour pouvoir
sélectionner le nombre de pièces et l‘étage
simultanément.
20
Les contrôles de sélection
• ListBox
– name : lst…
– Liste à choix multiples
– Les éléments de la liste sont des chaînes de
caractères.
– items: permet de remplir la liste (les éléments
constituent une collection appelée Items)
– sorted : (T|F) liste triée ou pas
– selectionMode : par défaut one (none, multiple,)
21
Les contrôles de sélection
• ListBox
• Méthodes :
•
Publicité
•
•
•
•
lstNbPieces.add("s+5")
lstNbPieces.insert(ind,element)
lstNbPieces.removeAt(ind)
lstNbPieces.clear()
ind=lstNbPieces.findString("elt")
22
Les contrôles de sélection
• ListBox
• Dans le cas d’une sélection simple :
– selectedIndex : retourne l‘indice de l‘élément sélectionné de la
collection Items
– selectedItem: retourne l‘élément sélectionné de la collection
Items
• Dans le cas d‘une sélection multiple :
– selectionIndices: retourne une collection contenant les indices
des éléments sélectionnés.
– slectedItems: retourne une collection contenant les éléments
sélectionnés.
Il faut parcourir les listes pour avoir les éléments:
Dim obj As Object
For Each obj in lstNbPieces.SelectedItems
System.Console.WriteLine(obj)
Next
23
Les contrôles de sélection
• CheckedListBox
– Amélioration du contrôle listBox
– Les cases sont cochées indépendamment de la
sélection
24
Les contrôles de sélection
• CheckedListBox
– Récupération des cases cochées: collection checkedItems
For Each elt In CheckedListBox1.CheckedItems
Console.WriteLine(elt.ToString)
Next
• Ou bien
For i = 0 To CheckedListBox1.Items.Count - 1
If CheckedListBox1.GetItemChecked(i) = true Then
Console.WriteLine(CheckedListBox1.Items(i))
End If
Next
25
Les contrôles de sélection
• ComboBox
– name : cmb…
– Liste à choix unique
– Association entre listBox et textBox : l‘utilisateur
peut choisir ou saisir une option.
26
Les contrôles de sélection
• ComboBox
• dropDownStyle :
(simple|dropDown|dropDownList) indique le
mode de fonctionnement du comboBox
– Simple : liste affichée en permanence: l‘utilisateur
choisit ou saisit une valeur
– Dropdown : liste affichée à la demande
– Dropdownlist : l‘utilisateur ne peut plus saisir
simple
dropdown
27
Les contrôles de sélection
• ComboBox
– text : pour récupérer la valeur choisie ou saisie
– selectedIndex : l‘indice de l‘élément sélectionné
28
Les contrôles de sélection
• TreeView
– name : trv…
– Affichage d‘éléments sous
une forme arborescente
– nodes : collection qui contient
tous les nœuds du 1er niveau.
Chaque nœud dispose aussi d‘une collection nodes
qui contient ses nœuds enfants, etc.
Publicité
29
Les contrôles de sélection
30
Les contrôles de sélection
31
Les contrôles de regroupement
• GroupBox
– Permet le regroupement logique et visuel de contrôles
– Possède une bordure et une légende (propriété Text)
– Permet d‘isoler des groupes de radioButtons
• Panel
– Même principe que GroupBox mais sans légende et
invisible (par défaut)
– borderStyle : (none|fixedSingle|fixed3D)
32
Les contrôles de regroupement
• TabControl
– Permet l‘utilisation des onglets (tabs)
– Chaque onglet est considéré comme une feuille à
part sur laquelle on peut placer nos contrôles.
– tabpages : collection qui contient tous les onglets
du contrôle.
33
Les contrôles graphiques
• PictureBox
– Permet l‘utilisation des images (bmp, gif, ico, wmf, jpg)
– image : indique le contenu du contrôle
– Avec le code :
PictureBox1.Image = Image.FromFile("image1.jpg")
PictureBox1.Image = nothing 'pour supprimer l‘image
Editeur PictureBox
34
Les contrôles graphiques
• ImageList
– Il sert de conteneur à images, c'est une collection
d'images. les images qu'il contient seront utilisées
par d'autres contrôles :PictureBox, Listview,
TreeView, Button, …
– Il n'est pas visible en exécution.
35
Les contrôles graphiques
• ImageList
– Pour ces contrôles, la propriété imageIndex
indique l‘indice de l‘image (dans ImageList)
associée au contrôle.
– images : collection qui contient toutes les images
de la liste
Editeur ImageList
36
Les contrôles de temps
• DateTimePicker
– Associe un calendrier à une zone de texte
– value : permet de récupérer la date choisie ou de
spécifier la date sélectionnée sur le calendrier à
son affichage
– Par défaut : calendrier sélectionne la date
courante
37
Vérification de la saisie
38
L’événement Validating
• Chaque contrôle peut être configuré pour permettre la
vérification de son contenu en mettant sa propriété
causesValidation à True.
A) Juste avant que le contrôle ne perde le focus (focus
=un objet de l'interface devient 'actif'), l’événement
Validating est déclenché pour permettre la vérification
de la saisie de l’utilisateur.
• Si la saisie n’est pas correcte, nous pouvons bloquer le
passage du focus vers un autre contrôle en mettant la
propriété Cancel de l’objet CancelEventArg à True .
B) Si la saisie est correcte, l’événement Validated est
déclenché sur le contrôle et le focus se déplace sur le
contrôle suivant.
39
L’événement Validating
40
L’événement Validating
41