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

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.

Important

La documentation du Guide du bureau pour .NET 7 et .NET 6 est en cours de construction.

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 :

1. 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) .

   

2. 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 :

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 :

1. 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

2. Ajoutez un Label contrôle. Définissez les propriétés suivantes :

   Property	Valeur
   Nom	lblTitle
   Emplacement	3, 5

3. 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

4. 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 :

   

5. Appuyez sur F7 pour ouvrir l’éditeur de code de la ClearableTextBox classe.

6. Apportez les modifications de code suivantes :

   1. En haut du fichier de code, importez l’espace System.ComponentModel de noms.

   2. 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.

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

      Imports System.ComponentModel
      
      <DefaultEvent("TextChanged")>
      Public Class ClearableTextBox
      

   3. 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.

   4. 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
      

   5. 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
      

7. 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
   

8. 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.

1. 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.

2. Définissez la propriété du Size formulaire sur 432, 315.

3. 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.

4. Là encore, double-cliquez sur le contrôle ClearableTextBox pour générer un deuxième contrôle.

5. Revenez au concepteur et séparez les contrôles pour pouvoir les voir.

6. 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

7. 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

8. 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

9. 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.

10. Revenez au concepteur et double-cliquez sur le ctlLastName contrôle pour générer le deuxième gestionnaire d’événements.

11. 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 .

12. 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
    

13. 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
    

14. 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 :

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