Aller au menu - Aller au contenu

Icône Les contrôles spécifiques

Avatar
Par Avatar Hankerspace
Mise à jour : 13/12/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
23 410 visites depuis 7 jours, dont 448 sur ce chapitre classé 14/786
Vous savez désormais comment vous servir des contrôles basiques : les textbox, les labels, les boutons etc... Mais qu'en est-il pour les contrôles plus spécifique mais non sans être inintéressant.

Vous allez sûrement vouloir faire un peu plus que mettre des boutons et des TextBox dans tout votre programme.

Je parle des checkbox et des boutons radio entre autres. Comment s'en servir ?

Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

CheckBox, BoutonRadio

Eh bien créons d'abord un nouveau projet (gardez le TP voyage dans un coin ca pourrait toujours vous servir :p ), dans ce nouveau projet on va essayer de faire quelque chose comme ça :

Image utilisateur

Je vous donne les noms des composants que j'ai mis :



Des checkbox
à gauche
de haut en bas:
  • CHK_1
  • CHK_2
  • CHK_4
  • CHK_8
Des RadioBoutons
au centre
de haut en bas
  • RB_1
  • RB_2
  • RB_3
  • RB_4
Des RadioBoutons
à droite
de haut en bas :
  • RB_ROUGE
  • RB_VERT
  • RB_BLEU
  • RB_JAUNE

Bouton BT_1
Bouton BT_2
Bouton BT_3

Txtbox TXT_CHK
Txtbox TXT_RBNB
Txtbox TXT_RBCOL


Dictateur va !

Mais non, du calme ! Je vous donne les noms de mes contrôles pour que nous puissions tous travailler sur de bonnes bases, je ne me prend absolument pas pour dieu :-° .

Bon. Si vous testez ce petit programme, vous pouvez cliquer sur les cases, elles s'allument bien seulement, problème du côté des boutons radios : cliquer sur n'importe lequel enlève l'autre même si ce dernier n'est pas dans la même colonne ... Eh oui, l'IDE n'est pas intelligent, il ne sait pas ce que nous voulons faire.

Comment faire ?

Eh bien retournez sur votre IDE et cherchez le contrôle groupbox. Entourez grâce à 2 groupbox vos 2 colonnes de radioboutons et allez dans les propriétés des 2 groupbox que vous venez de créer pour retirer le texte qu'elles contiennent : elles seront invisibles.

Lors de l'application de la propriété Enabled ou Visible sur la GroupBox, tous les éléments contenus à l'intérieur de celle-ci (appelés ses enfants) seront affectés par la propriété.

Une fois cela fait, retestez le programme et là : magie

Image utilisateur

On peut sélectionner un bouton dans chaque colonne. :)
Retour en haut

La pratique

Bon le côté design fonctionne, on va passer à l'accès aux propriétés.

Donc allons côté code VB en double cliquant sur BT_1, ce qui nous créera notre évènement de clic sur le bouton.

Dans cet évènement je vais vous demander de faire la somme des checkbox cochées. Donc la propriété qui régit l'état d'une checkbox est ...

Checked ! (siii)

Bon, écrivons donc ce code :
Code : VB.NET
1
Me.CHK_1.Checked

Pour récupérer l'état de la première checkbox. Cette propriété est définie par true ou false. C'est donc un Booléen, vous avez dû vous en rendre compte lorsque vous avez inscrit cette ligne, l'IDE vous a affiché une infobulle.

Nous allons donc facilement pouvoir faire une boucle if :
Code : VB.NET
1
if Me.CHK_1.Checked then

Cette boucle sera pénétrée si la case 1 est cochée.

Donc, vous avez toutes les cartes en main. Écrivez dans la txtbox TXT_CHK la somme des cases cochées.

Secret (cliquez pour afficher)
Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
Private Sub BT_1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_1.Click
        Dim Somme As Integer = 0
        If Me.CHK_1.Checked Then
            Somme = Somme + 1
        End If
        If Me.CHK_2.Checked Then
            Somme = Somme + 2
        End If
        If Me.CHK_4.Checked Then
            Somme = Somme + 4
        End If
        If Me.CHK_8.Checked Then
            Somme = Somme + 8
        End If
        Me.TXT_CHK.Text = Somme
    End Sub

Et voilà le code permettant de faire cela.

C'était pas sorcier !

