Comment créer un contrôle utilisateur (Windows Forms .NET)

Article
07/20/2024

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 TextBox contrôle avec un Button contrôle. 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.

Ajouter un contrôle utilisateur à un projet

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

Dans Visual Studio, recherchez la fenêtre Explorateur de projets. 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 Form

Concevoir la zone de texte pouvant être effacée

Le contrôle utilisateur est constitué de contrôles constituants, qui sont les contrôles que vous créez sur l’aire de conception, tout comme la façon dont vous concevez 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 Label contrôle. Définissez les propriétés suivantes :

Property Valeur

Nom lblTitle

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

Property Valeur

Nom txtValue

Ancre Top, Left, Right

Emplacement 3, 23

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

Property Valeur

Nom btnClear

Ancre Top, Right

Emplacement 157, 23

Taille 31, 23

Détails ↻

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`

Property	Valeur
Nom	`lblTitle`
Emplacement	`3, 5`

Property	Valeur
Nom	`txtValue`
Ancre	`Top, Left, Right`
Emplacement	`3, 23`
Taille	`148, 23`

Property	Valeur
Nom	`btnClear`
Ancre	`Top, Right`
Emplacement	`157, 23`
Taille	`31, 23`
Détails	`↻`

Apportez les modifications de code suivantes :

En haut du fichier de code, importez l’espace System.ComponentModel de noms.
Appliquez l’attribut DefaultEvent à la classe. Cet attribut définit l’événement généré par le consommateur lorsque le contrôle est double-cliqué dans le concepteur. Consommateur déclarant et utilisant ce contrôle. Pour plus d’informations sur les attributs, consultez La vue d’ensemble des attributs (C#) ou 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 au consommateur :

[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 il est passé 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 transfère la TextBox.Text propriété au consommateur :

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

<Browsable(True)>
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 nommée Title, qui transfère la Label.Text propriété au consommateur :

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

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

Revenez au ClearableTextBox concepteur et double-cliquez sur le btnClear contrôle 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 dernière section, vous avez un champ vide Form nommé Form1, sinon, créez un formulaire.

Dans la fenêtre Explorateur de solutions, double-cliquez sur le formulaire pour ouvrir le concepteur. L’aire de conception du formulaire doit être sélectionnée.
Définissez la propriété du Size 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 contrôles pour pouvoir les voir.
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
Dans la fenêtre Boîte à outils , 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 ctlFirstName contrôle. 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 ctlLastName contrôle 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 UpdateNameLabel méthode à partir de l’événement du Load 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 :

Application Windows Formavec deux zones de texte créées à partir des contrôles utilisateur et une étiquette.

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

Partager via

Comment créer un contrôle utilisateur (Windows Forms .NET)

Ajouter un contrôle utilisateur à un projet

Concevoir la zone de texte pouvant être effacée

Exemple d’application

Ressources supplémentaires