Guide pratique pour créer un contrôle utilisateur

Cet article explique comment ajouter un contrôle utilisateur à votre projet, puis ajouter ce contrôle utilisateur à un formulaire. Vous allez créer un contrôle utilisateur réutilisable qui est visuellement attrayant et fonctionnel. Le nouveau contrôle regroupe un contrôle TextBox avec un contrôle Button. Lorsque l’utilisateur sélectionne le bouton, le texte de la zone de texte est effacé. Pour plus d’informations sur les contrôles utilisateur, consultez vue d’ensemble du contrôle utilisateur.

Comprendre les consommateurs de contrôle utilisateur

Tout au long de cet article, le terme consommateur fait référence à tout code qui utilise votre contrôle utilisateur. Cela inclut les éléments suivants :

Formulaires qui contiennent votre contrôle utilisateur.
Autres contrôles qui hébergent votre contrôle utilisateur.
Applications qui référencent votre bibliothèque de contrôle utilisateur.

Lorsque vous créez un contrôle utilisateur, vous créez un composant réutilisable. Le consommateur utilise ce composant en le plaçant sur un formulaire, en définissant ses propriétés ou en répondant à ses événements. Le consommateur n’a pas besoin de connaître les contrôles internes (comme les TextBox et Button) qui composent votre contrôle utilisateur, ils interagissent uniquement avec les propriétés et les événements que vous choisissez d’exposer.

Modèle de code essentiel pour les contrôles utilisateur

Avant d’ajouter l’implémentation détaillée, il est utile de comprendre le modèle de code minimum viable pour un contrôle utilisateur. Au cœur, un contrôle utilisateur a besoin des éléments suivants :

Transfert d’événements : transmettez les événements des contrôles internes au consommateur.
Exposition des propriétés : autoriser l'utilisateur à accéder aux propriétés de contrôle interne.
Comportement logique : gérer les interactions entre les contrôles internes.

Le code suivant illustre ces modèles. Vous n’avez pas besoin de tout ce code pour un contrôle utilisateur de base, mais ces modèles aident à créer un composant professionnel et réutilisable qui s’intègre bien aux applications concepteur et consommateur.

Ajouter un nouveau contrôle utilisateur

Après avoir ouvert votre projet Windows Forms dans Visual Studio, utilisez les modèles Visual Studio pour créer un contrôle utilisateur :

Dans Visual Studio, recherchez la fenêtre Explorateur de solutions . Cliquez avec le bouton droit sur le projet et choisissez Ajouter un>contrôle utilisateur (Windows Forms).
Définissez le nom du contrôle sur ClearableTextBox, puis appuyez sur Ajouter.

Une fois le contrôle utilisateur créé, Visual Studio ouvre le concepteur :

Concepteur de contrôles utilisateur dans Visual Studio pour Windows Forms

Concevoir la zone de texte pouvant être effacée

Le contrôle utilisateur est constitué de contrôles constitutifs, qui sont les contrôles que vous créez sur l’aire de conception, comme lors de la conception d'un formulaire. Procédez comme suit pour ajouter et configurer le contrôle utilisateur et ses contrôles constituants :

Une fois le concepteur ouvert, l’aire de conception du contrôle utilisateur doit être l’objet sélectionné. Si ce n’est pas le cas, cliquez sur l’aire de conception pour la sélectionner. Définissez les propriétés suivantes dans la fenêtre Propriétés :

Propriété Valeur

MinimumSize 84, 53

Taille 191, 53
Ajoutez un contrôle Label. Définissez les propriétés suivantes :

Propriété Valeur

Nom lblTitle

Emplacement 3, 5
Ajoutez un contrôle TextBox. Définissez les propriétés suivantes :

Propriété Valeur

Nom txtValue

Ancre Top, Left, Right

Emplacement 3, 23

Taille 148, 23
Ajoutez un contrôle Button. Définissez les propriétés suivantes :

Propriété Valeur