Je vous dis un secret : la propriété pour voir quel boutonradio est coché est la même !


Alors, à vos claviers ! Écrivez dans la seconde txtbox quel bouton a été coché et dans la dernière la couleur sélectionnée !

Je vous laisse quand même réfléchir !

Solution



Secret (cliquez pour afficher)
Code : VB.NET
 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
Public Class Form1

    Private Sub BT_1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_1.Click
        Dim Somme As Integer = 0
        If Me.CHK_1.Checked Then
            Somme = Somme + 1
        End If
        If Me.CHK_2.Checked Then
            Somme = Somme + 2
        End If
        If Me.CHK_4.Checked Then
            Somme = Somme + 4
        End If
        If Me.CHK_8.Checked Then
            Somme = Somme + 8
        End If
        Me.TXT_CHK.Text = Somme
    End Sub

    Private Sub BT_2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_2.Click
        If Me.RB_1.Checked Then
            Me.TXT_RBNB.Text = Me.RB_1.Text
        End If
        If Me.RB_2.Checked Then
            Me.TXT_RBNB.Text = Me.RB_2.Text
        End If
        If Me.RB_3.Checked Then
            Me.TXT_RBNB.Text = Me.RB_3.Text
        End If
        If Me.RB_4.Checked Then
            Me.TXT_RBNB.Text = Me.RB_4.Text
        End If
    End Sub

    Private Sub BT_3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_3.Click
        If Me.RB_BLEU.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_BLEU.Text
            Me.BackColor = Color.Blue
        End If
        If Me.RB_JAUNE.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_JAUNE.Text
            Me.BackColor = Color.Yellow
        End If
        If Me.RB_ROUGE.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_ROUGE.Text
            Me.BackColor = Color.Red
        End If
        If Me.RB_VERT.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_VERT.Text
            Me.BackColor = Color.Green
        End If
    End Sub
End Class


Donc voici mon code, ce n’est pas bien j'ai mis aucun commentaire !

Bon, il est un peu laborieux puisqu'il vérifie toutes les chkbox une par une...

Mais bon, il fonctionne et vous avez réussi à accéder et réagir aux checkbox et radiobuttons. Essayez donc de le simplifier à coup de IIF !

Image utilisateur


Petit plus : la couleur. Vous auriez dû vous douter que je ne mettais pas des couleurs juste comme ça xD, et la propriété vous auriez pu la trouver tout seul !

Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
Private Sub BT_3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_3.Click
        If Me.RB_BLEU.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_BLEU.Text
            Me.BackColor = Color.Blue
        End If
        If Me.RB_JAUNE.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_JAUNE.Text
            Me.BackColor = Color.Yellow
        End If
        If Me.RB_ROUGE.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_ROUGE.Text
            Me.BackColor = Color.Red
        End If
        If Me.RB_VERT.Checked Then
            Me.TXT_RBCOL.Text = Me.RB_VERT.Text
            Me.BackColor = Color.Green
        End If
    End Sub

Et l'IDE vous donne automatiquement la liste des couleurs disponibles quand vous écrivez le signe égal "=", il faut juste connaître les noms anglais.

Bon, vous savez désormais accéder et utiliser les checkbox et aux radiobuttons !
Retour en haut

Les ComboBox

Bon, attaquons les ComboBox (aussi appelé DropDownList), sous ce nom barbare se trouve un élément que vous retrouvez partout, même sur le SDZ :
Image utilisateur


Eh oui, c'est cette petite boite déroulante une ComboBox. Nous allons apprendre à la remplir et à réagir avec.

Image utilisateur


Créez donc cette petite fenêtre : une ComboBox nommée CB_CHOIX, et une textbox appelée TXT_CHOIX.

Cette fois, au lieu d'utiliser un bouton pour déclencher l'évènement, nous allons utiliser l'évènement propre de la combobox. Cet évènement se déclenche lors du changement de sélection.

Tout d'abord il faut attribuer des valeurs à la combobox, 2 choix s'offrent à nous : la manuelle (en dur dans le code) ou l'automatique (grâce a l'assistant de l'IDE). Je vais d'abord vous expliquer l'automatique puis la manuelle qui offre beaucoup plus de possibilités.

Méthode assistée


