Présentation détaillée : personnalisation de votre contrôle utilisateur

Article
08/21/2008

Mise à jour : novembre 2007

Dans cette leçon, vous apprendrez comment personnaliser votre contrôle utilisateur pour le rendre plus pratique.

Ajout d'étiquettes

Dans la dernière leçon, vous avez testé le contrôle utilisateur NamesControl et vous avez constaté qu'il fonctionnait de la manière escomptée. Vous avez également pu noter de quelles manières il pourrait être amélioré. Par exemple, il n'est pas évident de déterminer le nom qui doit être entré dans chaque zone de texte, et il n'existe aucun moyen de vérifier que l'utilisateur a saisi les trois noms.

Pour que le contrôle utilisateur soit plus pratique, vous pouvez ajouter des étiquettes afin d'identifier chaque zone de texte. Vous pouvez définir le texte des étiquettes pour afficher « Prénom », « Deuxième prénom » et « Nom », mais que se passerait-il si vous décidiez ultérieurement d'utiliser plutôt l'étiquette « Initiale du deuxième prénom » ? Il est plutôt conseillé de créer des propriétés pour le texte des étiquettes afin de vous permettre de le modifier au moment de la conception et de spécifier une valeur par défaut pour chaque propriété.

Essayez !

Pour personnaliser votre contrôle utilisateur

Ouvrez le projet NamesUserControl que vous avez créé dans la leçon précédente. Si vous ne l'aviez pas enregistré, vous devez d'abord revenir à la leçon précédente, Test de votre contrôle utilisateur, et réaliser les procédures qui s'y trouvent.
Dans l'Explorateur de solutions, sélectionnez NamesControl.vb, puis dans le menu Affichage, choisissez Concepteur.
Dans la Boîte à outils, faites glisser trois contrôles Label jusqu'au concepteur et placez-en un au-dessus de chaque contrôle TextBox.
Dans l'Explorateur de solutions, sélectionnez NamesControl.vb, puis dans le menu Affichage, sélectionnez Code.

Dans l'éditeur de code, ajoutez le code suivant afin de créer des propriétés pour le texte des étiquettes.

Private text1 As String = "First Name"
Property Label1Text() As String
    Get
        Return text1
    End Get
    Set(ByVal value As String)
        text1 = value
        Label1.Text = text1
    End Set
End Property
Private text2 As String = "Middle Name"
Property Label2Text() As String
    Get
        Return text2
    End Get
    Set(ByVal value As String)
        text2 = value
        Label2.Text = text2
    End Set
End Property
Private text3 As String = "Last Name"
Property Label3Text() As String
    Get
        Return text3
    End Get
    Set(ByVal value As String)
        text3 = value
        Label3.Text = text3
    End Set
End Property

Remarquez que le code déclare trois variables Private pour le texte des étiquettes, et que les déclarations comprennent la valeur par défaut à afficher.

Dans l'éditeur de code, sélectionnez (NamesControl Événements) dans la zone déroulante de gauche, puis sélectionnez l'événement Load dans la zone déroulante de droite.

Ajoutez le code suivant au gestionnaire d'événements NamesControl_Load :

' Initialize the three labels
Me.Label1.Text = Label1Text
Me.Label2.Text = Label2Text
Me.Label3.Text = Label3Text

Dans le menu Générer, choisissez Générer la solution.
Dans l'Explorateur de solutions, sélectionnez Form1.vb, puis dans le menu Affichage, choisissez Concepteur.

Vérifiez que les étiquettes affichent le texte par défaut. Essayez de modifier la propriété Label1Text dans la fenêtre Propriétés et vérifiez qu'elle change également dans le contrôle.
Dans le menu Fichier, choisissez Fermer pour fermer le concepteur de formulaires.

Ajout de la validation

Une autre personnalisation utile consisterait à ajouter du code permettant de valider les informations saisies afin de s'assurer qu'elles sont correctes. Plutôt que de valider chaque contrôle TextBox isolé, vous pouvez écrire le code de validation pour l'intégralité du contrôle utilisateur.

La plupart des contrôles possèdent un événement Validating qui est déclenché lorsque le focus quitte le contrôle ; c'est à cet endroit que vous devez insérer le code de validation. Dans ce cas-ci, vous souhaitez écrire le code permettant de vérifier que chaque zone de texte contient un nom.

Si une ou plusieurs zones de texte sont vides, vous pouvez afficher un message pour rappeler à l'utilisateur de saisir son nom. Vous pouvez exposer une propriété qui contient un message par défaut ; de cette manière, l'utilisateur de votre contrôle peut modifier le message afin qu'il indique les informations souhaitées.

Il est également possible que l'utilisateur de votre contrôle n'exige pas de deuxième prénom ; par conséquent, vous pouvez également ajouter une propriété Boolean permettant de désactiver la validation pour la zone de texte MiddleName.

Essayez !

Pour ajouter la validation

Dans l'éditeur de code, ajoutez du code pour deux propriétés liées à la validation : l'une pour spécifier si le deuxième prénom est requis et l'autre pour spécifier un message à afficher en cas d'échec de la validation.

Private required As Boolean = True
Property MiddleNameRequired() As Boolean
    Get
        Return required
    End Get
    Set(ByVal value As Boolean)
        required = value
    End Set
End Property
Private errormessage As String = "Please enter your name."
Property ValidationErrorMessage() As String
    Get
        Return errormessage
    End Get
    Set(ByVal value As String)
        errormessage = value
    End Set
End Property

Dans l'éditeur de code, sélectionnez (NamesControl Événements) dans la zone déroulante de gauche, puis sélectionnez l'événement Validating dans la zone déroulante de droite.

Ajoutez le code suivant au gestionnaire d'événements NamesControl_Validating :

If MiddleNameRequired = True Then
    If FirstName.Text = "" Or MiddleName.Text = "" Or _
LastName.Text = "" Then
        MsgBox(ValidationErrorMessage)
    End If
Else
    ' Middle name isn't required.
    If FirstName.Text = "" Or LastName.Text = "" Then
        MsgBox(ValidationErrorMessage)
    End If
End If

Dans le menu Générer, choisissez Générer la solution.
Dans l'Explorateur de solutions, sélectionnez Form1.vb, puis dans le menu Affichage, choisissez Concepteur.

Sélectionnez le contrôle utilisateur sur le formulaire et vérifiez que les deux nouvelles propriétés s'affichent dans la fenêtre Propriétés.
À partir de la Boîte à outils, faites glisser un contrôle Button jusqu'au formulaire.
Appuyez sur F5 pour exécuter le programme.

Entrez votre prénom et votre nom, mais ne saisissez pas votre deuxième prénom. Cliquez sur le bouton et un message contenant ValidationErrorMessage doit être affiché.
Dans le menu Fichier, choisissez Enregistrer tout pour enregistrer votre travail.

Étapes suivantes

Dans cette leçon, vous avez appris comment personnaliser votre contrôle utilisateur pour le rendre plus pratique. Dans la leçon suivante, vous apprendrez comment utiliser des graphiques pour dessiner des images et du texte.

Leçon suivante : Dessin d'images : utilisation de graphiques