Coté visuel de VB.NET

Programming, Visual Basic .NET, GUI · course

Voir tous les documents en programmation

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