Pour la méthode avec assistant. Lors du clic sur la combobox (dans l'IDE), elle apparait en "sélectionnée" et une petite flèche apparait en haut à droite de cette sélection :

Image utilisateur


Cliquez maintenant sur Modifier les éléments pour lui en attribuer.

Méthode manuelle


La seconde méthode nous amène coté VB, double-cliquez sur la fenêtre pour créer l'évènement onload.

Une technique est de créer un tableau contenant les valeurs et de "lier" ce tableau à la combobox : créons tout d'abord notre tableau.
Code : VB.NET
1
2
3
4
Dim MonTableau(9) As Integer
 For i As Integer = 0 To 9
     MonTableau(i) = i + 1
 Next

Rempli ici avec des valeurs allant de 1 à 10.

L'instruction pour lier cette combobox (valable pour les listbox et autres) est :

Code : VB.NET
1
Me.CB_CHOIX.DataSource = MonTableau

Donc si l'on écrit tout ça dans le main, on obtient une liste déroulante avec des nombres allant de 1 à 10.

Nous allons écrire la valeur récupérée dans la textbox lors du changement de choix dans la combobox, la propriété utilisée pour récupérer la valeur sélectionnée est SelectedValue (je vous laisse faire cette modification).

Code : VB.NET
1
2
3
Private Sub CB_CHOIX_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CB_CHOIX.SelectedIndexChanged
        Me.TXT_CHOIX.Text = Me.CB_CHOIX.SelectedValue
    End Sub

Et voilà !

Dernière chose avant le test : retournez côté design, recherchez et attribuez la propriété DropDownList à la propriété DropDownStyle. Pourquoi ? Cette propriété empêche l'utilisateur d'écrire lui-même une valeur dans cette combobox, il n'a que le choix entre les valeurs disponibles, dans le cas contraire, il aurait pu utiliser la ComboBox comme une textbox.


Image utilisateur


Après le test, nous voyons que tout fonctionne, nous avons réussi à accéder et à remplir une combobox !
Retour en haut

MicroTP

Bon, pour vérifier vos connaissances sur les accès aux propriétés et l'utilisation de nouveau contrôles, je vais vous demander de réaliser un petit programme contenant : Une ProgressBar et une TrackBar.

Le déplacement de la trackbar par l'utilisateur se répercutera sur le remplissage de la progressbar : si la trackbar est au milieu, la progressbar aussi.

Ce petit TP vous apprendra a trouver tout seul les propriétés utiles des contrôles. Il va falloir se faire à cette pratique, c'est 50% du travail d'un développeur : trouver comment faire ce qu'il souhaite sans que personne ne lui montre. Ne vous inquiétez pas, l'IDE vous expliquera l'utilité de chaque propriété.

Bonne chance !

Résultat



Image utilisateur


Alors, une seule ligne côté VB a ajouter dans l'évènement de la trackbar :

Code : VB.NET
1
2
3
Private Sub TKB_IN_Scroll(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TKB_IN.Scroll
        Me.PGB_OUT.Value = Me.TKB_IN.Value
    End Sub

Eh oui ! Les propriétés a utiliser étaient value. Vous avez dû avoir des surprises au premiers test, du genre la progressbar ne va pas jusqu'au bout alors que le trackbar y est ...

Alors, comment résoudre ce problème pour ceux qui n'ont pas trouvé !

Eh bien regardez un peu du côté de la propriété Maximum de ces 2 contrôles. Si elle n'est pas la même ça risque de ne pas aller ^^ . Autre chose : Je vous conseille de mettre la tickfrequency (autrement dit, le pas) de la trackbar à 0, plus de "tirets" et donc la progressbar est mise à jour en temps réel.

Testez les propriétés, par exemple la propriété style de la progressbar peut être intéressante


Eh bien, pas trop dur :p !
Retour en haut

Q.C.M.

Quel contrôle va permettre de "grouper" des contrôles pour qu'ils réagissent entre eux (comme des radioboutons)
LA propriété Checked d'une groupbox renvoie une variable de quel type ?

Statistiques de réponses au QCM

Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
16 commentaires pour "Les contrôles spécifiques"
Note moyenne : 3.60 / 4 (543 votes)
Pseudo Commentaire
Hors ligne _Serge_ # Posté le 08/10/2010 à 11:17:28
Avatar

Avis : Mitigé

Ville : Pont de beauvoisin
Pays : France métropolitaine

 Bonjour,
Je n'ai pas trouvé cette section très claire. Pour ce qui est des groupbox, j'ai bien réussi. Je n'ai pas trouvé très compliqué de les ajouter par la suite dans la fenêtre et de déplacer mes boutons à l'intérieur. Mais il est vrai que je suis en version 2010 de visual basic.
Par contre, pour ce qui est des combobox, alors là, je n'ai que dalle dans la liste. On dirait que ce que j'ai fait ne lie pas les données dans la combobox. Et qui plus est, dans les explications, on ne sait pas trop mettre quoi et où... Bref, j'ai rien compris. J'ai voulu ajouter une combobox dans la fenêtre avec les boutons et je n'ai aucune donnée à sélectionner.
Hors ligne Maws # Posté le 24/02/2011 à 15:49:25
Hein?
Avatar

Ville : Tourcoing
Pays : France métropolitaine
Études : Lycée Gambetta - Tourcoing

 Voila mon code pour la combolist:
Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Public Class Form1


    Private Sub CB_CHOIX_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CB_CHOIX.SelectedIndexChanged
        Me.TXT_CHOIX.Text = CB_CHOIX.SelectedValue
    End Sub

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim montableau(9) As Integer
        For i As Integer = 0 To 9
            montableau(i) = i + 1
        Next
        Me.CB_CHOIX.DataSource = montableau
    End Sub
End Class


Il faut mettre l'initialisation dans le form load ;)
*Vous rigolez de moi parce que je suis différent de vous mais je rigole de vous parce que vous êtes tous pareil*
 
Hors ligne remi500cl # Posté le 04/06/2011 à 06:37:48

Avis : Très bon

Ville : Dunkerque
Pays : France métropolitaine

 Autre solution pour le tuto CheckBox, BoutonRadio avec des IIF() :p :
Code : VB.NET
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
Private Sub BT_1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_1.Click
        Dim intResultat As Integer = Val(IIf(CHK_1.Checked, CHK_1.Text, 0)) + Val(IIf(CHK_2.Checked, CHK_2.Text, 0)) + Val(IIf(CHK_4.Checked, CHK_4.Text, 0)) + Val(IIf(CHK_8.Checked, CHK_8.Text, 0))
        TXT_CHK.Text = intResultat

    End Sub

    Private Sub BT_2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_2.Click
        Dim intResultat As Integer = Val(IIf(RB_1.Checked, RB_1.Text, 0)) + Val(IIf(RB_2.Checked, RB_2.Text, 0)) + Val(IIf(RB_3.Checked, RB_3.Text, 0)) + Val(IIf(RB_4.Checked, RB_4.Text, 0))
        TXT_RBNB.Text = intResultat

    End Sub

    Private Sub BT_3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BT_3.Click
        Dim strResultat As String = IIf(RB_ROUGE.Checked, RB_ROUGE.Text, "") + IIf(RB_VERT.Checked, RB_VERT.Text, "") + IIf(RB_BLEU.Checked, RB_BLEU.Text, "") + IIf(RB_JAUNE.Checked, RB_JAUNE.Text, "")
        TXT_RBCOL.Text = strResultat
        strResultat = IIf(RB_ROUGE.Checked, "Red", Nothing) & IIf(RB_VERT.Checked, "Green", Nothing) & IIf(RB_BLEU.Checked, "Blue", Nothing) & IIf(RB_JAUNE.Checked, "Yellow", Nothing)
        Me.BackColor = Color.FromName(IIf(strResultat = "", "Control", strResultat))

    End Sub
Hors ligne Loco_ # Posté le 16/08/2011 à 12:58:31

Bonjour,
En vue d'optimiser le code j'aimerais savoir si pour les radios boutons il existe pas une sorte de fonction "trouve le bouton sélectionné dans cette groupBox"
Hors ligne Safirion # Posté le 02/01/2012 à 00:02:05
The legend of Zelda ♥
Avatar

Avis : Décevant

Ville : Antony
Pays : France métropolitaine

 Tu pourrais expliquer mieux les Groupbox car personnellement, je n'ai rien compris.
:soleil: :waw: Les jeux indémodables : VERSION 1.99 :waw: :soleil:

^^ LA CONSOLE, C'EST L'AVENIR ! ! ! ! ^^


Image utilisateur
Image utilisateur
Image utilisateur

 

Voir tous les commentaires