Nom btnClear

Ancre Top, Right

Emplacement 157, 23

Taille 31, 23

Texto ↻

Le contrôle doit ressembler à l’image suivante :
Appuyez sur F7 pour ouvrir l’éditeur de code de la ClearableTextBox classe.

Propriété	Valeur
MinimumSize	`84, 53`
Taille	`191, 53`

Propriété	Valeur
Nom	`lblTitle`
Emplacement	`3, 5`

Propriété	Valeur
Nom	`txtValue`
Ancre	`Top, Left, Right`
Emplacement	`3, 23`
Taille	`148, 23`

Propriété	Valeur
Nom	`btnClear`
Ancre	`Top, Right`
Emplacement	`157, 23`
Taille	`31, 23`
Texto	`↻`

Apportez les modifications de code suivantes :

En haut du fichier de code, importez l'espace de noms System.ComponentModel.
Appliquez l’attribut DefaultEvent à la classe. Cet attribut définit l’événement généré lorsque le consommateur (le formulaire ou l’application utilisant ce contrôle) double-clique sur le contrôle dans le concepteur. Pour plus d’informations sur les attributs, consultez Attributs (C#) ou Vue d’ensemble des attributs (Visual Basic).
```
using System.ComponentModel;

namespace UserControlProject
{
    [DefaultEvent(nameof(TextChanged))]
    public partial class ClearableTextBox : UserControl
```
```
Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox
```
Ajoutez un gestionnaire d’événements qui transfère l’événement TextBox.TextChanged aux consommateurs de votre contrôle utilisateur :
```
[Browsable(true)]
public new event EventHandler? TextChanged
{
    add => txtValue.TextChanged += value;
    remove => txtValue.TextChanged -= value;
}
```
```
<Browsable(True)>
Public Shadows Custom Event TextChanged As EventHandler
    AddHandler(value As EventHandler)
        AddHandler txtValue.TextChanged, value
    End AddHandler
    RemoveHandler(value As EventHandler)
        RemoveHandler txtValue.TextChanged, value
    End RemoveHandler
    RaiseEvent(sender As Object, e As EventArgs)

    End RaiseEvent
End Event
```
Notez que l’événement a l’attribut Browsable déclaré dessus. Lorsque l’objet Browsable est appliqué à un événement ou à une propriété, il contrôle si l’élément est visible dans la fenêtre Propriétés lorsque le contrôle est sélectionné dans le concepteur. Dans ce cas, true est transmis en tant que paramètre à l’attribut, indiquant que l’événement doit être visible.

Ajoutez une propriété de chaîne nommée Text, qui expose la propriété TextBox.Text aux consommateurs de votre contrôle utilisateur :

[Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}

<Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property

Ajoutez une propriété de chaîne de caractères nommée Title, qui expose la propriété Label.Text aux consommateurs de votre contrôle utilisateur :

[Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}

<Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Property Title() As String
    Get
        Return lblTitle.Text
    End Get
    Set(value As String)
        lblTitle.Text = value
    End Set
End Property

Revenez au concepteur ClearableTextBox et double-cliquez sur le contrôle btnClear pour générer un gestionnaire pour l’événement Click. Ajoutez le code suivant pour le gestionnaire, qui efface la txtValue zone de texte :
```
private void btnClear_Click(object sender, EventArgs e) =>
    Text = "";
```
```
Private Sub btnClear_Click(sender As Object, e As EventArgs)
    txtValue.Text = ""
End Sub
```
Enfin, générez le projet en cliquant avec le bouton droit sur le projet dans la fenêtre Explorateur de solutions, puis en sélectionnant Générer. Il ne doit y avoir aucune erreur et une fois la build terminée, le ClearableTextBox contrôle apparaît dans la boîte à outils à utiliser.

L’étape suivante consiste à utiliser le contrôle dans un formulaire.

Exemple d’application

Si vous avez créé un projet dans la section précédente, vous disposez d’un Form vide nommé Form1, sinon, créez un nouveau formulaire.

Dans la fenêtre Explorateur de solutions, double-cliquez sur le formulaire pour ouvrir le designer. L'aire de conception du formulaire doit être sélectionnée.
Définissez la propriété Size du formulaire sur 432, 315.
Ouvrez la fenêtre Boîte à outils , puis double-cliquez sur le contrôle ClearableTextBox . Ce contrôle doit être répertorié sous une section nommée après votre projet.
Là encore, double-cliquez sur le contrôle ClearableTextBox pour générer un deuxième contrôle.
Revenez au concepteur et séparez les éléments de contrôle pour que vous puissiez les voir tous les deux.
Sélectionnez un contrôle et définissez les propriétés suivantes :

Propriété Valeur

Nom ctlFirstName

Emplacement 12, 12

Taille 191, 53

Titre First Name
Sélectionnez l’autre contrôle et définissez les propriétés suivantes :

Propriété Valeur

Nom ctlLastName

Emplacement 12, 71

Taille 191, 53

Titre Last Name
De retour dans la boîte à outils fenêtre, ajoutez un contrôle d’étiquette au formulaire et définissez les propriétés suivantes :

Propriété Valeur

Nom lblFullName

Emplacement 12, 252
Ensuite, vous devez générer les gestionnaires d’événements pour les deux contrôles utilisateur. Dans le concepteur, double-cliquez sur le contrôle ctlFirstName. Cette action génère le gestionnaire d’événements de l’événement TextChanged et ouvre l’éditeur de code.
Revenez au concepteur et double-cliquez sur le contrôle ctlLastName pour générer le deuxième gestionnaire d’événements.
Revenez au concepteur et double-cliquez sur la barre de titre du formulaire. Cette action génère un gestionnaire d’événements pour l’événement Load .

Propriété	Valeur
Nom	`ctlFirstName`
Emplacement	`12, 12`
Taille	`191, 53`
Titre	`First Name`

Propriété	Valeur
Nom	`ctlLastName`
Emplacement	`12, 71`
Taille	`191, 53`
Titre	`Last Name`

Propriété	Valeur
Nom	`lblFullName`
Emplacement	`12, 252`

Dans l’éditeur de code, ajoutez une méthode nommée UpdateNameLabel. Cette méthode combine les deux noms pour créer un message et affecte le message au lblFullName contrôle.

private void UpdateNameLabel()
{
    if (string.IsNullOrWhiteSpace(ctlFirstName.Text) || string.IsNullOrWhiteSpace(ctlLastName.Text))
        lblFullName.Text = "Please fill out both the first name and the last name.";
    else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day.";
}

Private Sub UpdateNameLabel()
    If String.IsNullOrWhiteSpace(ctlFirstName.Text) Or String.IsNullOrWhiteSpace(ctlLastName.Text) Then
        lblFullName.Text = "Please fill out both the first name and the last name."
    Else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day."
    End If
End Sub

Pour les deux TextChanged gestionnaires d’événements, appelez la UpdateNameLabel méthode :

private void ctlFirstName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

private void ctlLastName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

Private Sub ctlFirstName_TextChanged(sender As Object, e As EventArgs) Handles ctlFirstName.TextChanged
    UpdateNameLabel()
End Sub

Private Sub ctlLastName_TextChanged(sender As Object, e As EventArgs) Handles ctlLastName.TextChanged
    UpdateNameLabel()
End Sub

Enfin, appelez la méthode UpdateNameLabel à partir de l’événement Load du formulaire :

private void Form1_Load(object sender, EventArgs e) =>
    UpdateNameLabel();

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    UpdateNameLabel()
End Sub

Exécutez le projet et entrez un prénom et un nom :

une application Windows Forms avec deux zones de texte créées à partir de contrôles utilisateur et une étiquette.

Essayez d’appuyer sur le bouton ↻ pour réinitialiser l’une des zones de texte.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-07-01